一,模板語法
Vue 使用一種基于 HTML 的模板語法,使我們能夠聲明式地將其組件實例的數據綁定到呈現的 DOM 上。所有的Vue模板都是語法層面合法的 HTML,可以被符合規范的瀏覽器和 HTML 解析器解析。
Vue模板語法有2大類:
- 插值語法:
功能:用于解析標簽體內容。
寫法:{{xxx}},xxx是js表達式,且可以直接讀取到data中的所有屬性。
- 指令語法:
功能:用于解析標簽(包括:標簽屬性、標簽體內容、綁定事件…)
舉例: v-bind:href=“xxx” 或簡寫為 :href=“xxx” ,xxx同樣要寫js表達式,且可以直接讀取到data中的所有屬性。
備注:Vue中有很多的指令,且形式都是:v-???,v-bind只是一個例子.
二,實戰
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>模板語法</title><script src="../js/vue.js"></script></head><body><div id="root"><h3>您好,{{name}}</h3><br /><h1>指令語法</h1><a v-bind:href="school.url.toLocaleUpperCase()">學習1</a><a :href="school.url">學習2</a></div></body><script type="text/javascript">Vue.config.productionTip= false;new Vue({el: '#root',data: {name: 'jack',school:{name:'百度',url:'www.baidu.com'}}})</script></html>