vue基础语法
标签（空格分隔）： vue
插值
文本
指令v-text和{{}}效果几乎相同。
<span>Message: {{ msg }}</span>
双大括号（{{}}）会将数据解释为纯文本。
纯HTML
指令v-html
<div v-html="rawHtml"></div>
输出为HTML需要使用v-html指令。
绑定属性
指令v-bind: 可以简写为:
<div v-bind:id="dynamicId"></div>
常被用于绑定class或style
使用JavaScript表达式
vue.js模块种支持表达式，但每个绑定只能包含单个表达式。
指令
指令是带有v-前缀的特殊属性。
一些指令可以接受一个参数，在指令后以冒号指明。如：v-bind: 、 v-on:
修饰符：英文句号（.）指明的特殊后缀，用于指出一个指令应该以特殊方式绑定
过滤器
过滤器用在两个地方：mustache 插值和 v-bind 表达式。
过滤器添加在表达式尾部，由管道符（|）表示.
过滤器可以串联，过滤器是JavaScript函数，可以有参数。
<!-- in mustaches -->
{{ message | capitalize }}
<!-- in v-bind -->
<div v-bind:id="rawId | formatId"></div>
一般用来在html中插入特定内容。
计算属性
计算属性关键词：computed
一般用来添加函数方法。
有两种方式：computed和 methods。
computed和 methods的最终结果是形同的。
不同的是：computed基于他们的依赖进行缓存，也就是只有他的相关依赖发生改变是才会重新求值。
methods：只要发生重新渲染，method调用总会执行该函数。
计算setter
观察Watchers
条件渲染
- v-if
根据表达式的值的真假条件渲染元素 - v-else
前一个兄弟元素必须有v-if或者v-else-if
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
- v-show
使用css属性display渲染元素。
列表渲染
- v-for
基于源数据多次渲染元素。必须是同特定语法item in items，给当前元素提供别名。
<div v-for="item in items">
{{ item.text }}
</div>
v-for默认就地替换，若要重新改变元素位置，需要提供key。
事件处理
- v-on
可以在v-on:后面定义方法名，在vue实例的methods对象中定义方法。 - 事件修饰符
.stop //阻止事件冒泡
.prevent //提交事件不在重载页面
.capture//添加事件侦听器时使用事件捕获模式
.self//只有该元素本身（而不是子元素）触发时调用。
.once//事件只会触发一次
修饰符可以串联
表单控件绑定
v-mode 指令在表单控件元素上创建双向数据绑定。
将用户输入表单的内容引出
有三个控件
.lazy - 取代 input 监听 change 事件
.number - 输入字符串转为数字
.trim - 输入首尾空格过滤
