**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> ```