一,生命周期
1,图示
https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA
2,代码测试
<!DOCTYPE html>
<html lang="en">
<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>
3,总结
- 生命周期就是vue实例在某个时间点会自动执行的函数
- 生命周期函数不在组件实例的methods中
- beforeMount方法在替换组件的template之前执行
- mounted方法在替换组件的template之后执行
- 执行组件销毁vm.$destroy()之后,beforeDestroy,destroyed分别执行
- 组件中数据改变后,例如执行vm.$data.test = “aaa”之后,beforeUpdate,updated分别执行
二,模板语法
https://cn.vuejs.org/v2/api/#v-html
注意:<div>{{name}}</div>
和 <div v-text="name"></div>
用法一样
更新元素的 textContent,<div v-html="name"></div>
更新元素的 innerHTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模板语法</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<div>{{name}}</div>
<div v-text="name"></div>
<div v-html="name"></div>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
name:"<h1>dell</h1>"
}
})
</script>
</body>
</html>
三,计算属性,方法,监听器
1,代码测试
实现修改姓或名,全名变化的功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算属性,方法,监听器</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
{{fullName}}
{{age}}
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
firstName:"dell",
lastName:"lee",
fullName:"",
age:28
},
watch:{
firstName:function(){
this.fullName = this.firstName + " " + this.lastName;
},
lastName:function(){
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>
2,总结
当定义fullName数据后,这样调用
{{fullName}}
,执行watch监听,起作用,只有监听数据变化才执行
。当没有定义fullName数据时,这样调用
{{fullName}()}
,执行methods方法,也能起作用,但每当任何数据变化(例如age变化),页面重新渲染刷新,则方法都会执行
。当没有定义fullName数据时,这样调用
{{fullName}}
,执行computed计算属性,也能起作用,只有待计算数据变化才执行
3,计算属性的set和get方法
当执行vm.fullName = “mikee ssss”时,会调用set方法,从而改变firstName和lastName值,从而引起get方法调用,更新fullName值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算属性的set和get方法</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
{{fullName}}
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
firstName:"dell",
lastName:"lee"
},
computed:{
fullName:{
get:function(){
return this.firstName + " " + this.lastName
},
set:function(value){
var arr = value.split(" ");
this.firstName = arr[0];
this.lastName = arr[1];
}
}
}
})
</script>
</body>
</html>
四,样式绑定
对于style和class都分别有对象绑定和数组绑定
1,代码测试
hello world1234为class测试,1为class的对象绑定测试,234为class的数组绑定测试
hello world56为style测试,5为对象绑定测试,6为数组绑定测试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue中的样式绑定,对象绑定和数组绑定</title>
<script src="vue.js"></script>
<style>
.activated{
color: red;
}
.activated-one{
color: green;
}
.activated-two{
color: red !important;
}
.activated-three{
color: chartreuse;
}
.activated-four{
color: brown;
}
</style>
</head>
<body>
<div id="app">
<div @click="handleDivClick"
:class="{activated:isActivated}">
hello world1
</div>
<div @click="handleDivClickTwo"
:class="[activated]">
hello world2
</div>
<div @click="handleDivClickThree"
:class="[activatedTwo,activatedOne]">
hello world3
</div>
<div @click="handleDivClickFour"
:class="[activatedThree,activatedFour]">
hello world4
</div>
<div @click="handleStyleClick"
:style="styleObj">
hello world5
</div>
<div @click="handleStyleClick"
:style="[styleObj,{fontSize:'20px'}]">
hello world6
</div>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
isActivated: false,
activated:"",
activatedOne:"activated-one",
activatedTwo:"",
activatedThree:"",
activatedFour:"",
styleObj:{
color:"black"
}
},
methods:{
handleDivClick:function(){
this.isActivated = !this.isActivated
},
handleDivClickTwo:function(){
this.activated = this.activated === "activated" ? "" : "activated"
},
handleDivClickThree:function(){
this.activatedTwo = this.activatedTwo === "" ? "activated-two" : ""
},
handleDivClickFour:function(){
if(this.activatedThree === ""){
this.activatedThree = "activated-three"
this.activatedFour = ""
}
else{
this.activatedFour = "activated-four"
this.activatedThree = ""
}
},
handleStyleClick:function(){
this.styleObj.color = this.styleObj.color === "black" ? "red" : "black"
},
}
})
</script>
</body>
</html>
2,总结
对象绑定
主要是用来改变单个样式的采用与否,数组绑定
可以用于多个样式的叠加和改变:style="[styleObj,{fontSize:'20px'}]"
注意样式在js表达式中写法
五,条件渲染
1,代码测试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue条件渲染</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!----------------------1------------------------>
<!--存在与不存在,添加与删除dom元素-->
<div v-if="show">{{message}}</div>
<!--显示与隐藏,效率高,不会一直操作dom元素-->
<div v-show="show">{{message}}</div>
<!----------------------2------------------------>
<!--成对出现,紧挨着 -->
<div v-if="show">{{message}}</div>
<div v-else>bye world</div>
<!----------------------3------------------------>
<!--成对出现,紧挨着 -->
<div v-if="showvalue === 'a'">this is a</div>
<div v-else-if="showvalue === 'b'" >this is b</div>
<div v-else>this is others</div>
<!----------------------4------------------------>
<!-- input元素没有变化,系统尝试复用view,加key值去区别 -->
<div v-if="show">
用户名:<input key+"username"/>
</div>
<div v-else>
邮箱名:<input key+"password"/>
</div>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
show:false,
message:"hello world",
showvalue:"a"
}
})
</script>
</body>
</html>
2,总结
v-if
存在与不存在,添加与删除dom元素v-show
显示与隐藏,效率高
,不会一直操作dom元素v-if
,v-else
,v-else-if
成对出现,元素紧挨着使用v-if
和v-show
内都可以写表达式示例中input元素没有变化,系统尝试复用view,加key值去区别
六,数据循环
1,代码测试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue条件渲染</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!--------------数组循环----------------->
<!--id比index效率高-->
<!--template可以包裹一些元素,但是它不会渲染到页面上-->
<template v-for="(item,index) of list" :key="item.id">
<div>
{{item.text}} ---------{{index}}
</div>
<span>
{{item.text}}
</span>
</template>
<!--------------对象循环----------------->
<!--整个对象重新赋值,数据变,页面变--->
<!--利用set方法改变对象内容,数据变,页面变Vue.set(vm.userInfo,"address","beijing")----->
<!--利用key值改变对象内容,数据变,页面变vm.userInfo.name = "dell lee"----->
<!--利用key值增加对象内容,数据变,页面不变vm.userInfo.address = "beijing"-->
<div v-for="(item,key,index) of userInfo">
{{item}}--------{{key}}--------{{index}}
</div>
</div>
<!--vm.list[4] = {id:"002",text:"2"} 利用数组下标添加或改变数据,只能数据改变,但是页面不变-->
<!--这些数组方法,数据改变,页面也变,push pop shift unshift splice sort reverse-->
<!--改变数据方法,vm.list.splice(1,1,{id:"333",text:"dell"})
或者整个数组重新赋值
-->
<!--改变数据方法,Vue.set(vm.list,1,{id:"333",text:"dell"})-->
<!--改变数据方法,vm.$set(vm.list,1,{id:"333",text:"dell"})-->
<script>
var vm = new Vue({
el:"#app",
data:{
list:[{
id:"010120201",
text:"hello"
},{
id:"010120202",
text:"dell"
},{
id:"010120203",
text:"lee"
}],
userInfo:{
name:"dell",
age:28,
gender:"male",
salary:"secret"
}
}
})
</script>
</body>
</html>
2,总结
主要为数组循环和对象循环
template
可以包裹一些元素,但是它不会渲染到页面上对象循环
- 整个对象重新赋值,数据变,页面变
- 利用set方法改变对象内容,数据变,页面变Vue.set(vm.userInfo,”address”,”beijing”)
- 利用key值改变对象内容,数据变,页面变vm.userInfo.name = “dell lee”
- 利用key值增加对象内容,数据变,
页面不变
vm.userInfo.address = “beijing”
数组循环
- 整个数组重新赋值,数据变,页面变
- 利用数组下标
添加或改变
数据,数据变,页面不变
vm.list[4] = {id:”002”,text:”2”} 这些数组方法,数据变,页面变,push pop shift unshift splice sort reverse。例如,改变数据方法,vm.list.splice(1,1,{id:”333”,text:”dell”})
改变数据set方法,数据变,页面变,Vue.set(vm.list,1,{id:”333”,text:”dell”})
- 改变数据set方法,数据变,页面变,vm.$set(vm.list,1,{id:”333”,text:”dell”})