**1.3.1.** **效果** *(02\_*模板語法*/test.html)*  **1.3.2.** **模板的理解** 1) 動態的 html 頁面 2) 包含了一些 JS 語法代碼 a. 雙大括號表達式 b. 指令(以 v-開頭的自定義標簽屬性) **1.3.3.** **雙大括號表達式** 1) 語法:` {{exp}}` 2) 功能: 向頁面輸出數據 3) 可以調用對象的方法 **1.3.4.** **指令一****:** **強制數據綁定** 1) 功能: 指定變化的屬性值 2) 完整寫法: `v-bind:xxx='yyy' //yyy `會作為表達式解析執行 3) 簡潔寫法: `:xxx='yyy'` **1.3.5.** **指令二****:** **綁定事件監聽** 1) 功能: 綁定指定事件名的回調函數 2) 完整寫法:` v-on:keyup='xxx' v-on:keyup='xxx(參數)' v-on:keyup.enter='xxx'` 3) 簡潔寫法: `@keyup='xxx' @keyup.enter='xxx'` **1.3.6.** **編碼** ``` <div id="app"> <h2>1. 雙大括號表達式</h2> <p>{{content}}</p> <p>{{content.toUpperCase()}}</p> <h2>2. 指令一: 強制數據綁定</h2> <a href="url">訪問指定站點</a><br> <a v-bind:href="url">訪問指定站點2</a><br> <a :href="url">訪問指定站點2</a><br> <h2>3. 指令二: 綁定事件監聽</h2> <button v-on:click="test">點我</button> <button @click="test">點我</button> </div> <script type="text/javascript" src="../js/vue.js"></script> <script type="text/javascript"> new Vue({ el: '#app', data: { content: 'NBA I Love This Game', url: 'http://www.atguigu.com' }, methods: { test () { alert('好啊!!!') } } }) </script> ```