1、Mustache語(yǔ)法

<div id="app">{{ name }}</div>
<script>
  let app = new Vue({
    el: '#app',
    data: {
      name: '前端學(xué)習(xí)'
    }
  })

頁(yè)面上就會(huì)顯示——前端學(xué)習(xí)。

2、綁定純html

name: '<strong>前端學(xué)習(xí)</strong>'

文本“前端學(xué)習(xí)”被一個(gè)<strong>標(biāo)簽包住，而我們?cè)谡故镜氖?，需要合理地渲染strong標(biāo)簽，再顯示我們想要展示文本內(nèi)容。這種情況，用原來(lái)的雙大括號(hào){{}}方式，就不能滿(mǎn)足了，他會(huì)渲染成：

<strong>前端學(xué)習(xí)</strong>

這時(shí)候可以用vue提供的v-html指令：

<div id="app" v-html="name"></div>
<script>
  let app = new Vue({
    el: '#app',
    data: {
      name: '<strong>前端學(xué)習(xí)</strong>‘
    }
  })
</script>

效果圖.png

3、綁定屬性

<div id="app">
  <!-- 在href前用v-bind：修飾 -->
  <a v-bind:href="link">百度</a>
</div>

<script>
let app = new Vue({
  el: '#app',
  data: {
    link: 'http://www.baidu.com'
  }
})
</script>

在視圖中的 a 標(biāo)簽，我們?cè)?<a> 標(biāo)簽加上 v-bind: 來(lái)修飾 href 屬性，而它的值就是 data 中的屬性 link。我們來(lái)看看解析渲染的 html 頁(yè)面效果。

效果圖.png

標(biāo)簽 <a> 的屬性 href 的值成功地綁定了 data 數(shù)據(jù) link 的值，通過(guò) v-bind 指令，就成功地將數(shù)據(jù)綁定在視圖的標(biāo)簽的屬性中了。
另外 v-bind 有簡(jiǎn)寫(xiě)方式，就僅僅是冒號(hào) :。

<a v-bind:href="link">百度</a>
<a :href="link">百度</a>

4、支持JavaScript表達(dá)式

• 加減乘除運(yùn)算：

<div id="app">{{ num+3 }}</div>
<script>
 let app = new Vue({
    el:"#app",
    data:{
        num:2
    }
 });
</script>

效果圖.png

• 三元運(yùn)算符：

<div id="app">{{ ok ? 'yes':'no' }}</div>
<script>
 let app = new Vue({
    el:"#app",
    data:{
        ok:true
    }
 });
</script>

效果圖.png

• 字符串拼接

<div id="app">
  <a :href="'http://'+host">百度</a>
</div>
<script>
 let app = new Vue({
    el:"#app",
    data:{
        host:'www.baidu.com'
    }
 });
</script>

效果圖.png

注意：

雖然vue支持javascript表達(dá)式運(yùn)算，我們只會(huì)在運(yùn)算比較簡(jiǎn)單的情況下才會(huì)這么玩，當(dāng)運(yùn)算比較繁瑣復(fù)雜的時(shí)候，一定要用vue的computed屬性來(lái)進(jìn)行計(jì)算。

小結(jié)