基礎模板語法
===
### 先來看一個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:事件名稱=""` 簡寫 `@事件名稱=""`
