vue2指令的使用和自定义指令

前言

个人认为vue的指令,对比react来说,给开发者节省了很大的学习成本。比如在react中,你想渲染一个列表,需要用Array.map的方法return

,而在vue中,一个简单的v-for就解决了问题。

在学习成本和入手体验上,vue的作者确实后来者居上,能让人更快的使用vue开发。不过也是老生常谈的问题,各有特点,不做过多比较。

vue中的指令是用在标签上或者组件上,是ui层和数据层的交互介质。这个官方没有这么说,是我自己说的,比如你使用v-if,通过data去控制ui,使用v-model实现ui和data的双向交互。

我这里并不是指令的具体教程,只是一些demo的测试效果。

示例

这里我将指令分为三块

简单指令:学习简单,使用简单

复杂指令:可以在组件上使用,或者有修饰符等

自定义指令:自定义一些指令去实现某些业务功能

简单指令

v-text

用来回显常规字符串的

 
v-text使用
 
使用v-text----
 
使用模板语法----{{ textValue }}

 //data
  textValue: '这是一段常规文字',

 效果

v-html

用来回显html的节点

v-html使用


//data
htmlTemplate: `
按钮
`

效果

v-show

用来控制元素的样式回显

v-show使用
开关
开启
关闭

//data
checkedValue: true,

效果

 v-if & v-else-if & v-else

 用来控制元素的渲染

v-if && else-if && else的使用
数字:{{ numValue }}
增加
减少
大于0
等于0
小于0

//data
numValue: 0,

//methods
addNum() {
  this.numValue++
},
deleteNum() {
  this.numValue--
},

 

 v-for

渲染数组类型

                    
v-for使用
                    

                        
{{ item.label }}
                    

//data
            listValue: [
                {
                    label: '文字1',
                    value: 'one'
                },
                {
                    label: '文字2',
                    value: 'two'
                },
                {
                    label: '文字3',
                    value: 'three'
                }
            ],

v-pre

跳过对js等变量的编译,渲染原始html

                    
v-pre使用
                    
我是不需要编译的{{ textValue }}

//data
 textValue: '这是一段常规文字',

v-cloak

渲染完成之前的一种替代(网速慢优化策略)

                    
v-cloak使用
                    

                        {{ textValue }}
                    

v-once

元素只会渲染一次,更新不会重新渲染

                    
v-once使用
                    修改值
                    
不变的:{{ numberVal }}
                    
变化的的:{{ numberVal }}


//data
numberVal: 100,

//methods
        changeNumberVal() {
            this.numberVal++
        },

复杂指令

v-on

用来处理事件的

简写和动态事件

v-on使用(简写为@)
常规点击
简写常规点击
动态事件
动态事件简写
只生效一次

//methods
        clickFun() {
            console.log('常规点击')
        },

依次点击按钮,最后一个按钮点击只触发依次

 

 阻止默认事件

无限制跳转
阻止默认事件

//methods
        clickFun() {
            console.log('常规点击')
        },

第一个按钮会先触发函数,再跳往至百度页面。

第二个按钮只会触发函数,不会跳转页面。

阻止事件冒泡

节点嵌套事件冒泡
阻止事件冒泡

//methods
        clickFun() {
            console.log('常规点击')
        },
        clickSpanFun() {
            console.log('点击span标签')
        },

点击按钮1

点击按钮2

 其他事件和点击组件的修饰符

v-bind

动态渲染值

v-bind使用
动态class
动态样式加简写
查看element按钮组件的自定义属性
查看原生dom的自定义属性

//data
            name1: '属性1',
            name2: JSON.stringify({
                value: '属性3'
            }),

 

依次点击两个按钮

v-model

输入框类型数据视图双向绑定

v-model使用
常规v-model
lazy修饰符
number修饰符
trim修饰符

v-slot

插槽,这里不说了,看插槽相关的文档吧

自定义指令

语法

全局注册和局部注册

局部注册

局部注册就是在当前组件里面写

全局注册

创建一个js文件并在main.js中引入 

import Vue from 'vue'

Vue.directive('setColor',{
   //初始化钩子
   inserted:function(el,val,vnode){
    console.log(el,val,vnode,'???自定义函数')
     el.style.color = val.value || '#000'
   },
   //更新钩子
   update:function(el,val,vnode){
    console.log(el,val,vnode,'???自定义函数')
     el.style.color = val.value || '#000'
   },
})

引入后,任意组件内都可以使用

自定义颜色
 选择一个颜色吧:
 
我是一段可选择颜色的字段


//data
colorValue:'#000'

 定义一个可拖拽的指令

vue组件

可拖拽指令

  

定义指令

Vue.directive('draggable',{
    inserted: function (el) {
        el.onmousedown = function (e) {
            var disx = e.pageX - el.offsetLeft;
            var disy = e.pageY - el.offsetTop;
            document.onmousemove = function (e) {
                el.style.left = e.pageX - disx + 'px';
                el.style.top = e.pageY - disy + 'px';
            }
            document.onmouseup = function () {
                document.onmousemove = document.onmouseup = null;
            }
        }
    },
})

 

自定义指令在实际的项目中还是很重要的,可以实现很多的业务场景。

比如我个人就用指令完成过水印效果,拖拽,按钮权限的控制等,学会自定义指令,也是多少需要复习一下很多人抛弃已久的dom基础知识。

全部代码

vue组件

自定义指令文件

import Vue from 'vue'
import _ from 'lodash'
Vue.directive('setColor',{
   inserted:function(el,val,vnode){
    console.log(el,val,vnode,'???自定义函数')
     el.style.color = val.value || '#000'
   },
   update:function(el,val,vnode){
    console.log(el,val,vnode,'???自定义函数')
     el.style.color = val.value || '#000'
   },
})

Vue.directive('draggable',{
    inserted: function (el) {
        el.onmousedown = function (e) {
            var disx = e.pageX - el.offsetLeft;
            var disy = e.pageY - el.offsetTop;
            document.onmousemove = function (e) {
                el.style.left = e.pageX - disx + 'px';
                el.style.top = e.pageY - disy + 'px';
            }
            document.onmouseup = function () {
                document.onmousemove = document.onmouseup = null;
            }
        }
    },
})

那个child组件我没有写,随便定义一个就行,这些代码可以直接复制测试

感觉有用就给个赞吧!!!