vue

vue基础语法

标签（空格分隔）： vue

---

插值

---

文本
指令v-text和{{}}效果几乎相同。

Message: {{ msg }}

双大括号（{{}}）会将数据解释为纯文本。

纯HTML
指令v-html

输出为HTML需要使用v-html指令。

绑定属性
指令v-bind: 可以简写为:

常被用于绑定class或style

使用JavaScript表达式
vue.js模块种支持表达式，但每个绑定只能包含单个表达式。

指令

---

指令是带有v-前缀的特殊属性。

一些指令可以接受一个参数，在指令后以冒号指明。如：v-bind: 、 v-on:

修饰符：英文句号（.）指明的特殊后缀，用于指出一个指令应该以特殊方式绑定

过滤器

---

过滤器用在两个地方：mustache 插值和 v-bind 表达式。
过滤器添加在表达式尾部，由管道符（|）表示.
过滤器可以串联，过滤器是JavaScript函数，可以有参数。

{{ message | capitalize }}

一般用来在html中插入特定内容。

计算属性

---

计算属性关键词：computed
一般用来添加函数方法。
有两种方式：computed和 methods。
computed和 methods的最终结果是形同的。
不同的是：computed基于他们的依赖进行缓存，也就是只有他的相关依赖发生改变是才会重新求值。
methods：只要发生重新渲染，method调用总会执行该函数。
计算setter

观察Watchers

条件渲染

• v-if
  根据表达式的值的真假条件渲染元素
• v-else
  前一个兄弟元素必须有v-if或者v-else-if

  A


  B


  C


  Not A/B/C

• v-show
  使用css属性display渲染元素。

列表渲染

---

• v-for

基于源数据多次渲染元素。必须是同特定语法item in items，给当前元素提供别名。

  {{ item.text }}

v-for默认就地替换，若要重新改变元素位置，需要提供key。

事件处理

---

• v-on
  可以在v-on:后面定义方法名，在vue实例的methods对象中定义方法。
• 事件修饰符

.stop //阻止事件冒泡
.prevent //提交事件不在重载页面
.capture//添加事件侦听器时使用事件捕获模式
.self//只有该元素本身（而不是子元素）触发时调用。
.once//事件只会触发一次

修饰符可以串联

表单控件绑定

---

v-mode 指令在表单控件元素上创建双向数据绑定。
将用户输入表单的内容引出
有三个控件

.lazy - 取代 input 监听 change 事件
.number - 输入字符串转为数字
.trim - 输入首尾空格过滤