之前的兩篇對vue做了整體和基礎的介紹，今天主要講解一下vue的基礎語法之一——html模板。vue.js 使用了基於 html 的模板語法，允許開發者宣告式地將 dom 繫結至底層 vue 例項的資料，將模板編譯成虛擬 dom 渲染函式。結合響應系統，智慧型地計算出最少需要重新渲染多少元件，並把 dom 操作次數減到最少。
1. 顯示文字
資料繫結最常見的就是使用雙大括號的方式（「mustache」語法）,將括號裡面的值解釋為純文字顯示在頁面上，形式如下：
message: }
message: 看到我啦！
資料htmldata作為插值，插在html當中，作為資料展示。當htmldata的值進行變化時，插值處的值就會動態的做出改變。
當然啦，要是想僅僅執行一次插值，可以使用v-once指令。即當資料改變時，插值處的內容不會更新。但請留心這會影響到該節點上的其它資料繫結：
這個將不會改變: }
有的時候我們並不僅僅展示文字內容，可能我們還想展示原生html。這個時候就不能使用雙大括號的形式，而需要使用v-html指令。code如下：
展示文字： }
展示html：
展示文字：hello world
展示html：hello world
注意 : 請只對可信內容使用 html 插值，絕不要對使用者提供的內容使用插值，以防止導致 xss 攻擊
3. 屬性
對於標籤上的一些動態屬性可以使用指令v-bind進行繫結，code如下：
v-bind指令也可以簡化為：，code如下：
之前說的都是普通文字的繫結顯示，但有時候也會遇到一些資料依據實際情況作出計算。vue.js提供了完全的js表示式支援。舉個栗子：
# 簡單的加減乘除注意：支援 js 表示式，不是 js 的語句哦~~~關注「前端怪咖」，加入我們，一起提公升前端技能}# 三目運算
}# 陣列操作
}# 屬性值的拼接
Vue筆記之模板語法
比較常用的就是插值，插值就是 用兩個大括號包起來的乙個變數，顯示的時候會將雙大括號標籤替換為這個變數的值。基本的用法就是 當繫結的message變數的值發生了變化時，此處也會發生相應的變化。使用v once的話可以使得資料繫結只發生一次，在渲染頁面的時候會使用這個變數的值來替換掉雙括號標籤，再之後即...
Vue基礎 三 模板語法 二
vue是通過指令v on來繫結事件的，例如最常用的點選方法 v on click。我們也可以縮寫為 click 來個簡單的案例 點選點選1 點選2點選3 執行的效果 可以看到，四種寫法都可以實現點選事件的繫結，並且this指向的是vue的例項物件。前面兩個方案能將num值改變，但是我們不推薦這麼寫，...
VUE 模板語法
message span 雙大括號裡面的內容會被替換成msg的變數值，在msg變數值改變的時候會自動更新html裡的內容 只輸出純文字文字，不會有html效果，為了輸出html需要用到v html指令 using mustaches p using v html directive v html r...