Vue自定义指令

Vue中给我们提供了一些好用的系统指令基本上。但是有些时候我们可以自定义一些指令来满足我们的特殊需求。我们来说一下需求，我们需要把p标签上的字符串进行大小写转换。很明显，系统的指令已经不能满足我们的要求，这时候我们就需要自定义我们的指令了。<!DOCTYPE html><html lang="en"><head><meta charse...

听雨轩_dmg

319人浏览 · 2020-01-13 11:01:14

听雨轩_dmg · 2020-01-13 11:01:14 发布

Vue中给我们提供了一些好用的系统指令基本上。但是有些时候我们可以自定义一些指令来满足我们的特殊需求。
我们来说一下需求，我们需要把p标签上的字符串进行大小写转换。很明显，系统的指令已经不能满足我们的要求，这时候我们就需要自定义我们的指令了。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
	<!-- 创建视图层 -->
    <div id="test1">
        <p v-upper-text="test1Msg"></p>
        <p v-lower-text="test1Msg"></p>
    </div>
    <div id="test2">
        <p v-upper-text="test2Msg"></p>
        <p v-lower-text="test2Msg"></p>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js "></script>
    <script>
        var vm1 = new Vue({
            el: "#test1",
            data: {
                test1Msg: "This Is A Custom Directive"
            }
        })
        var vm2 = new Vue({
            el: "#test2",
            data: {
                test2Msg: "This Is A Custom Directive"
            }
        })
    </script>
</body>

上方我们自定义了两个指定v-upper-text将字符串转化成大写。v-lower-text将字符串转化成小写。接下来我们就来详细说明一下自定义的全局指令和私有指令。

全局指令

我们需要在引入Vue之后，用Vue的属性directive来进行创建自定义的指令。这里我们使用比较常用的简写方式。如果想看完整版的请参考官网。
第一个参数：就是我们的指令名称upper-text。这里一定要注意指令名称不能带v-，在使用的时候带上v-。
第二个参数：是钩子函数

<script>
	// 全局的自定义指令 作用域为全局
    Vue.directive('upper-text', function(el, binding) {
    	el.innerHTML = binding.value.toUpperCase();
    })
</script>

这里附上钩子函数的参数
钩子函数参数
我们来看下结果
在这里插入图片描述
第一行和第三行已经全变成了大写字母。

私有指令

私有指令我们需要在创建vue实例的时候进行创建。类似data数据，directives也是一个对象，这里的写法和全局指令写法一致。

var vm1 = new Vue({ 
	el: "#test1",
	data: {
		msg: "This is a custom directive"
	},
	directives: {
		'lower-text': function(el, binding) {
			el.innerHTML = binding.value;
		}
	}
})

我们对vm1实例进行了创建私有指令，对vm2没有创建，我们看下结果
在这里插入图片描述
仔细观察我们发现，第二行全部变成了小写，而第四行什么也没有改变。
至此，自定义指令大致介绍完毕,详情请看官网。如果有误的地方，请大家呢指正，大家加油！！！

Vue

前往低代码交流专区

更多推荐

Vue里echarts根据页面大小动态调整/自适应

Vue

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^