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 }}}



Vue入门指南(2)_第1张图片
TIM图片20180124155251.png

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

我的id是:item-{{ id }}
Vue入门指南(2)_第2张图片
TIM图片20180124155613.png

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

2. 绑定表达式

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

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

Vue入门指南(2)_第3张图片
TIM图片20180124161227.png

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

{{ message | capitalize }}
Vue入门指南(2)_第4张图片
TIM图片20180124161635.png

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

{{ message | filterA | filterB }}

过滤器也可以接受参数:

{{ message | filterA 'arg1' arg2 }}

3. 指令

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



Hello!我是惠皎
Vue入门指南(2)_第5张图片
TIM图片20180124175448.png

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



{{ innerText }}
Vue入门指南(2)_第6张图片
TIM图片20180124184103.png

4. 缩写










你可能感兴趣的:(Vue入门指南(2))