Vue.js让页面变成动态页面的魔法源
对于一个网页而言，只是简单的静态页面是远远不够的。本章将会编写电影网站的所有页面逻辑，使原本的静态页面网站变成能够处理用户请求和显示动态项目的网站。
本篇文章会涉及到大量的Vue.js和JavaScript语法的应用，目的就是让读者从中学会Vue.js的各种基础语句和处理器的使用。
一、条件渲染
条件渲染是重要的控制系统，执行不同的代码会有不同的显示效果，方便根据用户的选线或组别展示不同的页面，达到代码逻辑中if…else的逻辑效果。
1.1.v-if应用
1.2.v-show应用
另一个用于根据条件展示元素的指令是v-show
跟if区别，不管条件是什么，元素总会被渲染没，而if是惰性不会，满足条件就渲染。
v-show不支持template语法。
二、列表渲染
v-for指令使用item in items形式或者(item,index) in items。另外也可以使用of 代替 in。
第三个参数为索引：(value, key, index) in object
在遍历对象时，是按Object.keys()的结果进行遍历，但是不能保证它的结果在不同的JavaScript引擎下是一致的。
v-for与v-if同时使用：
2.1.如果处于同一节点，v-for的优先级比v-if高。
key关键词使用：
理想状态下，每个节点都是存在key值得，而且这个key值是唯一的。这个特殊属性需要v-bind来绑定动态值。
key关键词是Vue.js识别节点的一个通用机制，并不与v-for特别关联，key还具有其他用途。
三、事件处理器v-on
可以用v-on指令监听DOM事件来触发一些JavaScript代码，相当于JavaScript中的onClick事件，会在按钮被触动或其他某个操作触发时执行该事件。
点击了{{counter}}次
3.1、方法事件处理器
很多事件处理的逻辑很复杂，所以直接把JavaScript代码写在v-on指令中是不可行的。因此v-on可以接收一个定义的方法来调用。
v-on（）方法
3.2、内联处理器
除了直接绑定到一个方法，也可以用内联JavaScript语句，JavaScript的基本函数和语法都是可以直接使用。
......
greet: function (message) {
// `this`在方法里指当前Vue实例
alert('Hello ' + message + '!')
// `event`是原生DOM事件
}
有时也需要在内联语句处理器中访问原生DOM事件。可以用特殊变量$event指定内容。
......
greet: function (message,event) {
// `this`在方法里指当前Vue实例
if(event) event.preventDefault()
alert('Hello ' + message + '!')
// `event`是原生DOM事件
}
3.3、事件修饰符
在事件处理器程序中调用event.preventDefault()或者event.stopPropagation()方法是常见的需求。尽管可以在methonds方法中轻松实现这一点，但更好的方式是methods方法应该只处理纯粹的数据逻辑，而不处理DOM事件细节。
为了解决这个问题，Vue.js为v-on提供了以下事件修饰符，通过由点(.)表示的指令后缀来调用修饰符。
.stop
.prevent
.capture
.self
.once
示例代码如下：
...
...
注意：使用修饰符时，顺序很重要，相应的代码会以同样的顺序产生。因此，用@click.prevent.self会阻止所有的单击，而@click.self.prevent只会阻止元素上的单击。
3.4、键值修饰符
在监听键盘事件时，我们经常监测常用的键值。Vue.js允许为v-on在检讨呢键盘事件时添加关键修饰符：
记住所有的keyCode比较困难，所以Vue.js为最常用的按键提供了别名：
全部的按键别名如下：
.enter
.tab
.delete
.esc
.space
.up
.down
.left
.right
可以通过全局config.keyCodes对象自定义键值修饰符别名:
//可以使用v-on:keyup.f1
Vue.config.keyCodes.f1 = 112
3.5、修饰键
出现在Vue.js 2.10以上版本
修饰键与正常的按键不同；修饰键和keyup事件一起用时，事件引发时必须按下正常的按键。
.Ctrl
.Alt
.Shift
.meta
使用示例如下：
Do something
3.6、鼠标的3个按键修饰符
出现在Vue.js 2.10以上版本
鼠标的3个按键修饰符如下:
.left
.right
.middle
这些修饰符会限制处理程序监听特定的鼠标按键
四、交互的灵魂-表单
开发者可以用v-model指令在表单控件元素上创建双向数据绑定，该命令会根据控件类型自动选取正确的方法来更新元素。尽管看起来是神奇的，但v-model本质上就是语法糖，负责监听用户的输入事件以更新数据，并极端处理一些特别的例子。
注意:v-model会忽略所有表单元素的value、checked、selected特性的初始值。
4.1、文本输入
表单
Message is：{{ message }}
4.2、多行文本
表单
message is：
{{ message }}
4.3、复选框
复选框用于逻辑值的勾选，单个勾选框代码如下：
表单
Checked names： {{ checkedNames }}
4.4、单选按钮
表单
选择了： {{ picked }}
4.5、选择按钮
出现“请选择”，为了避免iOS不会引发change事件。代码提供disable选项是建议的做法。
表单
Selected： {{ selected }}
五、值的绑定
针对单选按钮、复选框以及选择列表选项，v-model绑定的value通常是静态字符串
有时想绑定value到Vue.js实例的一个动态属性上，这时可以用v-bind进行绑定，并且这个属性的值可以不为字符串。
5.1、复选框值得绑定
逻辑代码如下
//选中时
vm.toggle === vm.a
//没有选中时
vm.toggle === vm.b
5.2、单选按钮值的绑定
单选按钮的值绑定代码如下：
选中时：vm.pick === vm.a
5.3、选择列表的设置和值的绑定
选中时：
typeof vm.selected // ‘object’
vm.selected.nnumber // 123
5.3、完整的表单实例
完整表单
注册表单
六、修饰符
在一些控件中使用修饰符，可对控件或操作做出一定的改变或约束。
6.1、修饰符.lazy的使用
在默认情况下，v-model在input事件中同步输入框的值与数据，但开发者可以添加一个修饰符lazy，从而转变为在change事件中同步:
6.2、修饰符.number的使用
6.3、修饰符.trim的使用
自动过滤用户输入的首尾空格。
实例
修饰符表单
修饰符表单
{{this.input1}}
{{this.input2}}
{{this.input3}}