本专栏将从基础开始，循序渐进的讲解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>