【 1 】计算属性
计算属性大致就是这样
python
# 1 计算属性是基于它们的依赖进行缓存的
# 2 计算属性只有在它的相关依赖发生改变时才会重新求值
# 3 计算属性就像Python中的property,可以把方法/函数伪装成属性
# 计算属性本质上是一个函数,它们可以通过 get 和 set 方法对属性进行操作。
# 4 写在computed中,必须返回值--》返回值才是属性
-以后把他当属性用
-被for循环
个人的理解就是
vue
中的计算属性的好处就是我比如在设置了一个input
标签里写了计算属性之后 别的组件发生改变我的input
标签也不会发生改变
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="name">--》》{{ newName }}
<hr>
<input type="text" v-model="name1">---》{{ name1 }}
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
name: '',
name1: ''
},
methods: {
// 普通函数形式
handleToUpper() {
console.log('函数我执行了')
return this.name.substring(0, 1).toUpperCase() + this.name.substring(1)
}
},
computed:{
// 将 handleToUpper() 方法改写为计算属性
newName(){
console.log('计算属性我执行了')
return this.name.substring(0, 1).toUpperCase() + this.name.substring(1)
}
}
})
</script>
</html>
【 2 】监听属性
python
# 1 监听住一个属性,只要这个属性发生变化,就执行函数
name
属性被监听,当它的值发生变化时,会触发相应的处理函数。
在Vue.js中,监听属性(Watchers)必须在 watch
对象中定义,而计算属性(Computed Properties)必须在 computed
对象中定义。
- Watchers(监听属性) :用于监听某个数据的变化,并在数据发生变化时执行一些自定义的逻辑。你可以在
watch
对象中定义一个或多个属性,每个属性对应一个要监听的数据,并指定一个处理函数。 - Computed Properties(计算属性) :用于基于已有的数据计算出一个新的值,这个新的值会被缓存起来,只有在相关的依赖发生变化时才会重新计算。你可以在
computed
对象中定义计算属性,每个属性对应一个计算值的处理函数。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
</head>
<div id="app">
<input type="text" v-model="name">
<p>新的 name: {{ name }}</p>
<p>旧的 name: {{ oldName }}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
name: 'John',
oldName: ''
},
watch: {
// 监听name属性的变化
name: function(newValue, oldValue) {
this.oldName = oldValue; // 将旧的名字存储到oldName数据属性中
console.log('Name changed from ' + oldValue + ' to ' + newValue);
}
}
});
</script>
</html>
【 3 】生命周期钩子
生命周期
new Vue---->根组件.03
vue2 组件的生命周期钩子函数
- 一个vue的组件,从创建开始---》到最后销毁---》经历一些过程---》每个过程都绑定了一个函数--》当到这个过程的时候,这个函数就会执行
面向切面编程:AOP
8个生命周期钩子函数
beforeCreate
: 组件创建之前实现这个:组件html,js--》html和js都是空的created
:组件创建完成后:js就有值了,html还是空的 (向后端发送ajax请求)beforeMount
:挂载模板之前,js有值,模板(html) 还是空的(向后端发送ajax请求)mounted
:挂载完成:js有值,模板有值beforeUpdate
:刷新之前执行:只要页面发送变化或js变量发生变化,就会触发它的执行updated
:刷新之后执行beforeDestroy
:被销毁之前执行 (资源清理性工作)destroyed
:被销毁之后执行
实际用途
- 页面加载完成,向后端发请求拿数据
- 写在create中
- 组件中有定时任务,组件销毁,要销毁定时任务、
cpp
# 1 new Vue---->根组件
# 2 创建全局组件---》放在根组件中
cpp
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./vue/vue.js"></script>
</head>
<body>
<div id="app">
<h1>组件使用</h1>
<button @click="hanleShow">显示隐藏组件</button>
<hr>
<Child v-if="isShow"></Child>
<hr>
</div>
</body>
<script>
let a = {
template: `
<div>
<button @click="handleClick">{{ title }}</button>
</div>`,
data() {
return {
title: '首页',
t:null
}
},
methods: {
handleClick() {
this.title = '拜年了'
alert(this.title)
}
},
beforeCreate() {
console.log('beforeCreate')
console.log(this.title)
console.log(this.$el)
},
created() {
// 跟后端交互
console.log('created')
console.log(this.title)
console.log(this.$el)
// 启动定时器--》每隔3s,打印helloworld
this.t=setInterval(()=>{
console.log('hello world')
},3000)
},
beforeMount() {
console.log('beforeMount')
console.log(this.title)
console.log(this.$el)
},
mounted() {
console.log('mounted')
console.log(this.title)
console.log(this.$el)
},
beforeUpdate() {
console.log('beforeUpdate')
},
updated() {
console.log('updated')
},
beforeDestroy(){
console.log('beforeDestroy')
// 销毁定时器
clearInterval(this.t)
this.t=null
},
destroyed() {
console.log('destroyed')
},
}
// 1 定义全局组件
Vue.component('Child', a)
var vm = new Vue({
el: '#app',
data: {
isShow: true
},
methods: {
hanleShow() {
this.isShow = !this.isShow
}
}
})
</script>
</html>