Vue入门和基础（三）
vue中常用的指令详解：
1.v-text：
<span v-text="message"></span>
<span>{{msg}}</span>
上述两者等价。
2.v-html：
<div v-html="htmlText"></div>
因为插值表达式会将数据解释为纯文本，要输出html可以使用v-html
3.v-pre：
<div id="app">
<span v-pre>{{message}}</span> //这条语句不进行编译
</div>
v-pre主要用来跳过这个元素和它的子元素编译过程。最终div里什么都不显示；
4.v-cloak：
<div id="app" v-cloak>
<div>
{{message}}
</div>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
message:'app'
}
})
</script>
在页面加载时，页面会闪烁先会显示
<div>
{{message}}
</div>
然后会显示
<div>
app
</div>
5.v-once：
v-once关联的实例，渲染一次后将会被视为静态内容
6.v-if
7.v-else if
8.v-else
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-if</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1 v-if="num === 1"> 1</h1>
<h1 v-else if="num === 2">2</h1>
<h1 v-else="num === 3">3</h1>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
num:1,
},
})
</script>
</html>
改变num的值，div中的内容就会根据条件渲染；
9.v-show
也是根据条件展示元素，和v-if不同的是，如果判断值为false，v-if直接将dom节点销毁，而使用v-show元素会被保留在dom中；
10.v-for
根据遍历数组来进行渲染
<div v-for="(item,index) in items"></div> //其中index为索引是可选项
<div v-for="item of items"></div>
11.v-bind:
用来动态的绑定一个或者多个特性，也可以绑定一个含有键值对的对象
简写方法（:）
扫描二维码关注公众号，回复：
4214102 查看本文章
<div id="app2">
<div :class="[{style1:showStyle1,style2:!showStyle1},useStyle]"></div>
<br>
<div :class="style"></div>
</div>
var app2 = new Vue({
el:"#app2",
data:{
/*在data内部如果想给某一个变量进行赋值，是不能使用this关键字的*/
showStyle1:true,
useStyle:"style3",
style:{
style1:"",
style2:"",
style3:true,
}
},
mounted:function () {
this.style.style1 = this.showStyle1;
this.style.style2 = !this.showStyle1;
}
})
12:v-model:
双向绑定：v-model会忽略所有表单元素的value、checked、selected特性的初始值。因为它选择Vue实例数据做为具体的值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-if</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{num}}</p>
<input type="text" v-model="num">
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
num:1,
},
})
</script>
</html>
v-model的修饰符：
.lazy：转变为change事件同步
.number：转化为数值类型
.trim：默认去掉收尾空格
13.v-on：
v-on用来监听事件：简写为@
使用方法如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-on的使用方法</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{num}}</p>
<button @click="add()">Add</button>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
num:1,
},
methods:{
add:function () {
this.num++;
}
},
})
</script>
</html>
事件修饰符：
.stop 阻止事件继续传播
.prevent 事件不再重载页面
.capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理
.self 只当在 event.target 是当前元素自身时触发处理函数
.once 事件将只会触发一次