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

数据绑定

• 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" />