Vue.js使用了基于HTML的模版语法,允许开发者声明式地将DOM绑定至底层Vue实例的数据。所有Vue.js的模板都是合法的HTML,所以能被遵循规范的浏览器和HTML解析器解析。
在底层的实现上,Vue将模板编译成虚拟DOM渲染函数。结合响应系统,在应用状态改变时,Vue能够智能地计算出重新渲染组件的最小代价并应用到DOM操作上。
1.文本插值
数据绑定最常见的形式就是使用“Mustache”语法(双大括号)的文本插值:
Message: {{ msg }}
Mustache标签将会被替代为对应数据对象上msg属性的值。无论何时,绑定的数据对象上msg属性发生了改变,插值处的内容都会更新。
通过使用v-once指令,你也能执行一次性地插值,当数据改变时,插值处的内容不会更新。但请留心这会影响到该节点上所有的数据绑定:
This will never change: {{ msg }}
这里我们通过一个例子,来看一下文本插值,我们在html文件中引入vuejs库,可以子啊官方网站下载该库。
运行之后页面显示的是Hello vue.js