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

数据绑定

插值表达式

注意事项
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>

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"

1、包含2种东西：事件绑定和数据绑定
2、响应式的

自己实现v-model
<input :value="msg" @input="msg = $event.target.value" />