計(jì)算屬性
# 計(jì)算屬性是基于它們的依賴(lài)進(jìn)行緩存的
# 計(jì)算屬性只有在它的相關(guān)依賴(lài)發(fā)生改變時(shí)才會(huì)重新求值
# 計(jì)算屬性就像Python中的property，可以把方法/函數(shù)偽裝成屬性
# 計(jì)算屬性必須要有返回值
基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="d1">
<h1>普通函數(shù)---其他數(shù)據(jù)變化---》函數(shù)會(huì)重寫(xiě)計(jì)算</h1>
年齡：<input type="text" v-model="age">
姓名：<input type="text" v-model="name">
<br>
{{getAge()}}
<br>
<h1>計(jì)算屬性</h1>
年齡：<input type="text" v-model="age1">
姓名：<input type="text" v-model="name1">
<br>
{{newAge}}
<br>
</div>
</body>
<script>
var vm = new Vue({
el: '#d1',
data: {
age: '',
name: '',
age1: '',
name1: '',
},
methods: {
getAge() {
console.log('我執(zhí)行了')
return Number(this.age) + 10
}
},
computed: {
newAge() {
console.log('我執(zhí)行了--計(jì)算屬性')
return Number(this.age1) + 20
}
}
})
</script>
</html>首字母變大寫(xiě)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="d1">
<h1>首字母變大寫(xiě)</h1>
<input type="text" v-model="name"> ---》{{newName}}
</div>
</body>
<script>
var vm = new Vue({
el: '#d1',
data: {
name: ''
},
computed: {
newName() {
return this.name.substring(0, 1).toUpperCase() + this.name.substring(1)
}
}
})
</script>
</html>通過(guò)計(jì)算屬性，重寫(xiě)過(guò)濾案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>過(guò)濾案例</h1>
<input type="text" v-model="search">
<ul>
<li v-for="item in newDataList">{{item}}</li>
</ul>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
search: '',
dataList: ['a', 'at', 'atom', 'be', 'beyond', 'bee', 'c', 'cs', 'csrf'],
},
computed:{
newDataList(){
return this.dataList.filter(item => item.indexOf(this.search) >= 0)
}
}
})
</script>
</html>監(jiān)聽(tīng)屬性
只要屬性發(fā)生變化，就會(huì)執(zhí)行 函數(shù)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>監(jiān)聽(tīng)屬性</h1>
<button @click="ordering='id'">按id排序</button>
<button @click="ordering='price'">按價(jià)格排序</button>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
ordering: ''
},
watch: {
ordering() {
console.log('我變了,向后端發(fā)送請(qǐng)求')
console.log(this.ordering)
}
}
})
</script>
</html>生命周期鉤子
# vue 組件的生命周期鉤子函數(shù)
?? ?一個(gè)vue的組件，從創(chuàng)建開(kāi)始---》到最后銷(xiāo)毀---》經(jīng)歷一些過(guò)程---》每個(gè)過(guò)程都綁定了一個(gè)函數(shù)--》當(dāng)?shù)竭@個(gè)過(guò)程的時(shí)候，這個(gè)函數(shù)就會(huì)執(zhí)行
? ? 面向切面編程：AOP
? ??
?
# 8個(gè)生命周期鉤子函數(shù)
?? ?1.beforeCreate： 組件創(chuàng)建之前實(shí)現(xiàn)這個(gè)：組件html，js--》html和js都是空的
? ? 2.created：組件創(chuàng)建完成后：js就有值了，html還是空的 ?（向后端發(fā)送ajax請(qǐng)求）
? ? 3.beforeMount：掛載模板之前，js有值，模板(html) 還是空的（向后端發(fā)送ajax請(qǐng)求）
? ? 4.mounted：掛載完成：js有值，模板有值
? ? 5.beforeUpdate：刷新之前執(zhí)行：只要頁(yè)面發(fā)送變化或js變量發(fā)生變化，就會(huì)觸發(fā)它的執(zhí)行
? ? 6.updated：刷新之后執(zhí)行
? ? 7.beforeDestroy：被銷(xiāo)毀之前執(zhí)行 ?（資源清理性工作）
? ? 8.destroyed：被銷(xiāo)毀之后執(zhí)行
? ??
# 實(shí)際用途
?? ?1 頁(yè)面加載完成，向后端發(fā)請(qǐng)求拿數(shù)據(jù)
? ? ?? ?寫(xiě)在create中
? ? ? ??
? ? 2 組件中有定時(shí)任務(wù)，組件銷(xiāo)毀，要銷(xiāo)毀定時(shí)任務(wù)、
??
# 補(bǔ)充：定時(shí)器和延時(shí)器
? ? setTimeout( ()=>{
? ? ? ? console.log('延時(shí)器，3s后執(zhí)行')
? ? },3000)
? ??
? ? setInterval(()=>{
? ? ? ? console.log('每隔3s執(zhí)行')
? ? },3000)
組件介紹
# 組件是：有模板，有js的 ，有方法的 對(duì)象 組件和組件直接的 變量，模板都是隔離的
# 定義組件
Vue.component('Child',{
template: `
<div>
<h1>我是組件</h1>
<button @click="haneleClick">點(diǎn)我看美女</button>
<p>年齡是：{{ age }}</p>
</div>`,
data() {
return {
age: 19
}
},
methods: {
haneleClick() {
alert('美女')
}
}
})
# 使組件，直接根據(jù)組件名使用即可
<Child></Child>局部組件和全局組件
?# ?全局組件
?? ?- 定義：
? ? Vue.component('Child',{})
? ? - 使用，可以在任意位置使用
? ? ?? ?<Child></Child>
?? ?
# 局部組件-->只能定義在組件內(nèi)部，只能在當(dāng)前組件中使用
?? ?-定義
?? ? var vm = new Vue({
? ? ? ? el: '#app',
? ? ? ? data: {},
? ? ? ? components:{局部組件:{}}
? ? })
? ? -使用：只能用在被 當(dāng)前組件管理的 html （#app） 中，放在別的位置找不到文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-809999.html
全局組件使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="d1">
<h1>組件的使用</h1>
<button @click="handleClick">點(diǎn)我看美女</button>
<hr>
<lyz></lyz>
</div>
</body>
<script>
// 定義全局組件
Vue.component('lyz', {
template: `
<div>
<h1>{{ name }}</h1>
<button @click="handleClick">點(diǎn)我換名字</button>
</div>`,
data() {
return {
name: 'lyz'
}
},
methods: {
handleClick() {
this.name = '吳彥祖'
}
}
})
var vm = new Vue({
el: '#d1',
data: {},
methods: {
handleClick() {
alert('美女')
}
}
})
</script>
</html>局部組件的使用
局部組件是定義在組件內(nèi)部，只能在當(dāng)前組件中使用文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-809999.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>局部組件的使用</h1>
<Child></Child>
</div>
</body>
<script>
// 全局組件
Vue.component('Child', {
template: `
<div>
<lyz></lyz>
</div>
`,
// 局部組件
components: {
lyz: {
template: `
<div>
<h2>我是局部組件</h2>
</div>
`,
data() {
return {}
},
methods: {}
}
}
})
var vm = new Vue({
el: '#app',
data: {},
methods: {
handleClick() {
alert('美女')
}
},
})
</script>
</html>組件間通信
父?jìng)髯?/h4>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="d1">
<h1>組件通信之父?jìng)髯樱鹤远x屬性</h1>
<p>父組件中得名字:{{name}}</p>
<div style="background-color: #c0e9ff">
<child :nn="name" mm="lyz"></child>
</div>
</div>
</body>
<script>
Vue.component('child',{
template:`
<div>
<h2>我是Child組件</h2>
<p>{{nn}}==={{mm}}</p>
</div>
`,
props:['nn','mm']
})
var vm = new Vue({
el:'#d1',
data:{
name:'吳彥祖'
},
methods:{
}
})
</script>
</html>
子傳父
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="d1">
<h1>組件通信之子傳父：自定義事件</h1>
<p>子組件的值：{{p_name}}</p>
<child @mm="handleEvent"></child>
</div>
</body>
<script>
Vue.component('child', {
template: `
<div>
<h2>我是Child組件</h2>
<input type="text" v-model="name">---{{ name }}
<button @click="handleSend">傳給父親</button>
</div>
`,
data() {
return {
name: ''
}
},
methods: {
handleSend() {
this.$emit('mm', this.name)
}
}
})
var vm = new Vue({
el: '#d1',
data: {
p_name: ''
},
methods: {
handleEvent(name) {
this.p_name = name
}
}
})
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="d1">
<h1>組件通信之父?jìng)髯樱鹤远x屬性</h1>
<p>父組件中得名字:{{name}}</p>
<div style="background-color: #c0e9ff">
<child :nn="name" mm="lyz"></child>
</div>
</div>
</body>
<script>
Vue.component('child',{
template:`
<div>
<h2>我是Child組件</h2>
<p>{{nn}}==={{mm}}</p>
</div>
`,
props:['nn','mm']
})
var vm = new Vue({
el:'#d1',
data:{
name:'吳彥祖'
},
methods:{
}
})
</script>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="d1">
<h1>組件通信之子傳父：自定義事件</h1>
<p>子組件的值：{{p_name}}</p>
<child @mm="handleEvent"></child>
</div>
</body>
<script>
Vue.component('child', {
template: `
<div>
<h2>我是Child組件</h2>
<input type="text" v-model="name">---{{ name }}
<button @click="handleSend">傳給父親</button>
</div>
`,
data() {
return {
name: ''
}
},
methods: {
handleSend() {
this.$emit('mm', this.name)
}
}
})
var vm = new Vue({
el: '#d1',
data: {
p_name: ''
},
methods: {
handleEvent(name) {
this.p_name = name
}
}
})
</script>
</html>到了這里，關(guān)于計(jì)算屬性和監(jiān)聽(tīng)屬性，生命周期鉤子，組件介紹的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
