模板语法（DOM与Vue数据绑定）

Vue.js使用了基于HTML的模板语法，允许开发者声明式的将DOM绑定至底层Vue实例的数据。

插值

1. 文本：{{ }}
   数据绑定最常见的形式就是使用Mustache语法（双大括号）的文本插值，解释为普通文本：

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

Mustache标签将会被替代为msg属性的值，无论何时，绑定的数据对象msg属性发生了变化，插值处的内容都会更新（使用v-once指令，可以执行一次性的插值，当msg的内容发生改变时插值处的内容不会发生改变，如下：）。

//这个在msg的值发生变化时将不会改变
<span v-once>Message:{{ msg }}span>

2. 原始HTML：v-html
   双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出 HTML，需要使用v-html指令：

<div v-html="rawHtml">div>

这个 div 的内容将会被替换成为属性值 rawHtml，直接作为 HTML——会忽略解析属性值中的数据绑定。

3. 特性：v-bind
   Mustache 语法不能作用在HTML特性（即属性）上，应该使用v-bind指令：

   <div v-bind:id="dynamicId">div>
   <a v-bind:href="url">a>
   ![](imageSrc)
   
   new Vue({
     el:'.box',
     data:{
       url:'http:...'
     }
   })

4. 使用javaScript表达式
   Vue.js不仅可以绑定简单的属性键值，而且对于所有的数据绑定，都提供了完全的javaScript表达式支持，如下：

   {{ number+1 }}
   {{ ok ? 'Yes' : 'No' }}
   {{ message.split('')reverse().join('') }}
   <div v-bind:id=" 'list-'+id ">div>

　　但每个绑定都只能包含单个表达式，下面的不会生效：

{{ var a=1 }}  //这是语句，不是表达式
//控制流也不会生效，可使用三元表达式
{{ if(ok) {return message }  }}

转载于:https://www.cnblogs.com/lmjZone/p/7739377.html