vue2的方法
不可以使用箭头函数
<template>
<div>
<div>{{sum2()}}</div>
<button @click="add">add</button>
</div>
</template>
<script>
export default {
data(){
return{
name:"张三",
num:20,
num2:30,
}
},
methods:{
sum2(){
console.log('sum2')
return this.num+ this.num2
},
/**
* 注意，不应该使用箭头函数来定义 method 函数 (例如 plus: () => this.a++)。
* 理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined。
* 这时this其实是methods的this，但是methods没别任何对象调用所以他的this是undefined
* 函数的this指向调用他的对象
*/
add:()=>{
// this.num++
// console.log(this.num)
console.log(this)
}
},
computed:{
sum(){
console.log('sum')
return this.num+ this.num2
}
},
watch:{
num(){
console.log('num')
return this.num+ this.num2
}
},
beforeCreate(){
console.log('beforeCreate')
}
}
</script>
<style lang="scss" scoped>
</style>add:()=>{
// this.num++
// console.log(this.num)
console.log(this)
}使用箭头函数时报错，打印一下发现箭头函数功能直接指向父级元素（这里是）methods，所以这里的this是methods的this因为未被调用所以是空的
注意，不应该使用箭头函数来定义 method 函数 (例如 plus: () => this.a++)。
* 理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined。
* 这时this其实是methods的this，但是methods没别任何对象调用所以他的this是undefined
* 函数的this指向调用他的对象
vue2监听
新建文件
修改路由
来到watch->index.vue
<template>
<div>
<h1>监听</h1>
<p>{{ num }}</p>
<button @click="num++">+</button>
<button @click="dog.name = '小柏'">+</button>
</div>
</template>
<script>
export default {
data() {
return {
num: 1,
dog: {
name: '小狗',
age: 1
}
}
},
watch: {
/**
* 1.简写,监听属性不依赖其他属性，修改值就会触发，一旦触发了被监听属性的set就会触发
*/
num(newV, oldV) {
console.log('新值', newV, '旧值', oldV)
},
// dog(newV, oldV) {
// console.log('新值', newV, '旧值', oldV)
// }
dog: {
deep: true,// 深度监听，监听对象中的属性变化
handler(newV, oldV) {
console.log('新值', newV, '旧值', oldV)
},
immediate: true//立即开始监听，页面第一次渲染时或者刷新时就会触发
},
'dog.age': {//这样直接监听对象的属性
handler(newV, oldV) {
console.log('新值', newV, '旧值', oldV)
},
immediate: true
}
}
}
</script>
<style scoped lang='scss'></style>
num(newV, oldV) {
console.log('新值', newV, '旧值', oldV)
},监听对象和对象属性
监听对象俩个方法选择其一，才会触发
immediate: true//立即开始监听，页面第一次渲染时或者刷新时就会触发
deep: true,// 深度监听，监听对象中的属性变化 dog: {
deep: true,// 深度监听，监听对象中的属性变化
handler(newV, oldV) {
console.log('新值', newV, '旧值', oldV)
},
immediate: true//立即开始监听，页面第一次渲染时或者刷新时就会触发
},
'dog.age': {//这样直接监听对象的属性
handler(newV, oldV) {
console.log('新值', newV, '旧值', oldV)
},
immediate: true
}vue2父传子
// 父传子搭配生命周期的理解
新建文件
切换路由
生命周期父子组件运行与销毁
parent.vue
引用使用子的文件
import Child from "./child";//定义自己的名字是parent，引用子组件儿子的名字
name: 'parent',
components: { Child },
//在div内使用它
<Child/>定义生命周期并对起销毁，给一个show属性，为true控制开关
return {
show: true
}
beforeCreate() {
console.log('父组件', 'beforeCreate')
},
created() {
console.log('父组件', 'created')
},
beforeMount() {
console.log('父组件', 'beforeMount')
},
mounted() {
console.log('父组件', 'mounted')
},
beforeUpdate() {
console.log('父组件', 'beforeUpdate')
},
updated() {
console.log('父组件', 'updated')
},
beforeDestroy() {
console.log('父组件', 'beforeDestroy')
},
destroyed() {
console.log('父组件', 'destroyed')
},把父里面的值传个子，并使用按钮控制开关
<Child v-if="show"/>
<button @click="show = !show">按钮</button>parent.vue全部代码
<template>
<div>
<Child v-if="show"/>
<button @click="show = !show">按钮</button>
</div>
</template>
<script>
/**
* 父传子，通过自定义属性传参，即props
* 父组件将要传递的参数通过v-bind绑定到自组件上
* :属性名="参数值"
*/
import Child from "./child";
export default {
name: 'parent',
components: { Child },
data() {
return {
show: true
}
},
/**
* 当父子组件嵌套时
* 会先将父组件初始化，但不会进行挂载
* 然后开始进行子组件的初始化以及挂载
* 子组件挂载完毕时，才会挂载父组件
* 销毁的时候，先销毁子组件，然后才会触发父组件的updated钩子
*/
beforeCreate() {
console.log('父组件', 'beforeCreate')
},
created() {
console.log('父组件', 'created')
},
beforeMount() {
console.log('父组件', 'beforeMount')
},
mounted() {
console.log('父组件', 'mounted')
},
beforeUpdate() {
console.log('父组件', 'beforeUpdate')
},
updated() {
console.log('父组件', 'updated')
},
beforeDestroy() {
console.log('父组件', 'beforeDestroy')
},
destroyed() {
console.log('父组件', 'destroyed')
},
methods: {},
computed: {}
}
</script>
<style scoped lang='scss'></style>
子和父运行生命周期，并对起销毁
child.vue
定义一下自己的名字
name: 'child',在子组件里用生命周期，看看执行顺序
<template>
<div>
子组件
</div>
</template>
<script>
/**
* 自组件通过props接受父组件传递的值
* props中的属性被混入了当前的子组件中
* 可以通过this直接访问到
* 注意：子组件不允许修改父组件传递的值，否则会破坏vue的单向数据流
*/
export default {
name: 'child',
data() {
return {
}
},
beforeCreate() {
console.log('子组件beforeCreate')
},
created() {
console.log('子组件created')
},
beforeMount() {
console.log('子组件beforeMount')
},
mounted() {
console.log('子组件mounted')
},
beforeUpdate() {
console.log('子组件beforeUpdate')
},
updated() {
console.log('子组件updated')
},
beforeDestroy() {
console.log('子组件beforeDestroy')
},
destroyed() {
console.log('子组件destroyed')
},
}
</script>
<style scoped lang='scss'></style>
show 初始值为 true，<Child> 组件在初始渲染时会被显示出来。
当点击show将flase隐藏，对子组件进行销毁
- 当父子组件嵌套时
-
- 会先将父组件初始化，但不会进行挂载
- 然后开始进行子组件的初始化以及挂载
- 子组件挂载完毕时，才会挂载父组件
- 销毁的时候，先销毁子组件，然后才会触发父组件的updated钩子
注意：子组件不允许修改父组件传递的值，否则会破坏vue的单向数据流
<template>
<div>
子组件
<p>{{ age }}</p>
</div>
</template>
<script>
/**
* 子组件通过props接受父组件传递的值
* props中的属性被混入了当前的子组件中
* 可以通过this直接访问到
* 注意：子组件不允许修改父组件传递的值，否则会破坏vue的单向数据流
*/
export default {
/**
* 1.简写
* props: ['age'],
*/
/**
* 2.完整写法
*/
props: {
age: {
type: Number,//类型
default: 18,//默认值
required: true,//是否必须
validator: (v) => { return true }//校验规则
}
},
name: 'child',
data() {
return {
}
},
beforeCreate() {
console.log('子组件beforeCreate')
},
created() {
console.log('子组件created')
},
beforeMount() {
console.log('子组件beforeMount')
},
mounted() {
console.log('子组件mounted')
/**
* $parent
* 1.获取父组件的实例
* 2.通过$parent可以访问到父组件的实例，从而访问到父组件中的数据和方法
*/
setTimeout(() => {
console.log(this.$parent, '父组件')
}, 100);
},
beforeUpdate() {
console.log('子组件beforeUpdate')
},
updated() {
console.log('子组件updated')
},
beforeDestroy() {
console.log('子组件beforeDestroy')
},
destroyed() {
console.log('子组件destroyed')
},
}
</script>
<style scoped lang='scss'></style>
