vue.js 使用了基于html 的模板语法,允许开发者声明式的将DOM绑定至底层vue实例的data数据。所有vue.js 的模板都是合法的 html, 所有能被遵循规范的浏览器和HTML解析器解析。 在底层实现上,Vue将模板编译成虚拟DOM渲染函数,结合响应式系统,vue能智能的计算出最少需要渲染多少组件,并把DOM操作次数减少到最少。
模板语法:
插值插入html绑定html标签属性插入js表达式 插值 <span> message: {{ msg }}} </span> //左右双大括号语法 <span v-once> message: {{ msg }}} </span> // 变量只变化一次 插入html <span v-html> Using mustaches:: {{ rawHtml}}} </span> //将显示原始html data{ rawHtml : '<span style="color:red">this is should be red</span>', } 绑定html标签的属性 绑定html标签的属性,如 class ,style, id , href , name等属性 <a v-bind:href="baidu"> 百度 </a> data:{ baidu: 'http://www.baidu.com' } 插入JavaScript表达式模板语法完全支持JavaScript表达式支持
{{ num + 1}} {{num == 1 ? 11 : 0 }} {{ msg.split('').reverse().join('') }} //逆序输出 euv data{ num:1, msg: 'vue' }