- 什么程度叫学会了?——独立的完成当天的代码。
- 先看笔记(视频),对照笔记,敲出代码,认为吸收一半。
- 自己独立的再来次。
13-回顾
-
发布文章
- 使用富文本
- 封装封面图组件
- 发布业务
- 合并修改业务
-
作业:
解决当你在修改文章时候,点击发布文章,组件不更新。
- **原因:**路由对应的组件,路由规则发生改变,组件就会更新。
- **思路:**监听地址栏传参的改变,手动更新组件(更新数据)
- $route.query.id 获取的传参 (修改 有值 ----> 无值 发布)
- 需要是基础知识:watch 侦听器
-
回顾
-
计算属性和侦听器:https://cn.vuejs.org/v2/guide/computed.html
- computed-计算属性:
- 当你需要的数据,需要依赖data中的数据,且经过复杂逻辑的处理才能得到,此时使用。
- 特点:当你依赖的数据发生改变,计算属性也会改变。
- 一定需要返回值。
- watch-侦听器:
- 监听到一项数据(通过this使用的所有数据)的变化。
- 适合:在异步操作或者开销较大(频繁操作/处理逻辑复杂)操作 (当然任何操作都使用watch)
- 总结:监听数据变化的时候,去干一些事情。
- computed-计算属性:
语法:
new Vue({
data(){
return {
msg:'',
}
},
watch:{
// msg 就是的名字
msg:function(newVal,oldVal){
// 当msg对应的数据发生改变触发
}
}
})
piblish/index.vue中的export里添加属性:
watch: {
// 监听地址栏ID传参变化
//使用:‘’$route.query.id“:function(){} 监听到对象下属性变化。
'$route.query.id': function (newVal, oldVal) {
console.log(newVal, oldVal)
// 修改切到发布的时候 重置文章数据 清空文章ID
this.articleForm = {
title: '',
content: '',
cover: {
type: 1,
images: []
},
channel_id: null
}
this.articleId = null
}
},