您的位置:首页 > 产品设计 > UI/UE

Vuejs学习系列(十五)--模板语法(一)

2017-03-14 18:08 239 查看


Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解析器解析。

在底层的实现上, Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

1.文本插值

数据绑定最常见的形式就是使用 “Mustache” 语法(双大括号)的文本插值:

<span>Message: {{ msg }}</span>

Mustache 标签将会被替代为对应数据对象上 msg 属性的值。无论何时,绑定的数据对象上 msg 属性发生了改变,插值处的内容都会更新。

通过使用 v-once 指令,你也能执行一次性地插值,当数据改变时,插值处的内容不会更新。但请留心这会影响到该节点上所有的数据绑定

<span v-once>This will never change: {{ msg }}</span>

这里我们通过一个例子,来看一下文本插值,我们在html文件中引入vuejs库,可以子啊官方网站下载该库。



运行之后页面显示的是 Hello vue.js

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  vuejs 插值 数据绑定