每个export default里都有很多方法,今天复习了常用的一些。
数据相关的有:
包括props、data状态,自定义方法,计算属性,监听。
<template>
<div>
<div>路由传递参数{{id}}</div>
<div @click="show">控制台打印</div>
<div>计算属性{{add}}</div>
<Nav />
</div>
</template>
<script>
export default {
//外部状态:接收外部参数 props: ['id']
props: { id: String },
//内部状态:组件内部数据
data() {
return {
a: 1,
b: 2,
c: {
d: 1
}
};
},
//自定义方法
methods: {
show() {
console.log("打印");
this.c = {
d: 3
};
}
},
//计算属性 与计算相关,返回最后计算出来的值,相关依赖发生改变时才会重新取值,提高性能
computed: {
add() {
return this.a + this.b;
}
},
//监听实例上表达式或函数计算结果的变化
watch: {
//检测a是否发生了变化 发生变化执行aChange函数
id: "idChange",
"c.d": {
handler(newName, oldName) {
console.log(newName, oldName);
//newName 当前值, oldName 原来的值
},
//让d的值未改变时候watch就执行
immediate: true,
//深度监听
deep: true
}
}
}
</script>
生命周期钩子相关的有:
这8个是比较常用的,可以概括为实例前后,挂载前后,状态更新前后,销毁前后。
export default {
//生命周期钩子
beforeCreate() {
//初始化实例前
},
created() {
//实例创建完成
},
beforeMount() {
//虚拟dom挂载到正式dom前
},
mounted() {
//挂载到正式dom完成
},
beforeUpdate() {
//虚拟dom重新渲染前,更新props、data时
},
updated() {
//props、data更改后
},
beforeDestroy() {
//实例销毁前
},
destroyed() {
//实例销毁完成
}
}
资源类相关的有:
包括过滤器、组件注册、自定义指令
<template>
<div>
<input v-focus:[id]="{a:1,b:2}" />
<div>{{value|addPriceIcon}}</div>
<Nav />
</div>
</template>
<script>
import Nav from "./Nav";
export default {
data() {
return {
id: "text",
value: "100"
};
},
//组件注册
components: { Nav },
//局部过滤器
filters: {
//处理函数
addPriceIcon(value) {
return "¥" + value;
}
},
//组件内自定义指令
directives: {
focus: {
bind(el, binding, vnode) {
//el 指令所绑定的元素
//binding 一个包含指令信息的对象 binding.arg: [id] binding.value:等号后的值
//vnode 虚拟节点
console.log(el, binding, vnode);
//指令第一次绑定到元素时调用,只调用一次,一般用来进行一次性的初始化设置
},
inserted(el) {
//被绑定元素插入父节点时调用
el.focus();
},
update() {
//所在组件的虚拟节点更新时调用
},
componentUpdated() {
//所在组件的虚拟节点全部更新后调用
},
unbind() {
//只调用一次,指令与元素解绑时调用
}
}
}
};
</script>
扩展:全局注册自定义指令和过滤器的方法
Vue.filter('capitalize', function (value) { })
Vue.directive('focus', {
inserted: function (el) {
el.focus()
}
})