v-bind和v-model

v-bind

v-bind 主要用于属性绑定，比方你的class属性，style属性，value属性，href属性等等，只要是属性，就可以用v-bind指令进行绑定

<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">

<!-- 缩写 -->
<img :src="imageSrc">

<!-- 内联字符串拼接 -->
<img :src="'/path/to/images/' + fileName">

<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">

<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>

<!-- 绑定一个有属性的对象 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

<!-- 通过 prop 修饰符绑定 DOM 属性 -->
<div v-bind:text-content.prop="text"></div>

<!-- prop 绑定。“prop”必须在 my-component 中声明。-->
<my-component :prop="someThing"></my-component>

<!-- 通过 $props 将父组件的 props 一起传给子组件 -->
<child-component v-bind="$props"></child-component>

绑定class，下面的语法表示 active 这个 class 存在与否将取决于数据属性 isActive 的 truthiness

<div v-bind:class="{ active: isActive }"></div>
//用在组件上时
<my-component v-bind:class="{ active: isActive }"></my-component

v-model

默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event，但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突

//默认值，可省略
model:{
  props:'value',
  change:'input'
}
model:{
  props:'checked',
  change:'change'
}

v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值

<div id="app">
    <input v-model="name" type="text">
    {{name}}
</div>
<script>
const vm = new vue({
    el: "#app",
    data: {
        name: "xxx"
    }
});
</script>

v-model把不同标签对应的属性（等号右边）作为prop（vue固定的）传进去，并且发布对应事件，默认情况下是v-bind:value和v-on:input ="$emit('input', $event.target.value)"的语法糖
v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：

• text 和 textarea 元素使用 value 属性和 input 事件；
• checkbox 和 radio 使用 checked 属性和 change 事件；
• select 字段将 value 作为 prop 并将 change 作为事件。
  现在在这个组件上使用v-model的时候：

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

date里的 lovingVue 的值将会传入这个名为 checked 的 prop。同时当 <base-checkbox> 触发一个 change 事件并附带一个新的值的时候，这个 lovingVue 的属性将会被更新。
这就解释了视图=>数据
我们操作视图，触发了v-model发布的事件，事件给父组件新值，从而改变了数据