VUE 之 v-model

入门级别的，刚开始学习VUE，总结一下。

 

我们先看官网给的一个关于v-model 的例子，很简单，

 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

　　

var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})

　　

 

 以下3种写法效果一样

<input v-model="message">
<input v-bind:value="message"  v-on:input="message = $event.target.value">
<input :value=message @input='message=$event.target.value'>

　　

 

 

 

下面看下，组件上使用 v-model的情况。

 

Vue.component('custom-input', {
            props: ['value'],
            template: `
                <input
                  v-bind:value="value"
                  v-on:input="$emit('input', $event.target.value)"
                >
              `
        })

　　

<div id="app-7">
   <p>{{ searchText }}</p>
   <custom-input v-model="searchText"></custom-input>
</div>

　　

var app7 = new Vue({
            el: '#app-7',
            data: {
                searchText: 'Hello XXX!'
            }
        })

　　

　

下面三种写法效果一样：

<custom-input v-model="searchText"></custom-input>
<custom-input v-bind:value="searchText" v-on:input="searchText = $event"></custom-input>
<custom-input :value="searchText" @input="searchText = $event"></custom-input>

　　

 

 有时候，一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将 value attribute 用于不同的目的。model 选项可以用来避免这样的冲突：

Vue.component('base-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean
  },
  template: `
    <input
      type="checkbox"
      v-bind:checked="checked"
      v-on:change="$emit('change', $event.target.checked)"
    >
  `
})

　　

<div id="app-8">
        <p>{{ lovingVue }}</p>
        <base-checkbox v-model="lovingVue"></base-checkbox>
    </div>

　　

 var app8 = new Vue({
            el: '#app-8',
            data: {
                lovingVue: false
            }
        })

　　

现在在这个组件上使用 v-model 的时候：

<base-checkbox v-model="lovingVue"></base-checkbox>

这里的 lovingVue 的值将会传入这个名为 checked 的 prop。同时当 <base-checkbox> 触发一个 change 事件并附带一个新的值的时候，这个 lovingVue 的 property 将会被更新。