Vue2.0 Vue自定义指令_函数式

最新推荐文章于 2023-07-24 16:10:52 发布

结城明日奈是我老婆

最新推荐文章于 2023-07-24 16:10:52 发布

阅读量503

点赞数

分类专栏： # vue2 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/yasinawolaopo/article/details/121904708

版权

vue2 专栏收录该内容

80 篇文章 4 订阅

订阅专栏

接下来自定义的过程中所有对DOM元素的操作都要我们自己来写
v-show(它能显示和隐藏元素) ==> 怎么让元素隐藏呢?还是Vue帮你动了DOM元素的display属性

从某种程度上来说vue的自定义指令就是操作DOM进行了一次封装

需求1:定义一个v-big指令,和v-text功能类似,但是把绑定数值放大10倍

<h2>当前的n值是:<span v-text="n"></span></h2>
<h2>放大10倍后的n值:<span v-big="n"></span></h2>
<button @click="n++">点我,n+1</button>

Vue.config.productionTip = false

const vm = new Vue({
    el: '#root',
    data(){
        return{
            n: 1,
        }
    }
})

directive: 指令
big指令解析失败了不是v-big
有俩种情况:

1.你写代码写错，人家给你报错，人家报的错误是不带v-的
2.你去定义这个指令的时候不要再写v-big了,指令的名字就直接是big

定义你的指令

这得用到一个全新的配置项:directives,它的值也是一个对象

Vue.config.productionTip = false

const vm = new Vue({
    el: '#root',
    data(){
        return{
            n: 1,
        }
    },
    directives:{

    },
})

在这个里面你就可以写各种各样的指令了:

directives:{

},

第一种写法:写成一个对象

big: {
    k:v,
    k:v,
    k:v,
}

写起来麻烦，但是优势在于能够处理一些细节上的问题

第二种写法:值写成一个函数

big: function(){

}

优势在于写起来简单;但是弊端就是不能处理细节上的问题

需求1怎么简单怎么来写成函数式
需求2用对象式

directives:{
        big(){
            
        }
    },

写到这里你的代码就不报错了
这个指令和计算属性要根据返回值拿数据的不一样， 不要搞混了
不靠返回值,靠big()函数收到的参数有俩个参数非常常用,先a跟b

directives:{
    big(a,b){
        console.log('a=',a,',b=',b)
    }
},

a是:a= <span></span>(是真实的DOM元素)
b是:b= {name: 'big', rawName: 'v-big', value: 1, expression: 'n', modifiers: {…}, …}

怎么确认真实DOM

console.dir(a)

在控制台(Console)查看,里面都是真实DOM属性和方法
还有一种方法:

console.log(a instanceof HTMLElement)

instanceof: 判断谁是否是谁的实例

> true

这真真实实的确认了a就是真实DOM
人家文档里用的就是element:元素

从语法层面来讲b是一个对象,对象里面包含什么?

{name: 'big', rawName: 'v-big', value: 1, expression: 'n', modifiers: {…}, …}
    def: {bind: ƒ, update: ƒ}
    expression: "n"
    modifiers: {}
    name: "big"
    rawName: "v-big"
    value: 1
    [[Prototype]]: Object

包含的东西很多，但是现在不是所有都用
我们更关注value;value是1,1指的是v-big这个指令所用到的值n,n是1如果把n改成99保存,页面中b对象里的value值变成了99
其他的

expression: 表达式(因为你代码里的v-big表达式写的就是"n")
name: 这是你定义时候的名字
rawName: 这是你使用时的名字

这个b别人一般也是写成binding(绑定)
也就是说v-big(指令)与span(元素)要进行一次绑定这里的绑定不是v-bind(属性里面绑定值用的)这里是指令和元素的一种关联关系

Vue.config.productionTip = false

const vm = new Vue({
    el: '#root',
    data(){
        return{
            n: 1,
        }
    },
    directives:{
        big(element,binding){
            // console.log('a=',a,',b=',b)
            //console.log(a instanceof HTMLElement)
            console.log(element,binding.value)
        }
    },
})