Vue 数据绑定-事件绑定-样式绑定

数据绑定

• DOM内容绑定

插值表达式

注意事项
1、插值表达式可以使用简单的运算，例如三目运算、字符串拼接、算术运算
2、插值表达式可以调用函数，例如：{{ fn() }}
3、复杂的计算或者数据处理，应该使用计算属性或者函数

插值表达式的问题
1、会闪动 （解决方案使用v-cloak或者v-text替代插值表达式）

v-text

与插值表达式作用一样，但写在标签属性的位置


强烈推荐使用v-text取代插值表达式

v-html

此指令有安全隐患，所以只能用于自己的内部数据中，
不能使用在第三方数据上

• 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