Vue—视图中的Directive（指令）

在我们学习.net语言时，有.asp、.aspx页面，在Vue.js中也有类似的编程能力，但是因为Vue.js是一种JavaScript框架，所以只能与标签结合使用，叫做Directive（指令）

指令的原理：

（1）用户在浏览器中输入网址，按回车键

（2）浏览器加载所有的资源（js、html内容），此时尚未解析

（3）浏览器加载Vue.js

（4）Vue.js程序被执行，发现页面中的Directive并进行相关的解析

（5）HTML中的内容被替换，展现给用户

具体的指令用途：

v-for

用于循环显示数据，数据可以是数组，可以是集合，也可以是对象的属性

v-if

条件 Directive 是由 v-if、 v-else-if、 v-else 配合完成的

v-bind

v-bind 指令用于把某个属性绑定到对应的元素属性

v-on

v-on 指令用于触发事件, v-on 可以 简写， v-on:click 往往会写成＠click

v-on 后面可以接 HTML 的标准事件。 例如：
• click （单击鼠标左键）

• dblclick （双击鼠标左键）

• contextmenu （单击鼠标右键）

• mouseover （指针移到有事件监听的元素或其子元素内）

• mouseout （指针移出元素，或者移到其子元素上）

• keydown （键盘动作： 按下任意键）

• keyup （键盘动作：释放任意键）

v-model与双向绑定

v-model 往往用来做“双向绑定” (two way binding） 。

双向绑定的含义如下：
(I) 可以通过表单（用户手动输入的值）来修改某个变量的值。 (2）可以通过程序的运算来修改某个变量的值，井且影响页面的展示。