Vue In Action 实战Vue–html渲染和绑定数据(五)

13 2月

html 数据渲染

比如在你的某个 component 页面 js 中, 有定义如下数据

在数据中有一个名字叫 Tom的, 年龄22岁, html 模板中就可以这样来渲染数据

在{{ }}中包含的内容, 将被替换为真实的数据, 如果内容中包含了不安全的 html 内容片段, 并且你不想执行这些内容片段, 那么就用三个大括号包裹即可{{{ }}}, 这样就不会渲染里面的 html 文本内容.

vue会自动 watch 这个数据并实时更改数据, 也就是说如果 js 中数据变动, 那么页面的数据也会相应发生改变. 如果只想一次性渲染, 之后不再变化, 需要在变量前面加”*”号:

此外,{{ }}中的内容可以是 js 表达式或者添加过滤器的, 它会执行后输出, 比如

过滤器, 我们以后会进一步讲解.

如果你不想使用大括号也是可以的, vue 支持我们自己定义表达式符号, 比如

那么就用中括号表达数据即可

内部指令

v-if/v-else/v-show

js内容:

模板文件渲染内容:

v-repeat/v-for

js 内容:

模板文件渲染内容:

v-text/v-html

这其实就是{{ }}和{{{ }}}的指令写法

v-model

用来告诉 vue, 这个数据是和某个 js 中的 model 对象绑定的, 最常见的就是表单了, 比如 js 中定义了一个 user 对象, 我们需要告诉 vue 字段的一一对应.

这样用户输入完成后, user 对象就能及时被赋值了.

v-bind/v-on

v-bind 用来绑定元素的 attribute 属性

当然用{{ }}包裹也是可以的:

绑定多个属性:

在 key 这一列不加引号代表自带属性, 加上引号代表自定义属性. value 这一列不加引号代表是 js 里面的变量, 加上引号代表纯文本.

v-on 用来绑定事件, 如点击事件等

v-cloak

这是一个特殊指令, 如果你想当整个 div 元素都处于隐藏状态, 直到编译完成.就可以用这个指令. 这样可以防止有时候{{ }}的符号被用户看到

 

上一篇:从 Index 开始

下一篇:

发表评论

电子邮件地址不会被公开。