Vue.js学习笔记之常用模板语法详解

本文介绍了Vue.js 常用模板语法，分享给大家，具体如下：

一、文本渲染

Vue支持动态渲染文本，即在修改属性的同时，实时渲染文本内容。同时为了提高渲染效率，也支持只渲染一次，即第一次渲染出文本后，文本内容不再跟随属性值的变化而变化。

实时渲染

 <div class="row">
  <h2>文本 - 实时渲染</h2>
  <input type="text" v-model="msg" class="col-md-2" />
  <span class="col-md-">{{ msg }}</span>
 </div>

 v-model 指令将 input 标签的值动态绑定到属性 msg 上，通过 {{ msg }} 表达式显示在页面上。当修改文本框内容时，后面的页面内容将实时变化并与文本框内容保持一致。

一次渲染

 <div class="row">
  <h2>文本 - 一次渲染</h2>
  <input type="text" v-model="msg_once" class="col-md-2" />
  <span class="col-md-" v-once>{{ msg_once }}</span>
 </div>

在 vm 对象里添加属性

 require(["jquery", "bootstrap", "vue"], function ($, bootstrap, Vue) {
   var vm = new Vue({
     el: "#app",
     data: {
       msg_once: "once..."
     }
   });
 });

页面第一次加载完成时，页面显示once…，当 span 标签加上 v-once 指令后，无论如何修改文本框内容，页面内容都不会变化。

HTML代码渲染

某些情况下，页面需要动态的插入一段HTML代码

在 vm 对象里添加属性，属性值为一段HTML代码

 require(["jquery", "bootstrap", "vue"], function ($, bootstrap, Vue) {
   var vm = new Vue({
     el: "#app",
     data: {
       html: "<span>This is a html tag.</span>"
     }
   });
 });

页面元素添加

 v-html 

指令后，元素对应位置将显示出属性值内的对应元素

 <div class="row">
  <h2>文本 - HTML</h2>
  <div v-html="html"></div>
 </div>

二、表达式

上文中已经介绍过的

 {{ msg }} 

就是一个简单的表达式。除此之外，还有一些常用的表达式写法。

运算表达式

在上述简单表达式中可以使用运算符，Vue会将运算后的结果渲染在页面上