Vue入门指南（2）

数据绑定

1.插入值

文本
数据绑定最基础的形式是文本插值，使用 “Mustache” 语法（双花括号）：

Message : {{ msg }}

TIM图片20180124154637.png

Mustache 标签会被相应数据对象的 msg属性的值替换。每当这个属性变化时它也会更新。
当然，我们也可以只处理单次插值，今后的数据变化就不会再引起插值更新了：

This will never change: {{* msg }}

原始的HTML
双 Mustache 标签将数据解析为纯文本而不是 HTML。为了输出真的 HTML 字符串，需要用三 Mustache 标签：

This is raw HTML : {{{ raw_html }}}

TIM图片20180124155251.png

内容以 HTML 字符串插入——数据绑定将被忽略。如果需要复用模板片断，应当使用 partials。
HTML特性
Mustache 标签也可以用在 HTML 特性 (Attributes) 内：

我的id是：item-{{ id }}

TIM图片20180124155613.png

在 Vue.js 指令和特殊特性内不能用插值。不必担心，如果 Mustache 标签用错了地方 Vue.js 会给出警告。

2. 绑定表达式

JS表达式
Vue.js 在数据绑定内支持全功能的 JavaScript 表达式：

{{ 5 + 5 }}
{{ number + 1 }}
{{ ok ? "Yes" : "No" }}
{{ str.split("").reverse().join("") }}

TIM图片20180124161227.png

过滤器
过滤器是一个通过输入数据，能够及时对数据进行处理并返回一个结果的简单函数。Vue.js 允许在表达式后添加可选的过滤器 (Filter) 。过滤器通常会使用管道标志 “ | ”，注意，管道语法不是 JavaScript 语法，因此不能在表达式内使用过滤器，只能添加到表达式的后面。

{{ message | capitalize }}

TIM图片20180124161635.png

在上述的例子中，我们在插值时用了Vue的capitalize过滤器，capitalize过滤器可以将输入的字符串首字母转换成大写字母。
过滤器还可以串联：

{{ message | filterA | filterB }}

过滤器也可以接受参数：

{{ message | filterA 'arg1' arg2 }}

3. 指令

指令 (Directives) 是特殊的带有前缀 v- 的特性

  
Hello!我是惠皎

TIM图片20180124175448.png

当然，如果我们把display的值改为false，那浏览器就什么都没有。
有些指令可以在其名称后面带一个“参数”，中间放一个冒号隔开。

  
{{ innerText }}

TIM图片20180124184103.png

4. 缩写