1.v-text(文本插值)
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<span v-text="vtext"></span>
<span>{{vtext}}</span>
</div>
</body>
</html>
<script>
var vm = new Vue({
el: '#app',
data: {
vtext : 'aaa',
vhtml : '<span>{{vtext}}</span>',
}
})
</script>
可以使用{{}}代替v-text
2.v-html(普通HTML插入)
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<span>{{vtext}}</span>
<div v-html="vhtml"></div>
</div>
</body>
</html>
<script>
var vm = new Vue({
el: '#app',
data: {
vtext : 'aaa',
vhtml : '<span>aaa</span>',
}
})
</script>
3.v-show(顯示或隱藏標(biāo)簽)
有v-show的元素始終會被渲染并保留在DOM中。v-show只是簡單地切換元素的CSS屬性display爪幻。
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1 v-if="awesome">Vue is awesome!</h1>
</div>
</body>
</html>
<script>
var vm = new Vue({
el: '#app',
data: {
vshow : false,
}
})
</script
4.v-if菱皆、v-else、v-else-if(表達(dá)式的值的真假條件渲染元素)
說明：
v-if挨稿、v-else仇轻、v-else-if指令用于條件性地渲染DOM,當(dāng)結(jié)果是假時Dom不會生成, 而v-show只是簡單地切換元素的CSS屬性display。
v-else元素必須緊跟在帶v-if或者v-else-if 的元素的后面奶甘，否則它將不會被識別
<div id="app">
<!-- 單獨(dú)使用v-if -->
<h1 v-if="vif">中國</h1>
<!-- 使用v-if和v-else v-else元素必須緊跟在帶v-if或者v-else-if的元素的后面篷店，否則它將不會被識別。-->
<h1 v-if="vif2">中國</h1>
<h1 v-else>其他</h1>
<!-- 使用v-if臭家、v-else-if和v-else組合使用 -->
<h1 v-if="type == '中國'">中國</h1>
<h1 v-else-if="type == '美國'">美國</h1>
<h1 v-else-if="type == '俄羅斯'">俄羅斯</h1>
<h1 v-else>其他</h1>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
vif : true,
vif2:false,
type:'日本'
}
})
</script>
5.v-for(基于源數(shù)據(jù)多次渲染元素)
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in vfors">
{{ item.message }}
</li>
</ul>
<ul>
<li v-for="(item,index) in vfors">
{{ index + "." +item.message }}
</li>
</ul>
</div>
</body>
</html>
<script>
var vm = new Vue({
el: '#app',
data: {
vfors : [
{ message: 'Foo' , id = 1 },
{ message: 'Bar' , id = 2 }
],
}
})
</script>
可以用of替代in作為分隔符
<ul>
<li v-for="item of vfors">
{{ item.message }}
</li>
</ul>
當(dāng)Vue正在更新使用v-for渲染的元素列表時疲陕，它默認(rèn)使用“就地更新”的策略。如果數(shù)據(jù)項(xiàng)的順序被改變钉赁，Vue將不會移動DOM元素來匹配數(shù)據(jù)項(xiàng)的順序蹄殃，而是就地更新每個元素，并且確保它們在每個索引位置正確渲染你踩。
如果需要重新排序現(xiàn)有元素诅岩，就必須提供一個唯一key屬性
<ul>
<li v-for="item in vfors" v-bind:key="item.id">
{{ item.message }}
</li>
</ul
6.v-on(綁定事件監(jiān)聽器)
v-on既能監(jiān)聽原生DOM事件，也可以監(jiān)聽自定義組件觸發(fā)的自定義事件带膜。
v-on縮寫為@
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- v-on綁定點(diǎn)擊事件 -->
<button v-on:click="click1">v-on綁定點(diǎn)擊事件</button>
<!-- v-on縮寫 -->
<button @click="click1">v-on縮寫</button>
<!-- 傳參 -->
<button @click="click2('bbbbb')">傳參bbbbb</button>
</div>
</body>
</html>
<script>
var vm = new Vue({
el: '#app',
methods:{
click1:function(){
alert("aaaaa");
},
click2:function(value){
alert(value);
}
}
})
</script>
7.v-bind(動態(tài)地綁定特性)
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- v-bind綁定href -->
<a v-bind:href="url" target="_blank">{{url}}</a><br/>
<!-- v-bind縮寫： -->
<a :href="url" target="_blank">v-bind縮寫：</a><br/>
<!-- 綁定內(nèi)聯(lián)樣式style -->
<span :style="styleobj">綁定內(nèi)聯(lián)樣式style：</span><br/>
<!-- 綁定class -->
<span :class=" { classObj : isclassObj }">綁定class：</span><br/>
</div>
</body>
</html>
<style >
.classObj {
color: red;
font-size: 50px;
}
</style>
<script>
var vm = new Vue({
el: '#app',
data:{
url : "http://www.baidu.com",
styleobj:{
color:'red',
},
isclassObj:true,
}
})
</script>
8.v-model(數(shù)據(jù)雙向綁定)
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input v-model="message" placeholder="edit me">
<p>message is: {{ message }}</p><br/>
<input type="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label><br/>
<select v-model="selected">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span><br/>
</div>
</body>
</html>
<script>
var vm = new Vue({
el: '#app',
data:{
message : "aaaaaa", //初始值
checked:true,
selected:'C',
}
})
</script>
9.v-slot
10.v-pre
11.v-cloak
12.v-once
只渲染元素和組件一次吩谦。隨后的不在重新渲染。
<span v-once>This will never change: {{msg}}</span>
