（二）Vue - 插值表达式及基本指令之v-cloak、v-text、v-html、v-bind、v-model和v-on

插值表达式

再Vue中，{{}} 语法 叫做 插值表达式
例如：

    <p>{{msg}}</p> 

指令：v-cloak

单纯使用插值表达式会因为网络延迟导致界面数据渲染显示异常和闪烁问题，使用 v-cloak 能够解决 插值表达式的这个问题

<p v-cloak>{{ msg }}</p>

指令：v-text

效果类同插值表达式方式绑定数据

<h4 v-text="msg"></h4>

但是存在部分差异：

1. 默认 v-text 是没有数据渲染显示异常和闪烁问题的
2. v-text会覆盖元素中原本的内容，但是 插值表达式 只会替换自己的这个占位符，不会把 整个元素的内容清空

    <p v-cloak>++++++++ {{ msg }} ----------</p>
    <p v-text="msg">==================</p>

效果图如下：

指令：v-html

当data 为一段标签字符串，只有v-html指令可正常加载解析标签，同时v-html也不存在网络延迟导致的内容显示异常和闪烁的问题
比如：

	//msg2: '<h1>哈哈，我是一个大大的H1， 我大，我骄傲</h1>'
    <div>{{msg2}}</div>
    <div v-text="msg2"></div>
    <div v-html="msg2">我是测试数据</div>

指令：v-bind

v-bind: 是 Vue中，提供的用于绑定属性的指令，缩写是 “:”

注意：

• v-bind: 指令可以被简写为 :要绑定的属性
• v-bind 中，可以写合法的JS表达式

  // title: '这是我自己定义的title数据'
<input type="button" value="按钮" v-bind:title="title + '你好'">
//<input type="button" value="按钮" :title="title + '123'">

指令：v-model和双向数据绑定

v-bind 只能实现数据的单向绑定，从 Model 自动绑定到 View层， 无法实现数据的双向绑定
使用 v-model 指令，可以实现 表单元素和 Model 中数据的双向数据绑定
但是 v-model 只能运用在 表单元素中 ，（比如 input(radio, text, address, email…) select checkbox textarea ）

v-model和v-bind写法也存在区别：

<input type="text" style="width:100%;" v-bind:value="msg" >
<input type="text" style="width:100%;" v-model="msg">

指令：v-on和事件修饰符

Vue 中提供了 v-on: 事件绑定机制，缩写是 “@”，用于绑定标签事件

<input type="button" value="按钮" :title="title + '你好'" v-on:click="alert('hello')">
//<input type="button" value="按钮" :title="title + '你好'" v-on:click="show">

事件修饰符

• .stop 阻止冒泡事件

• .prevent 阻止默认行为（比如a标签的默认跳转事件）

• .capture 添加事件侦听器时，使用事件捕获模式

• .self 只有点击当前元素时候，才会触发事件处理函数

• .once 只触发一次事件处理函数

//可以和其他事件修饰符组合使用，均只触发一次
<a href="http://www.baidu.com" @click.prevent.once="linkClick">百度</a> 

问题：

1. .stop 和 .self 的区别
   .self 只会阻止自己身上冒泡行为的触发，并不会真正阻止 冒泡的行为，而.stop是彻底阻止了事件的冒泡。

注意：

• 在 vue实例中，如果想要获取 data 上的数据，或者 想要调用 methods 中的 方法，必须通过 this.数据属性名 或 this.方法名 来进行访问，这里的this，就表示 我们 new 出来的 vue实例对象

• vue实例会监听自己身上 data 中所有数据的改变，只要数据一旦发生变化，就会自动把 最新的数据，从data 上同步到页面中去；【程序员只需要关心数据，不需要考虑如何重新渲染DOM页面】