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 - 输入首尾空格过滤

vue