Vue自定义标签[通俗易懂]

Vue自定义标签[通俗易懂]简介主要讲解vue中如何定义自定义标签。自定义标签使用vue的配置对象中的directives属性进行配置。比如下面代码定义一个自定义标签v-big,可以把绑定的表达式乘以十倍渲染到元素的text区,相当于v-text,只是他表达式要数字并且会乘以10倍后渲染。<!DOCTYPEhtml><htmllang=”en”><head><metacharset=”UTF-8″><title>自定义指令</tit

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

简介

主要讲解vue中如何定义自定义标签
自定义标签使用vue的配置对象中的directives属性进行配置。

比如下面代码定义一个自定义标签v-big,可以把绑定的表达式乘以十倍渲染到元素的text区,相当于v-text,只是他表达式要数字并且会乘以10倍后渲染。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义指令</title>
</head>
<body>
<div id="root">
<!-- 使用自定义指令v-big -->
<!-- 作用是把表达式中的值*10倍后再渲染到元素的文本中 -->
<div>{
{name}}</div>
<div v-big="n"></div>
<button @click="n++">点击按钮n+1</button>
</div>
<script src="./js/vue.js"></script>
<script> const vm = new Vue({ 
 el:"#root", data:{ 
 n:1, name:"yehaocong" }, //这个属性是配置自定义属性的 directives:{ 
 //简便写法,直接写成函数的形式,但是这种方法虽然简便,但是功能没有完整写法那么强大。 //指令的使用时要加v- ,也就是v-方法名 //该方法会传入两个参数,第一个是指令绑定的元素对象,第二个是绑定信息。 //该函数有两个触发时机: //1. 初始化时,也就是模板第一次加载渲染时。 //2. 模板被重新解析时,这个不仅限函数设计的属性被更改,只要是这个模板的属性被更改导致模板重新解析,就会调用该函数。 big(element,binding){ 
 console.log("big"); console.log(element); console.log(binding); element.innerText = binding.value * 10; } } }) </script>
</body>
</html>

Jetbrains全家桶1年46,售后保障稳定

效果:
在这里插入图片描述
在这里插入图片描述

完整写法:
完整写法能够完成简便写法一些无法完成的功能,比如写一个具备以下功能自定义指令。

写一个v-fbind指令,该指令用于绑定input元素的value值,但是可以使得input框获取焦点。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义指令</title>
</head>
<body>
<div id="root">
<input type="text" v-fbind="n"> <br><br>
<button @click="n++">点击n+1</button>
</div>
</body>
<script src="./js/vue.js"></script>
<script> const vm = new Vue({ 
 el:"#root", data:{ 
 n:1 }, directives:{ 
 //先使用简便写法看是否能完成功能 fbind(element,binding){ 
 element.value = binding.value; //聚焦 element.focus(); } } }) </script>
</html>

效果:
在这里插入图片描述
点击一下页面的按钮,使得n加一,重新解析模板。
在这里插入图片描述
这个的原因是,初始化时执行聚焦的代码时,input元素与指令才刚刚绑定,并没有插入到页面html中,此时使用聚焦代码是不生效的,因为页面实际上还不存在该元素。

然后点击,重新调用fbind函数,此时,由于已经不是初始化了,input框已经真正存在html页面结构中,所以聚焦成功。

所以使用简便方式无法进行聚焦,需要使用完整形式。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义指令</title>
</head>
<body>
<div id="root">
<input type="text" v-fbind="n"> <br><br>
<button @click="n++">点击n+1</button>
</div>
</body>
<script src="./js/vue.js"></script>
<script> const vm = new Vue({ 
 el:"#root", data:{ 
 n:1 }, directives:{ 
 //完整形式,写成一个对象。 //有三个函数会在一定的时机调用: //1. bind 函数,就是在指令与元素绑定时调用,也就是第一个调用时机。 //2. update函数,在模板重新解析时的回调函数,也就是第二个调用时机。 //3. inserted函数,会在元素插入到页面html结构后调用。 //三个回调函数都会接收element和binding fbind:{ 
 bind(element,binding){ 
 //在这里进行数据的绑定 element.value = binding.value; }, update(element,binding){ 
 //重新渲染时需要进行数据绑定 element.value = binding.value; //聚焦 element.focus(); }, inserted(element,binding){ 
 //聚焦 element.focus(); } } } }) </script>
</html>

效果:
在这里插入图片描述
在这里插入图片描述
因为bind函数常常会有update函数的逻辑一致,所以简便方式就是直接封装bind和update函数。

函数的this是window。

上面的自定义指令的定义形式都是局部的,也就是只有该vm对象管理的模板才能用。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义指令</title>
</head>
<body>
<div id="root">
<input type="text" v-fbind="n"> <br><br>
<button @click="n++">点击n+1</button>
</div>
<!-- 定义第二个容器,使用v-fbind指令,但是管理该容器的vm对象不定义该指令 -->
<div id="root1">
<input type="text" v-fbind="n"> <br><br>
<button @click="n++">点击n+1</button>
</div>
</body>
<script src="./js/vue.js"></script>
<script> const vm = new Vue({ 
 el:"#root", data:{ 
 n:1 }, directives:{ 
 //完整形式,写成一个对象。 //有三个函数会在一定的时机调用: //1. bind 函数,就是在指令与元素绑定时调用,也就是第一个调用时机。 //2. update函数,在模板重新解析时的回调函数,也就是第二个调用时机。 //3. inserted函数,会在元素插入到页面html结构后调用。 //三个回调函数都会接收element和binding fbind:{ 
 bind(element,binding){ 
 //在这里进行数据的绑定 element.value = binding.value; }, update(element,binding){ 
 //重新渲染时需要进行数据绑定 element.value = binding.value; //聚焦 element.focus(); }, inserted(element,binding){ 
 //聚焦 element.focus(); } } } }) const vm1 = new Vue({ 
 el:"#root1", data:{ 
 n:1 } }) </script>
</html>

效果:
在这里插入图片描述

定义全局指令

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义指令</title>
</head>
<body>
<div id="root">
<input type="text" v-fbind="n"> <br><br>
<button @click="n++">点击n+1</button>
</div>
<!-- 定义第二个容器,使用v-fbind指令,但是管理该容器的vm对象不定义该指令 -->
<div id="root1">
<input type="text" v-fbind="n"> <br><br>
<button @click="n++">点击n+1</button>
</div>
</body>
<script src="./js/vue.js"></script>
<script> //使用VUE.directive方法进行全局指令的定义。 //有两种形式: //1. Vue.directive("指令名称",函数) 对应简便形式 //2. Vue.directive("指令名称",对象) 对应完整形式 Vue.directive("fbind",{ 
 bind(element,binding){ 
 //在这里进行数据的绑定 element.value = binding.value; }, update(element,binding){ 
 //重新渲染时需要进行数据绑定 element.value = binding.value; //聚焦 element.focus(); }, inserted(element,binding){ 
 //聚焦 element.focus(); } }) const vm = new Vue({ 
 el:"#root", data:{ 
 n:1 } // , // directives:{ 
 // //完整形式,写成一个对象。 // //有三个函数会在一定的时机调用: // //1. bind 函数,就是在指令与元素绑定时调用,也就是第一个调用时机。 // //2. update函数,在模板重新解析时的回调函数,也就是第二个调用时机。 // //3. inserted函数,会在元素插入到页面html结构后调用。 // //三个回调函数都会接收element和binding // fbind:{ 
 // bind(element,binding){ 
 // //在这里进行数据的绑定 // element.value = binding.value; // }, // update(element,binding){ 
 // //重新渲染时需要进行数据绑定 // element.value = binding.value; // //聚焦 // element.focus(); // }, // inserted(element,binding){ 
 // //聚焦 // element.focus(); // } // } // } }) const vm1 = new Vue({ 
 el:"#root1", data:{ 
 n:1 } }) </script>
</html>

效果:
在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/226901.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号