vue基础知识精讲
2020-11-25 本文已影响0人
i高安
一、Vue实例生命周期函数
生命周期函数是vue实例在某一个时间点会自动执行的函数。
image
测试一下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue实例生命周期函数</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app"></div>
<script>
//生命周期函数是vue实例在某一个时间点会自动执行的函数
var vm = new Vue({
el:"#app",
template:"<div>{{test}}</div>",
data:{
test: "Hello World!"
},
beforeCreate: function(){
console.log("beforeCreate");
},
created: function(){
console.log("created");
},
beforeMount:function(){
console.log(this.$el);
console.log("beforeMount");
},
mounted:function(){
console.log(this.$el);
console.log("mounted");
},
//组件销毁时，函数执行
beforeDestroy:function(){
console.log("beforeDestroy");
},
//组件销毁完成之后，函数执行
destroyed:function(){
console.log("destroyed");
},
//数据开始改变，还没渲染之前，函数执行
beforeUpdate:function(){
console.log("beforeUpdate");
},
//数据渲染之后，函数执行
updated:function(){
console.log("updated");
}
})
</script>
</body>
</html>
二、Vue的模板语法
2.1 差值表达式
{{}} 两个花括号
举个栗子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>模板语法</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">{{test}}</div>
<script>
var app = new Vue({
el:"#app",
data:{
test:"你好啊！"
}
})
</script>
</body>
</html>
这里的{{test}}就是差值表达式。
2.2 v-text
类似差值表达式，将vue传来的数据替换已有的数据。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>模板语法</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<div v-text="test"></div>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
test:"你好啊！"
}
})
</script>
</body>
</html>
和差值表达式效果一样。
2.3 v-html
转义输出vue传来的数据。
举个栗子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>模板语法</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<div>{{test}}</div>
<div v-text="test"></div>
<div v-html="test"></div>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
test:"<h1>你好啊！</h1>"
}
})
</script>
</body>
</html>
看一下效果：
image.png
2.4 小结
差值表达式、v-text、v-html三种方式不仅仅可以接受变量，还可以写js语法。
eg：
<div>{{test + '世界'}}</div>
<div v-text="test + '世界'"></div>
<div v-html="test + '世界'"></div>
三、计算属性,方法与侦听器
3.1 计算属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计算属性、方法、侦听器</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
{{fullName}}
{{age}}
</div>
<script>
var app = new Vue({
el:"#app",
data:{
firstName:"小",
lastName:"默",
age:"23"
},
//计算属性
computed:{
fullName:function(){
console.log("计算了一次");
return this.firstName + " " + this.lastName
}
}
})
</script>
</body>
</html>
计算属性具有缓存性，在此例中，若firstName和lastName的值没有发生改变，则fullName只计算一次。若发生改变则会再次计算。可在控制台依次调试验证。
3.2 方法
<div id="app">
{{fullName()}}
{{age}}
</div>
<script>
var app = new Vue({
el:"#app",
data:{
firstName:"小",
lastName:"默",
age:"23"
},
//使用方法
methods:{
fullName: function() {
console.log("计算了一次");
return this.firstName + " " + this.lastName;
}
}
//计算属性
// computed:{
// fullName:function(){
// console.log("计算了一次");
// return this.firstName + " " + this.lastName
// }
// }
})
</script>
使用方法时，效率没有计算属性高，因为无论值有没有改变，都会再次调用fullName方法，再次计算。
3.3 侦听器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计算属性、方法、侦听器</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
{{fullName}}
{{age}}
</div>
<script>
var app = new Vue({
el:"#app",
data:{
firstName:"小",
lastName:"默",
fullName:"小 默",
age:"23"
},
//侦听
watch:{
firstName:function() {
console.log("计算了一次");
this.fullName = this.firstName + " " + this.lastName;
},
lastName:function() {
console.log("计算了一次");
this.fullName = this.firstName + " " + this.lastName;
}
}
//使用方法
// methods:{
// fullName: function() {
// console.log("计算了一次");
// return this.firstName + " " + this.lastName;
// }
// }
//计算属性
// computed:{
// fullName:function(){
// console.log("计算了一次");
// return this.firstName + " " + this.lastName
// }
// }
})
</script>
</body>
</html>
在此例中：当age改变时，缓存值不变，不会进入计算。当firstName改变时，会再次计算。
3.4 小结
由上面三个例子可以看出，computed（计算属性）和watch（侦听器）同样具有缓存机制，但是computed写法比较简便，而methods（方法）不具有缓存机制。
若需求可以同时用computed、watch、methods三种方式实现，优先级computed > watch > methods。
四、计算属性的 getter 和 setter
<div id="app">
{{fullName}}
</div>
<script>
var app = new Vue({
el:"#app",
data:{
firstName: "小",
lastName: "默"
},
computed:{
fullName:{
get:function(){
return this.firstName + " " + this.lastName;
},
set:function(value){
var arr = value.split(" ");
this.firstName = arr[0];
this.lastName = arr[1];
console.log(value);
}
}
}
})
</script>
在此例中：
computed中，不仅可以使用get获取值，也可以使用set设置值改变相关联的值，引起fullName重新计算。
五、Vue中的样式绑定
需求：通过点击文字，让文字改变颜色。
5.1 class的对象绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue中的样式绑定</title>
<script src="../vue.js"></script>
<style type="text/css">
.activated {
color: red;
}
</style>
</head>
<body>
<div id="app">
<div @click="handleDivClick"
:class="{activated: isActivated}">
Hello World
</div>
</div>
<script>
var app = new Vue({
el: "#app",
data:{
isActivated: false
},
methods:{
handleDivClick: function() {
this.isActivated = !this.isActivated;
}
}
})
</script>
</body>
</html>
5.2 数组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue中的样式绑定</title>
<script src="../vue.js"></script>
<style type="text/css">
.activated {
color: red;
}
</style>
</head>
<body>
<div id="app">
<!-- <div @click="handleDivClick"
:class="{activated: isActivated}">
Hello World
</div> -->
<div @click="handleDivClick"
:class="[activated]">
Hello World
</div>
</div>
<script>
var app = new Vue({
el: "#app",
data:{
// isActivated: false
activated: ""
},
methods:{
handleDivClick: function() {
// this.isActivated = !this.isActivated;
// if(this.activated === "activated"){
// this.activated = "";
// }else{
// this.activated = "activated";
// }
this.activated = this.activated === "activated" ? "" : "activated";
}
}
})
</script>
</body>
</html>
通过改变activate的值，引用style。
5.3 style
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue中的样式绑定</title>
<script src="../vue.js"></script>
<!-- <style type="text/css">
.activated {
color: red;
}
</style> -->
</head>
<body>
<div id="app">
<!-- <div @click="handleDivClick"
:class="{activated: isActivated}">
Hello World
</div> -->
<!-- <div @click="handleDivClick"
:class="[activated]">
Hello World
</div> -->
<div :style="styleObj" @click="handleDivClick">
Hello World
</div>
</div>
<script>
var app = new Vue({
el: "#app",
data:{
// isActivated: false
// activated: ""
styleObj:{
color:"black"
}
},
methods:{
handleDivClick: function() {
this.styleObj.color = this.styleObj.color === "black" ? "red" : "black";
}
// handleDivClick: function() {
// // this.isActivated = !this.isActivated;
// // if(this.activated === "activated"){
// // this.activated = "";
// // }else{
// // this.activated = "activated";
// // }
// this.activated = this.activated === "activated" ? "" : "activated";
// }
}
})
</script>
</body>
</html>
5.4 小结
无论是用class或者是style，都可以通过对象和数组的方式，为class或者style赋值，从而达到绑定样式的效果。
六、Vue中的条件渲染
6.1 v-if
使v-if默认为false，页面不会被渲染
<div id="app">
<div v-if="show">
{{message}}
</div>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
show: false,
message: "Hello Xiaomo"
}
})
</script>
运行，此时页面没有被渲染：
image.png
调出控制台，改变v-if（show）的默认值，发现页面被渲染了：
image.png
这就是vue中的条件渲染。
6.2 v-show
v-show 不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
6.3 v-else-if 与 v-else
<div id="app">
<div v-if="show === 'a'">This is A</div>
<!-- <div v-show="show" data-test="v-show">{{message}}</div> -->
<div v-else-if="show === 'b'">This is B</div>
<div v-else>This is others</div>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
show:"a"
}
})
</script>
v-if 与 v-else-if 与 v-else 需要连在一起写。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
七、Vue中的列表渲染
需求：将一个数组中的值，渲染到页面。
7.1 v-for
<div id="app">
<div v-for="item in list">
{{item}}
</div>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
list:[
"hello",
"xiaomo",
"nice",
"to",
"meet",
"you"
]
}
})
</script>
使用v-for是最基础的循环。
7.2 唯一标识
<div id="app">
<div v-for="(item, index) in list"
:key="item.id">
{{item.text}} -- {{index}}
</div>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
list:[{
id:"1",
text:"Hello"
},{
id:"2",
text:"xiao"
},{
id:"3",
text:"mo"
},
]
}
})
</script>
运行结果：
image.png
7.3 操作数组的七个方法
push -- 在数组的尾部添加一个或者多个元素，并返回数组的新长度
pop -- 删除数组的最后一个元素，并返回它的删除值。
sort -- 返回排序后的数组
splice -- 用来删除或插入元素，会修改原数组
unshift -- 可向数组的开头添加一个或更多元素，并返回新的长度
shift -- 把数组的第一个元素从其中删除，并返回第一个元素的值
reverse -- 返回逆序数组
7.4 对象循环
<div id="app">
<div v-for="(item, key, index) of userInfo">
{{item}} -- {{key}} -- {{index}}
</div>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
userInfo:{
name:"xiaomo",
age:23,
gender:"male"
}
}
})
</script>
