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>