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发布的事件，事件给父组件新值，从而改变了数据
网友评论