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