标签：function 10 vue name 自定义 el binding 指令 id
1、对于vue来说，它有一个很强大得功能，就是指令系统
v-bind-->:
v-on-->@
v-if、v-for、v-model
2、自定义指令
通过自定义指令来完成对DOM得更多操作，并且可以在不同得场景下给我们提供很方便得操作
全局指令：放到任何一个组件中都可以使用（需要把全局指令放在入口文件中来设置，这样得话每一个组件中都可以进行使用了）
directive方法进行指令得声明，这个方法是vue上的
Vue.directive(指令名，实现得方式)
如果需要多个自定义指令直接使用directive方法即可
局部指令：只能在当前得vue实例中使用
directives：{
指令名：{
钩子函数： function(el){}
}
}
el:代表得也是当前操作对象
3、钩子函数：
inserted:只有有父节点得时候这个指令才能生效，
el：第一个参数，代表得是操作当前指令对象
4、钩子函数得参数：
el：第一个参数，代表得是操作当前指令对象
binding:绑定对象
name：指令名字
value：指令所绑定得值
oldValue：前一个值
expression：绑定得值是字符串
arg：给指令传的参数
modifiers：修饰对象得
vnode：编译生成得虚拟节点
oldVnode：上一个虚拟节点（只能在update和componentUpdated两个钩子函数中使用）
5、把常用得效果通过指令进行封装，用得时候直接通过指令名称进行调用就行了
<template> <div id='app'> ID:<input type="text" v-model="id" v-focus><br> Name:<input type="text" v-model="name"><br> <button type="button" @click="add" v-color>添加</button> <transition-group tag="ul" name="fade"> // transition 与 事件结合 <li v-for="(item,index) in list" :key="item.id" @click="del(index)"> id:{{item.id}} ,name{{item.name}} </li> </transition-group>
<!-- <div v-test-directive:xixi.a="msg"></div> --> <div v-test-directive:xixi.a="{name:'lili'}"></div>
<ul> <li>首页</li> <li v-dropDown>公司介绍 <ul> <li>苹果</li> <li>苹果</li> <li>苹果</li> </ul> </li> <li v-dropDown>公司介绍 <ul> <li>苹果</li> <li>苹果</li> <li>苹果</li> </ul> </li> </ul> </div> </template>
<script> import $ from "jquery" export default { name: 'App', data(){ return { id:'', name:'', list: [{id:1,name:'lili'},{id:2,name:'jurey'}], msg:"我是msg", show:false } }, methods: { add() { this.list.push({id:this.id,name:this.name}) this.id='' this.name='' }, del (i) { this.list.splice(i,1) } }, directives :{ 'color':{ inserted:function(el){ el.style.color='#0f0' } }, 'test-directive':{ bind:function(el,binding){ el.innerHTML= "name:" + binding.name +"value:"+binding.value.name +'<br>'+ binding.expression+ '<br>'+'arg:'+binding.arg +'<br>'+JSON.stringify(binding.modifiers) } }, 'dropDown' : { inserted :function (el) { function down(){ $(el).children('ul').slideDown() } function upp (){ $(el).children('ul').slideUp() } el.addEventListener('mouseenter',down) el.addEventListener('mouseleave',upp) } } }
}
</script>
<style> #app{ font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } li{ background: skyblue; width: 800px; /* height: 20px; */ line-height: 20px; margin: 5px; } li:hover{ background: #f99; } .fade-enter,.fade-leave-to{ opacity: 0; transform: translateY(30px); } .fade-leave-active,.fade-enter-active{ transition:1s; } .fade-move{ transition: 2s; } li ul{ display: none; } /* .fade-leave-active{ position: absolute; } */ </style>
标签：function,10,vue,name,自定义,el,binding,指令,id 来源： https://www.cnblogs.com/taozhibin/p/13160598.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。