1.語法概要
1.1{{文本}}
1.2 v-html 以html方式表示內容
1.3 v-bind 用於屬性的綁定,相當於給原有的html屬性賦值。
1.4 v-model 用於數據和控件的雙向綁定。
2.常用語法
2.1文本
<div id="app">
<p>{{ message }}</p>
</div>
2.2v-Html
<div id="app">
<div v-html="message"></div>
</div>
2.3v-bind
<div id="app">
<label for="r1">修改顏色</label><input type="checkbox" v-model="use" id="r1">
<br><br>
<div v-bind:class="{'class1': use}">
v-bind:class 指令
</div>
</div>
<script>
new Vue({
el: '#app',
data:{
use: false
}
});
</script>
2.4 v-model
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Runoob!'
}
})
</script>
3.縮寫
3.1v-bind 縮寫
<!-- 完整語法 -->
<a v-bind:href="url"></a>
<!-- 縮寫 -->
<a :href="url"></a>
3.2v-on 縮寫
<!-- 完整語法 -->
<a v-on:click="doSomething"></a>
<!-- 縮寫 -->
<a @click="doSomething"></a>