试用期对VUE的学习
问题
data中为什么要使用return返回数据
如果不使用return进行包裹,会导致data中的数据全局可见,造成变量污染。
计算属性与方法的差异
计算属性的出现是为了减少模板负担过重,难以维护。虽然使用method也可以完成同样的操作,但我们更倾向于单对一个变量进行操作时使用computed。他俩职责不一样,函数一般用来作为数据的处理器来使用。
Vue中出现的语法糖
v-model : event.target.value
- 事件冒泡
click.stop/click.self : event.stopPropagation()
生命周期
VUE2
创建、挂载只执行一次
创建
beforecreate
获取不到this.data
created
能获取到this.data
状态初始化 或 挂载到当前实例的一些属性
一般用于:查看localstorage或cookie中的值,用来处理状态
挂载
beforeMount
获取不到DOM中{{}}模板
在模板解析之前最后一次修改模板DOM节点
mounted
拿到真实的DOM节点,即{{}}中的真实数据
依赖于DOM创建之后,才进行初始化工作的插件
一般用于:
- 轮播图插件
- 订阅 bus.$on
- 发ajax
更新
beforeUpdate
一般用于:记录滚动条的位置
updated
一般用于:更新完成,获取更新后的DOM
销毁
- 清除定时器
clearInterval(this.id)
- 事件解绑
window.onresize = null
组件之间的通信问题
父子
porps
props:{
name :{
type : String ,
default : ""
}
}
子父
this.$emit
//父组件中定义
<child @event="handleData"></child>
methods : {
handleData(data){
console.log(data) //100
//处理子传递过来的数据
}
}
//子组件中定义
<button @click="handleClick">点击</button>
methods : {
handleClick(){
this.$emit("event",100)
}
}
叔侄 甚至更多
- bus 中央事件总线
- vuex 状态管理