Vue表單和組件

1、表單

　　v-model 指令在表單控件元素上建立雙向數據綁定，v-model 會根據控件類型自動選取正確的方法來更新元素。

<input v-model="message" placeholder="編輯我……">
<p>消息是: {{ message }}</p>

一、複選框

　　複選框若是是一個爲邏輯值，若是是多個則綁定到同一個數組：

<div id="app">
  <p>單個複選框：</p>
  <input type="checkbox" id="checkbox" v-model="checked">
  <label for="checkbox">{{ checked }}</label>
    
  <p>多個複選框：</p>
  <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
  <label for="runoob">Runoob</label>
  <input type="checkbox" id="google" value="Google" v-model="checkedNames">
  <label for="google">Google</label>
  <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
  <label for="taobao">taobao</label>
  <br>
  <span>選擇的值爲: {{ checkedNames }}</span>
</div>
 
<script>
new Vue({ el: '#app', data: { checked : false, checkedNames: [] } }) </script>

二、單選按鈕

　　單選按鈕的雙向數據綁定，就是選擇的按鈕的value

三、select 列表

　　下拉列表的雙向數據綁定，就是選擇的選項的value

四、修飾符

（1）.lazy

　　在默認狀況下， v-model 在 input 事件中同步輸入框的值與數據，但你能夠添加一個修飾符 lazy ，從而轉變爲在 change 事件中同步：

//在 "change" 而不是 "input" 事件中更新
<input v-model.lazy="msg" >

（2）.number

　　若是想自動將用戶的輸入值轉爲 Number 類型（若是原值的轉換結果爲 NaN 則返回原值），能夠添加一個修飾符 number 給 v-model 來處理輸入值：

<input v-model.number="age" type="number">
//這一般頗有用，由於在 type="number" 時 HTML 中輸入的值也老是會返回字符串類型

（3）.trim

　　若是要自動過濾用戶輸入的首尾空格，能夠添加 trim 修飾符到 v-model 上過濾輸入：

<input v-model.trim="msg">

　　實例，全選與取消全選：

<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<div id="app">
    <p>全選：</p>
    <input type="checkbox" id="checkbox" v-model="checked" @click="changeAllChecked()">
    <label for="checkbox"> {{checked}} </label>
    <p>多個複選框：</p>
    <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
    <label for="runoob"> Runoob </label>
    <input type="checkbox" id="google" value="Google" v-model="checkedNames">
    <label for="google"> Google </label>
    <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
    <label for="taobao"> taobao </label>
    <br>
    <span> 選擇的值爲:{{checkedNames}} </span>
</div>

new Vue({ el: '#app', data: { checked: false, checkedNames: [], checkedArr: ["Runoob", "Taobao", "Google"] }, methods: { changeAllChecked: function() { if (this.checked) { this.checkedNames = this.checkedArr } else { this.checkedNames = [] } } }, watch: { "checkedNames": function() { if (this.checkedNames.length == this.checkedArr.length) { this.checked = true } else { this.checked = false } } } })

2、組件

　　組件（Component）是 Vue.js 最強大的功能之一。組件能夠擴展 HTML 元素，封裝可重用的代碼。組件系統讓咱們能夠用獨立可複用的小組件來構建大型應用，幾乎任意類型的應用的界面均可以抽象爲一個組件樹。

　　註冊一個全局組件語法格式以下：

Vue.component(tagName, options)

　　tagName 爲組件名，options 爲配置選項。註冊後，咱們可使用如下方式來調用組件：

<tagName></tagName>

一、全局組件

　　全部實例都能用全局組件。

//註冊一個簡單的全局組件 runoob，並使用它：
<div id="app">
    <runoob></runoob>
</div>
 
<script>
// 註冊
Vue.component('runoob', { template: '<h1>自定義組件!</h1>' }) // 建立根實例
new Vue({ el: '#app' }) </script>

二、局部組件

　　咱們也能夠在實例選項中註冊局部組件，這樣組件只能在這個實例中使用：

//註冊一個簡單的局部組件 runoob，並使用它：
<div id="app">
    <runoob></runoob>
</div>
 
<script>
var Child = { template: '<h1>自定義組件!</h1>' } // 建立根實例
new Vue({ el: '#app', components: { // <runoob> 將只在父模板可用
    'runoob': Child } }) </script>

三、Prop

　　prop 是父組件用來傳遞數據的一個自定義屬性。

　　父組件的數據須要經過 props 把數據傳給子組件，子組件須要顯式地用 props 選項聲明 "prop"：

<div id="app">
    <child message="hello!"></child>
</div>
 
<script>
// 註冊
Vue.component('child', { // 聲明 props
  props: ['message'], // 一樣也能夠在 vm 實例中像 "this.message" 這樣使用
  template: '<span>{{ message }}</span>' }) // 建立根實例
new Vue({ el: '#app' }) </script>

四、動態 Prop

　　相似於用 v-bind 綁定 HTML 特性到一個表達式，也能夠用 v-bind 動態綁定 props 的值到父組件的數據中。每當父組件的數據變化時，該變化也會傳導給子組件：

<div id="app">
    <div>
      <input v-model="parentMsg">
      <br>
      <child v-bind:message="parentMsg"></child>
    </div>
</div>
 
<script>
// 註冊
Vue.component('child', { // 聲明 props
  props: ['message'], // 一樣也能夠在 vm 實例中像 "this.message" 這樣使用
  template: '<span>{{ message }}</span>' }) // 建立根實例
new Vue({ el: '#app', data: { parentMsg: '父組件內容' } }) </script>

　　將 v-bind 指令將 todo 傳到每個重複的組件中：

<div id="app">
    <ol>
    <todo-item v-for="item in sites" v-bind:todo="item"></todo-item>
    </ol>
</div>
 
<script> Vue.component('todo-item', { props: ['todo'], template: '<li>{{ todo.text }}</li>' }) new Vue({ el: '#app', data: { sites: [ { text: 'Runoob' }, { text: 'Google' }, { text: 'Taobao' } ] } }) </script>

　　注意：prop 是單向綁定的：當父組件的屬性變化時，將傳導給子組件，可是不會反過來。

五、Prop 驗證

　　組件能夠爲 props 指定驗證要求。prop 是一個對象而不是字符串數組時，它包含驗證要求：

Vue.component('example', { props: { // 基礎類型檢測 （`null` 意思是任何類型均可以）
 propA: Number, // 多種類型
 propB: [String, Number], // 必傳且是字符串
 propC: { type: String, required: true }, // 數字，有默認值
 propD: { type: Number, default: 100 }, // 數組／對象的默認值應當由一個工廠函數返回
 propE: { type: Object, default: function () { return { message: 'hello' } } }, // 自定義驗證函數
 propF: { validator: function (value) { return value > 10 } } } })

　　type 能夠是下面原生構造器：String、Number、Boolean、Function、Object、Array；

　　type 也能夠是一個自定義構造器，使用 instanceof 檢測。

六、自定義事件

　　父組件是使用 props 傳遞數據給子組件，但若是子組件要把數據傳遞回去，就須要使用自定義事件！咱們可使用 v-on 綁定自定義事件，每一個 Vue 實例都實現了事件接口(Events interface)，即：

　　（1）使用 $on(eventName) 監聽事件

　　（2）使用 $emit(eventName) 觸發事件

　　另外，父組件能夠在使用子組件的地方直接用 v-on 來監聽子組件觸發的事件。

　　如下實例中子組件已經和它外部徹底解耦了。它所作的只是觸發一個父組件關心的內部事件。

<div id="app">
    <div id="counter-event-example">
      <p>{{ total }}</p>
      <button-counter v-on:increment="incrementTotal"></button-counter>
      <button-counter v-on:increment="incrementTotal"></button-counter>
    </div>
</div>
 
<script> Vue.component('button-counter', { template: '<button v-on:click="incrementHandler">{{ counter }}</button>', data: function () { return { counter: 0 } }, methods: { incrementHandler: function () { this.counter += 1
      this.$emit('increment')//觸發事件，父組件用v-on:increment監聽子組件觸發的事件
 } }, }) new Vue({ el: '#counter-event-example', data: { total: 0 }, methods: { incrementTotal: function () { this.total += 1 } } }) </script>

　　若是你想在某個組件的根元素上監聽一個原生事件。可使用 .native 修飾 v-on 。例如：

<my-component v-on:click.native="doTheThing"></my-component>