1.v-text(文本插值)
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<span v-html ="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(显示或隐藏标签)
有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(表达式的值的真假条件渲染元素)
说明：
v-if、v-else、v-else-if指令用于条件性地渲染DOM,当结果是假时Dom不会生成, 而v-show只是简单地切换元素的CSS属性display。
v-else元素必须紧跟在带v-if或者v-else-if 的元素的后面，否则它将不会被识别。
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 单独使用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>
</body>
</html>
<script>
var vm = new Vue({
el: '#app',
data: {
vif : true,
vif2:false,
type:'日本'
}
})
</script>5.v-for(基于源数据多次渲染元素)
<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>当Vue正在更新使用v-for渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue将不会移动DOM元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。
如果需要重新排序现有元素，就必须提供一个唯一key属性
<ul>
<li v-for="item in vfors" v-bind:key="item.id">
{{ item.message }}
</li>
</ul>6.v-on(绑定事件监听器)
v-on既能监听原生DOM事件，也可以监听自定义组件触发的自定义事件。
v-on缩写为@
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- v-on绑定点击事件 -->
<button v-on:click="click1">v-on绑定点击事件</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(动态地绑定特性)
<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/>
<!-- 绑定内联样式style -->
<span :style="styleobj">绑定内联样式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(数据双向绑定)
<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>
