精华内容
下载资源
问答
  • Vue自定义属性

    2021-07-30 14:05:30
    一、定义语法: (1).局部指令: newVue({ directives:{指令名:配置对象} }) 或者 newVue( ...

          一、定义语法:

                            (1).局部指令:

                                new Vue({

                                    directives:{ 指令名:配置对象 } 

                                })

                                或者

                                new Vue(    

                                    directives{ 指令名:回调函数 }

                                })

                            (2).全局指令:

                                Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数)

                        二、配置对象中常用的3个回调:

                            (1).bind:指令与元素成功绑定时调用。

                            (2).inserted:指令所在元素被插入页面时调用。

                            (3).update:指令所在模板结构被重新解析时调用。

                        三、备注:

                            1.指令定义时不加v-,但使用时要加v-;

                            2.指令名如果是多个单词,要使用kebab-case命名方式,不要用camelCase命名。

    下面通过一个例子来演示

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

                    需求2:定义一个v-fbind指令,和v-bind功能类似,但可以让其所绑定的input元素默认获取焦点。

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8" />
    		<title>自定义指令</title>
    		<script type="text/javascript" src="../js/vue.js"></script>
    	</head>
    	<body>
    		<!-- 准备好一个容器-->
    		<div id="root">
    			<h2>当前的n值是:<span v-text="n"></span> </h2>
                <!--  指令如果是多个单词 用-横线分隔 -->
    			<!-- <h2>放大10倍后的n值是:<span v-big-number="n"></span> </h2> -->
    			<h2>放大10倍后的n值是:<span v-big="n"></span> </h2>
    			<button @click="n++">点我n+1</button>
    			<hr/>
    			<input type="text" v-fbind:value="n">
    		</div>
    	</body>
    	
    	<script type="text/javascript">
    		Vue.config.productionTip = false
    
    		//定义全局指令
    		/* Vue.directive('fbind',{
    			//指令与元素成功绑定时(一上来)
    			bind(element,binding){
    				element.value = binding.value
    			},
    			//指令所在元素被插入页面时
    			inserted(element,binding){
    				element.focus()
    			},
    			//指令所在的模板被重新解析时
    			update(element,binding){
    				element.value = binding.value
    			}
    		}) */
    
    		new Vue({
    			el:'#root',
    			data:{
    				n:1
    			},
    			directives:{
    				//big函数何时会被调用?1.指令与元素成功绑定时(一上来)。2.指令所在的模板被重新解析时。
                    // 指令如果是多个单词 用-横线分隔
    				/* 'big-number'(element,binding){
    					// console.log('big')
    					element.innerText = binding.value * 10
    				}, */
    				big(element,binding){
    					console.log('big',this) //注意此处的this是window
    					// console.log('big')
    					element.innerText = binding.value * 10
    				},
    				fbind:{
    					//指令与元素成功绑定时(一上来)
    					bind(element,binding){
    						element.value = binding.value
    					},
    					//指令所在元素被插入页面时
    					inserted(element,binding){
    						element.focus()
    					},
    					//指令所在的模板被重新解析时
    					update(element,binding){
    						element.value = binding.value
    					}
    				}
    			}
    		})
    		
    	</script>
    </html>

    展开全文
  • vue自定义属性props

    2021-09-24 18:08:10
    props是自定义属性,允许使用者通过自定义属性,为当前组件指定初始值。自定义属性的名字是自己定义的(只要名字合法) props是只读的,不可修改 props:{ //自定义属性A: {/* 配置选项*/} //自定义属性B: {/* 配置...

    props是自定义属性,允许使用者通过自定义属性,为当前组件指定初始值。自定义属性的名字是自己定义的(只要名字合法)

    props是只读的,不可修改

    props:{
    	//自定义属性A: {/* 配置选项*/}
    	//自定义属性B: {/* 配置选项*/}
    	//自定义属性C: {/* 配置选项*/}
    	init:{
    		//如果外界使用这个组件时 没有传递init属性 则默认值为0
    		default:0,
    		//init的值类型必须为Number类型  否则报错
    		type:Number,
    		//表示使用这个组件时 必须有init属性
    		required:true
        	}
    }
    
    展开全文
  • vue 获取自定义属性

    2021-04-06 16:19:42
    vue 获取自定义属性值的跟触发事件的属性 <div class="ku-menu-item-group" :data-route="item.route" @click="toRoute"> <i class="el-icon-menu"></i> <span class="ku-menu-collapse">...

    vue 获取自定义属性值

      <div class="ku-menu-item-group" :data-route="item.route" @click="toRoute">
           <i class="el-icon-menu"></i>
           <span class="ku-menu-collapse"><i class="el-icon-arrow-right"></i></span>
      </div>
    

    说明:data-route 为自定义属性

     // 方法集合
        methods: {
          toRoute: function (e) {
            let route = e.currentTarget.getAttribute("data-route")
            console.log(route);
          }
        }
    
    展开全文
  • 全局指令使用 Vue 对象下的 directive 方法定义,局部指令在 Vue 实例中设置 directives 属性。 如下代码所示: // 注册为全局指令 Vue.directive('focus', { inserted: function (el) { // 获取焦点事件 el....

    自定义指令

    Vue 自带的指令无法满足开发需求,这时需要自定义一些指令。指令可以注册为全局指令或者局部指令。全局指令使用 Vue 对象下的 directive 方法定义,局部指令在 Vue 实例中设置 directives 属性。

    如下代码所示:

    // 注册为全局指令
    Vue.directive('focus', {
        inserted: function (el) {
            // 获取焦点事件
            el.focus()
        }
    })
    
    // 注册为局部指令
    let vm = new Vue({
        el: '.container',
        directives: {
            focus: {
                inserted: function (el) {
                    // 调用触发该指令元素的 focus 属性,获取焦点
                    el.focus()
                }
            }
        }
    })
    

    在定义指令时无需使用 v- 作为前缀,在调用指令时,需要添加 v- 前缀

    有参数的自定义指令

    如果自定义的指令中需要传递参数,那么在 inserted 后面函数的形参中设置多个值,其中第一个值为绑定该指令的元素,第二个值为传递的参数。若想要获取第二个参数中的值,需要调用该参数的 value 属性,如下代码所示:

    Vue.directive('bg_color', {
        // 函数中接收两个参数,第一个参数为触发该指令的元素,第二个参数为该指令中传递的参数
        inserted: function (el, obj) {
            // 使用元素的 style 为其设置样式
          	// 通过形参的 value 属性来获取形参真正的值
            el.style.backgroundColor = obj.value.color
        }
    })
    let vm = new Vue({
        el: '.container',
        data: {
            data: { color: "red" }
        }
    })
    
    <div class="container">
        <div v-bg_color='data'></div>
    </div>
    

    需要注意,在 JS 部分,如果想要获取参数真正的值,需要调用 value 属性,因为渲染时,传来的形参是一个对象,如果不调用 value 结果如下:
    在这里插入图片描述
    由结果可见,渲染时传来的形参是一个对象,里面的 value 属性才是真正传递的值。

    计算属性

    Vue 的编程方式为声明式编程,如果所有逻辑都写在表达式中,会让模板难以维护。对于任何较为复杂的逻辑都应该使用 计算属性

    如果要设置计算属性,需要在 Vue 实例中使用 computed 属性,该属性为一个对象,对象中直接声明相应的函数。使用该属性时,直接调用该函数即可,调用函数时只写函数名即可。如下代码所示:

    <div class="container">
        <p>{{ msg }}</p>
      	<!-- 直接调用方法 -->
        <p>{{ reversedMessage }}</p>
    </div>
    
    let vm = new Vue({
        el: '.container',
        data: {
            msg: 'Hello'
        },
        // 如果要设置计算属性,需要设置 computed 属性
        computed: {
            // 反转字符串
            reversedMessage: function () {
                this.msg = this.msg.split('').reverse().join('')
            }
        }
    })
    

    计算属性和方法的区别

    计算方法:

    使用计算属性来进行操作时会进行缓存;使用方法进行操作时不会缓存得到的结果。对于一些大型计算来说,使用计算属性可以有效的节省性能。如下代码所示:

    <div class="container">
        <!-- 调用方法和调用计算属性的区别是:调用方法时,需要加 () -->
        <p>{{ reversedMessage() }}</p>
      	<p>{{ reversedMessage() }}</p>
    </div>
    
    let vm = new Vue({
        el: '.container',
        data: {
            msg: 'Hello'
        },
        methods: {
            reversedMessage: function () {
              	console.log('调用了')
                return this.msg.split('').reverse().join('')
            }
        }
    })
    

    上面代码中调用了两次方法,每调用一次方法会打印一次调用了。浏览器控制台中结果如下:

    调用了
    调用了
    

    计算属性:

    <div class="container">
      	<!-- 调用两次 -->
        <p>{{ reversedMessage }}</p>
      	<p>{{ reversedMessage }}</p>
    </div>
    
    let vm = new Vue({
        el: '.container',
        data: {
            msg: 'Hello'
        },
        // 如果要设置计算属性,需要设置 computed 属性
        computed: {
            // 反转字符串
            reversedMessage: function () {
              	console.log('调用了')
                this.msg = this.msg.split('').reverse().join('')
            }
        }
    })
    

    浏览器控制台中结果如下:

    调用了
    
    展开全文
  • vue 中规定:组件的后缀名是 .vue。 App.vue 文件 本质上就是一个 vue 的组件。 二、vue 组件的三个组成部分 每个 .vue 组件都由 3 部分构成,分别是: template -----组件的模板结构 ...
  • 组件的使用 设置私有组件 根组件使用子组件的方式。 在跟组件中使用 impor 导入之后定义的名字 ...首先在main.js中导入要设置的全局组件,在使用vue.component()方法。 import '导入之后的设置的组件名' from '设置
  • 获取自定义属性的方法:第一步:首先在标签上绑定上@click="getDateId(item.id)",并将属性值传到绑定的事件里面第二步:在标签上继续绑定:date-id = "item.id"属性第三步:在里面的属性methods里面添写上事件函数 ...
  • 定义在data平级添加attrName,获取this.$options.attrName 这是我的idea用法,不知道大家有没有更好的方法 因为在使用混入mixins时候,从各个模块导入的api 不同,但功能类似 想要实现不同模块挂上各自不同接口 ...
  • 这篇文章主要为大家详细介绍了vue.js 获取当前自定义属性值,具有一定的参考价值,可以用来参考一下。感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧!假设有一个标签h5, 我们给它添加了一个自定义属性值...
  • 我们在vue中有时候为给标签加一些特有的属性, 当我们在标签上触发了事件之后, 就可以在 event 对象上面获取 标签的写法 <div class="menu-item" @click="clickMenu('参数一',$event)" :data-mytype="1"> &...
  • vue传值(自定义事件、属性、EventBus)
  • Vue.js 自定义指令

    2020-12-31 09:18:59
    添加一个自定义指令,有两种方式:通过 Vue.directive() 函数注册一个全局的指令。通过组件的 directives 属性,对该组件添加一个局部的指令。创建全局指令:需要传入指令名称以及一个包含指令钩子函数的对象,该...
  • Vue,除了核心功能默认内置的指令 ( v-model 和 v-show ),Vue 也允许注册自定义指令。它的作用价值在于当开发人员在某些场景下需要对普通 DOM 元素进行操作。Vue 自定义指令有全局注册和局部注册两种方式。先来...
  • },2000) } } } 以上所述是小编给大家介绍的vue如何获取自定义元素属性参数值的方法详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持! ...
  • 因为 vue-loader 并不知道我们要把 v-img 的 src 属性转换成 require() 依赖。我们找到 vue-loader 配置处,在 options.transformToRequire 中加上 v-img 即可 // vuetify 框架的 src 标签也需要自动转换为 require ...
  • ue全局和局部自定义属性v-xxx 一局部自定义属性v-xxx <template> <div class="container"> <h1>局部:自定义指令</h1> <!-- 局部自定义指令 --> <input type="text" v-aaa=...
  • 2. 父组件使用v-model绑定,子组件props接收参数,参数名称可以自定义,$emit触发方法传值,方法名称可以 自定义,通过model属性将prop参数名和事件名进行关联 3. 父组件使用:name.sync绑定,子组件props接收参数...
  • directives.js: export default { // 操作权限控制 ... const types = vnode.context.$route.meta.types//获取router中各个路由上定义的types属性 const values = binding.value let flag = true for
  • 但是,我需要在此包装器旁边包含一个包含自定义属性的组件 . 就在那时我发现该组件上的属性从未被读入 .index.htmlTestItem.vue{{ testProp }}export default {props: {testProp: {type: String,default: "Default ...
  • Vue 获取自定义属性的值

    千次阅读 2021-03-07 07:24:35
    在jquery中,如果要获取 data-***的值可以通过$('目标元素').data('属性名')来获取。在Vue中如何获取该值呢?1.换个思路,作为参数传递。如下代码:say himethods: {say(message){console.log(message)}}2.通过e....
  • vue自定义指令节流

    2021-09-23 10:05:02
    vue自定义指令节流节流在日常的按钮点击事件中很常见,这里简单封装了一个vue的自定义指令在src目录下新建utils目录,在里面新建preventRepeatClick.js![在这里插入图片描述]...
  • Vue自定义项目的创建

    2021-07-21 15:47:34
    All Right 这里是Vue自定义项目创建 话不多说 主要有如下的几步。这里默认你已经装完脚手架啥的。 1.在命令行中输入 vue create 项目名 我这里是test 2.进入如下页面,你要选择的是第三个那个自定义Manually select...
  • 带参数的自定义指令创建的语法(改变元素背景色) Vue.directive('color',{ inserted:function(el,binding){ //binding表示传递过来的参数 el.style.backgroundColor=binding.value.color; } }) 指令的用法 ...
  • Vue自定义指令及使用

    2021-11-10 23:28:31
    vue 中提供了一些对于页面和数据更为方便的输出,这些操作就叫做指令,以 v-xxx 表示,比如 html 页面中的属性<div v-xxx /div> 比如在 angular 中 以 ng-xxx 开头的就叫做指令 指令中封装了一些 DOM 行为...
  • Vue.component("hello-component", { props: ["message"], template: "<div ><h1>组件定义之全局组件</h1><h4>{{message}}</h4></div>" }); 使用: <hello-component ...
  • Vue 自定义指令如何使用 自定义指令分为全局自定义指令和局部自定义指令: 全局自定义指令: 使用 Vue.directive()来全局注册指令 局部自定义指令: 也可以注册局部指令,组件或 Vue 构造函数中接受一个 directives 的...
  • 这时候我们就可以将这些重复代码封装成一个组件,以后在使用的时候只需要写上自定义组件的标签即可直接调用。 如何使用 一般用脚手架开发项目,每个 .vue单文件就是一个组件,一般都是存放在components文件夹下面 在...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 68,872
精华内容 27,548
关键字:

vue自定义属性

vue 订阅
友情链接: codebuilder_11qyx8.zip