本专栏将从基础开始,循序渐进的讲解Vue的基本概念以及使用,希望大家都能够从中有所收获,也请大家多多支持。
专栏地址: Vue专栏
相关软件地址: 相关安装包地址
如果文章知识点有错误的地方,请指正!大家一起学习,一起进步。
1 钩子函数
一个指令定义对象可以提供如下几个钩子函数 (均为可选):
-
bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
-
inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。
-
update:所在组件对象中数据或函数更新时调用
-
componentUpdated:指令所在组件及其子组件 全部更新后调用。
-
unbind:只调用一次,指令与元素解绑时调用。
2 钩子函数参数
- el:指令所绑定的元素,可以用来直接操作 DOM。
- binding:一个对象,包含以下 property:
- name:指令名,不包括 v- 前缀。
- value:指令的绑定值,例如:v-my-directive=“1 + 1” 中,绑定值为 2。
- oldValue:指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
- expression:字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中,表达式为 “1 + 1”。
- arg:传给指令的参数,可选。例如 v-my-directive:foo 中,参数为 “foo”。
- modifiers:一个包含修饰符的对象。例如:v-my-directive.foo.bar 中,修饰符对象为 { foo: true, bar: true }。
- vnode:Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
- oldVnode:上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。
2.1 全局绑定
- main.js
//全局指令
Vue.directive("focus",{
//当前指令的生命周期,el:HtmlElement
bind:function(el,binding){
console.log("初始化...")
console.log(binding)
},
inserted:function(el){
console.log("插入父节点调用...")
el.focus();
},
update:function(el){
console.log("更新时调用...")
el.focus();
}
})
- 组件中
<!-- 大写字母要用-加小写字母代替-->
<input type="text" v-my-style name="" value=""/>
2.2 局部绑定
export default {
name: "customised-components",
data(){
return{
}
},
//局部指令
directives: {
"focus": {
//当前指令的生命周期,el:HtmlElement
bind: function (el, binding) {
console.log("初始化...")
console.log(binding)
},
inserted: function (el) {
console.log("插入父节点调用...")
el.focus();
},
update: function (el) {
console.log("对象中数据或函数更新时调用...")
el.focus();
}
},
myStyle:{
inserted:function (el){
el.style.fontSize = "50px";
}
}
}
}
3 过滤器
使用如下图所示
<template>
<div>
{
{
money | rmb | author}}
</div>
</template>
<script>
export default {
name: "filterDemo",
data(){
return{
money:100
}
},
filters:{
rmb:function (value){
if(!value) return;
value = value.toString()
return "¥" + value;
},
author:function (value){
if(!value) return;
return value+"----------来自author";
}
}
}
</script>
<style scoped>
</style>