数据绑定

  • DOM内容绑定
插值表达式
注意事项1、插值表达式可以使用简单的运算，例如三目运算、字符串拼接、算术运算2、插值表达式可以调用函数，例如：{{ fn() }}3、复杂的计算或者数据处理，应该使用计算属性或者函数插值表达式的问题1、会闪动 （解决方案使用v-cloak或者v-text替代插值表达式）
v-text
与插值表达式作用一样，但写在标签属性的位置<div v-text="msg"></div>强烈推荐使用v-text取代插值表达式
v-html
此指令有安全隐患，所以只能用于自己的内部数据中，不能使用在第三方数据上<div v-html="msg"></div>
  • DOM属性绑定
v-bind
注意事项1、响应式的2、支持动态处理属性3、有简写 v-bind:src="xxx" ---> :src="xxx"

事件绑定

v-on
1、有简写 v-on:clock="onClick"  --->  @click="onClick"2、有2种事件调用方式:click="fn(params, $event)":click="fn"

样式绑定

双向绑定v-model

1、包含2种东西：事件绑定和数据绑定2、响应式的自己实现v-model<input :value="msg" @input="msg = $event.target.value" />