一，生命周期
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”})