基础模板语法 === ### 先来看一个demo ~~~ <div id="app"> {{msg}} // 数据绑定 <br> {{(count + 1)}} <br> <div v-html="temp"> //输出原始代码 </div> <a v-bind:href="url">百度</a> // v-bind 绑定属性 <button type="button" v-on:click="submit()">submit</button> // 绑定事件 v-bind 简写 :属性="" v-on 简写 @事件="" </div> <script> new Vue({ // 创建实例 el:"#app", // 绑定 data:{ // 数据 msg:"Hello World", count:0, temp:"<h1>hello<h1>", url:"http://www.baidu.com" }, methods:{ // 定义事件 submit:function () { this.count ++ // 操作data里面的count alert("submit") } } }) </script> ~~~ ### 小结 - 插值语法: {{dataName}} - {{}} 这里可以写js - 属性绑定 `v-bind:属性名称=""` 简写 `:属性名称=""` - 事件绑定 `v-on:事件名称=""` 简写 `@事件名称=""`