Vue實戰專案開發--vue基礎精講
阿新 • • 發佈：2019-01-01
專案的原始碼在GitHub上：點選檢視
Vue例項
vue的每一個元件都是一個例項，該例項對應著很多屬性和方法。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Vue例項</title> <script src="./vue.js"></script> </head> <body> <div id="root"> <div @click="handleClick"> {{message}} </div> </div> <script> var vm = new Vue({ el: '#root', data: { message: 'hello world' }, methods: { handleClick: function () { alert("hello") } } }) </script> </body> </html>
Vue例項的生命週期鉤子
生命週期函式就是vue例項在某一個時間點自動執行的函式
<!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("boforeCreate"); }, 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的模板語法
插值：
文字： {{}} 資料繫結最常見的形式就是使用“Mustache”語法 (雙大括號) 的文字插值：
原始HTML：v-html 雙大括號會將資料解釋為普通文字，而非 HTML 程式碼。為了輸出真正的 HTML，你需要使用 v-html 指令
操作純文字：v-text 它會替代顯示對應的資料物件上的值。當繫結的資料物件上的值發生改變，插值處的內容也會隨之更新。注意：此處為單向繫結，資料物件上的值改變，插值會發生變化；但是當插值發生變化並不會影響資料物件的值。
注意：這些模板語法v-XXX後面的內容都是js表示式
具體檢視vue官方文件：模板語法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue模板語法</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>
計算屬性，方法和偵聽器
可以通過三種方法實現屬性的運算：計算屬性、方法和偵聽器，如果一個功能可以通過計算屬性和watch實現，選用計算屬性是最簡單的。<!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: "Dell lee",
age: 28
},
watch: {
firstName: function(){
console.log("計算了一次");
this.fullName = this.firstName + " " + this.lastName;
},
lastName: function(){
console.log("計算了一次");
this.fullName = this.firstName + " " + this.lastName;
}
}
// fullName方法，沒有快取，頁面只要重新渲染，這個函式就會重新執行一次
// methods: {
// fullName: function () {
// return this.firstName + " " + this.lastName;
// }
// },
// 計算屬性,計算屬性有快取的概念
// computed:{
// fullName: function () {
// console.log("計算了一次");
// return this.firstName + " " + this.lastName;
// }
// }
})
</script>
</body>
</html>計算屬性的setter和getter
當改變了firstName和lastName時，set起作用，同時會重新計算fullName的值，頁面中的fullName也會發生變化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>計算屬性的setter和getter</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>Vue中的樣式繫結
- class物件繫結
- calss陣列方式繫結
- style內聯繫結
- style陣列方式繫結
<!--class物件方式繫結-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue中的樣式繫結</title>
<script src="./vue.js"></script>
<style>
.activated{ color: red}
</style>
</head>
<body>
<div id="app">
<div @click="handleDivClick"
:calss="{activated: isActivated}"
>
Hello world
</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
isActivated: false
},
methods: {
handleDivClick: function () {
this.isActivated = !this.isActivated;
}
}
})
</script>
</body>
</html>Vue中的條件渲染
v-if與v-show的區別：
- 手段：
v-if是動態的向DOM樹內新增或者刪除DOM元素；
v-show是通過設定DOM元素的display樣式屬性控制顯隱； - 編譯過程：
v-if切換有一個區域性編譯/解除安裝的過程，切換過程中合適地銷燬和重建內部的事件監聽和子元件；
v-show只是簡單的基於css切換； - 編譯條件：
v-if是惰性的，如果初始條件為假，則什麼也不做；只有在條件第一次變為真時才開始區域性編譯（編譯被快取？編譯被快取後，然後再切換的時候進行區域性解除安裝);
v-show是在任何條件下（首次條件是否為真）都被編譯，然後被快取，而且DOM元素保留； - 效能消耗：
v-if有更高的切換消耗；
v-show有更高的初始渲染消耗； - 使用場景：
v-if適合運營條件不大可能改變；
v-show適合頻繁切換。
<!--v-if：指令會使div在文件流中移除-->
<!--v-show：指令會使div在css上發生屬性變化，實現效果-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue中的條件渲染1</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<div v-if="show" data-test="v-if">{{message}}</div>
<div v-else>Bye World</div>
<div v-show="show" data-test="v-show">{{message}}</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
show: false,
message: "Hello World"
}
})
</script>
</body>
</html>Vue中的列表渲染
不能通過陣列的下標來改變對應的內容，頁面不會發生對應的改變，只能通過push pop shift unshift splice sort reverse這7個方法來操作。(還可以直接運算元組的引用來改變內容)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue中的列表渲染</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<div v-for="(item, index) of list"
:key="item.id"
>
{{index}}------{{item.text}}
</div>
</div>
<script>
// push pop shift unshift splice sort reverse
var vm = new Vue({
el: "#app",
data: {
list: [{
id: "1346401",
text: "hello"
}, {
id: "1346402",
text: "dell"
}, {
id: "1346403",
text: "lee"
},
]
}
})
</script>
</body>
</html>遍歷物件
不能直接動態的新增新的屬性（vm.userInfo.address = "beijing",這樣新增新的屬性，資料發生變化了，頁面卻不會變化），只能修改引用，重新改變整個物件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue中的列表渲染</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<div v-for="(item, key, index) of userInfo">
{{item}} --- {{key}} ---{{index}}
</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
userInfo:{
name: "Dell",
age: 28,
gender: "male",
salary: "secret"
}
}
})
</script>
</body>
</html>Vue中的set方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue中的列表渲染</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<div v-for="(item, key, index) of userInfo">
{{item}} --- {{key}} ---{{index}}
</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
userInfo:{
name: "Dell",
age: 28,
gender: "male",
salary: "secret"
}
}
})
</script>
</body>
</html>- Vue全域性方法set來新增物件userInfo新的屬性 Vue.set(vm.userInfo, "address","beijing")
- 通過例項的例項方法$set來新增物件userInfo新的屬性 vm.$set( vm.userInfo, "address", "beijing")
如果是陣列動態新增資料，也是可以用push pop shift unshift splice sort reverse這七種變異方法和引用新的陣列來實現，同時也可以使用set方法來完成，也是可以通過Vue全域性方法set和例項vm的$set方法來改變。(這裡就不多贅述了)