-
自定义指令使用场景
2020-09-20 22:11:36使用自定义指令背景 代码复用和抽象的主要形式是组件。 当需要对普通 DOM 元素进行底层操作,此时就会用到自定义指令 但是,对于大幅度的 DOM 变动,还是应该使用组件 常用案例 1、 输入框自动聚焦 // 注册一个...使用自定义指令背景
- 代码复用和抽象的主要形式是组件。
- 当需要对普通 DOM 元素进行底层操作,此时就会用到自定义指令
- 但是,对于大幅度的 DOM 变动,还是应该使用组件
常用案例
1、 输入框自动聚焦
// 注册一个全局自定义指令 `v-focus` Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时 inserted: function (el) { // 聚焦元素 el.focus() } }) <input v-focus> 123456789
2 下拉菜单
点击下拉菜单本身不会隐藏菜单
点击下拉菜单以外的区域隐藏菜单Vue.directive('clickoutside', { bind(el, binding) { function documentHandler(e) { if (el.contains(e.target)) { return false } if (binding.expression) { binding.value(e) } } el.__vueMenuHandler__ = documentHandler document.addEventListener('click', el.__vueMenuHandler__) }, unbind(el) { document.removeEventListener('click', el.__vueMenuHandler__) delete el.__vueMenuHandler__ } }) new Vue({ el: '#app', data: { show: false }, methods: { handleHide() { this.show = false } } }) <div class="main" v-menu="handleHide"> <button @click="show = !show">点击显示下拉菜单</button> <div class="dropdown" v-show="show"> <div class="item"><a href="#">选项 1</a></div> <div class="item"><a href="#">选项 2</a></div> <div class="item"><a href="#">选项 3</a></div> </div> </div> 12345678910111213141516171819202122232425262728293031323334353637383940
3. 相对时间转换
类似微博、朋友圈发布动态后的相对时间,比如刚刚、两分钟前等等
<span v-relativeTime="time"></span> new Vue({ el: '#app', data: { time: 1565753400000 } }) Vue.directive('relativeTime', { bind(el, binding) { // Time.getFormatTime() 方法,自行补充 el.innerHTML = Time.getFormatTime(binding.value) el.__timeout__ = setInterval(() => { el.innerHTML = Time.getFormatTime(binding.value) }, 6000) }, unbind(el) { clearInterval(el.innerHTML) delete el.__timeout__ } })
-
vue自定义指令使用场景
2020-09-18 18:46:19使用自定义指令场景 代码复用和抽象的主要形式是组件。 当需要对普通 DOM 元素进行底层操作,此时就会用到自定义指令 但是,对于大幅度的 DOM 变动,还是应该使用组件 常用案例 1、 输入框自动聚焦 // 注册一个...使用自定义指令场景
- 代码复用和抽象的主要形式是组件。
- 当需要对普通 DOM 元素进行底层操作,此时就会用到自定义指令
- 但是,对于大幅度的 DOM 变动,还是应该使用组件
常用案例
1、 输入框自动聚焦
// 注册一个全局自定义指令 `v-focus` Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时 inserted: function (el) { // 聚焦元素 el.focus() } }) <input v-focus>
2、下拉菜单
- 点击下拉菜单本身不会隐藏菜单
- 点击下拉菜单以外的区域隐藏菜单
Vue.directive('clickoutside', { bind(el, binding) { function documentHandler(e) { if (el.contains(e.target)) { return false } if (binding.expression) { binding.value(e) } } el.__vueMenuHandler__ = documentHandler document.addEventListener('click', el.__vueMenuHandler__) }, unbind(el) { document.removeEventListener('click', el.__vueMenuHandler__) delete el.__vueMenuHandler__ } }) new Vue({ el: '#app', data: { show: false }, methods: { handleHide() { this.show = false } } }) <div class="main" v-menu="handleHide"> <button @click="show = !show">点击显示下拉菜单</button> <div class="dropdown" v-show="show"> <div class="item"><a href="#">选项 1</a></div> <div class="item"><a href="#">选项 2</a></div> <div class="item"><a href="#">选项 3</a></div> </div> </div>
3、相对时间转换
类似微博、朋友圈发布动态后的相对时间,比如刚刚、两分钟前等等
<span v-relativeTime="time"></span> new Vue({ el: '#app', data: { time: 1565753400000 } }) Vue.directive('relativeTime', { bind(el, binding) { // Time.getFormatTime() 方法,自行补充 el.innerHTML = Time.getFormatTime(binding.value) el.__timeout__ = setInterval(() => { el.innerHTML = Time.getFormatTime(binding.value) }, 6000) }, unbind(el) { clearInterval(el.innerHTML) delete el.__timeout__ } })
4、滚动动画
<div id="app"> <h1 class="centered">Scroll me</h1> <div class="box" v-scroll="handleScroll"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A atque amet harum aut ab veritatis earum porro praesentium ut corporis. Quasi provident dolorem officia iure fugiat, eius mollitia sequi quisquam.</p> </div> </div>
Vue.directive('scroll', { inserted: function(el, binding) { let f = function(evt) { if (binding.value(evt, el)) { window.removeEventListener('scroll', f) } } window.addEventListener('scroll', f) } }) // main app new Vue({ el: '#app', methods: { handleScroll: function(evt, el) { if (window.scrollY > 50) { TweenMax.to(el, 1.5, { y: -10, opacity: 1, ease: Sine.easeOut }) } return window.scrollY > 100 } } })
body { font-family: 'Abhaya Libre', Times, serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: #000; color: #fff; overflow-x: hidden; } h1, h2, h3, h4 { font-family: 'Fira Sans', Helvetica, Arial, sans-serif; font-weight: 800; } .centered { margin: 0 auto; display: table; font-size: 60px; margin-top: 100px; } .box { border: 1px solid rgba(255, 255, 255, 0.5); padding: 8px 20px; line-height: 1.3em; opacity: 0; color: white; width: 200px; margin: 0 auto; margin-top: 30px; transform: translateZ(0); perspective: 1000px; backface-visibility: hidden; background: rgba(255, 255, 255, 0.1); } #app { height: 2000px; }
-
Vue自定义指令使用场景(权限校验)
2020-11-20 15:52:23利用自定义指令实现权限校验 // directive.js // 控制元素显示不显示 Vue.directive('premission1', function(el, obj){ // 控制 display的值即可 el.style.display = obj.value > 3? 'none': 'block'; }); /...利用自定义指令实现权限校验
// directive.js // 控制元素显示不显示 Vue.directive('premission1', function(el, obj){ // 控制 display的值即可 el.style.display = obj.value > 3? 'none': 'block'; }); // 控制元素加载不加载,需要用到钩子函数 instered Vue.directive('premission2',{ inserted(el, obj) { // 当被绑定的元素经过vue编译之后插入到 DOM 中时触发 obj.value > 3? el.parentNode.removeChild(el): null; } });
<!-- html页面部分代码 --> <h1 v-premission1='3'>我显示</h1> <h1 v-premission1='5'>我不显示</h1> <h1 v-premission2='2'>我加载</h1> <h1 v-premission2='4'>我不加载</h1>
!注意:不论是全局自定义指令,还是局部自定义指令,指令对应的函数中的this都是window,而不是当前实例 -
vue的自定义指令及使用场景
2020-04-05 00:08:49然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。 一、注册自定义指令 全局注册:(一般使用写在自定义js中,在app.vue中引用该js的方式) // 注册一个全局自定义指令 `v-...除了核心功能默认内置的指令 (
v-model
和v-show
),Vue 也允许注册自定义指令。注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件。然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。一、注册自定义指令
全局注册:(一般使用写在自定义js中,在app.vue中引用该js的方式)
// 注册一个全局自定义指令 `v-focus` Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.focus() } })
如果想注册局部指令,组件中也接受一个
directives
的选项:directives: { focus: { // 指令的定义 inserted: function (el) { el.focus() } } }
然后你可以在模板中任何元素上使用新的
v-focus
属性,如下:<input v-focus>
二、一个指令定义对象可以提供如下几个钩子函数 (均为可选):
bind
:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。(常用)inserted
:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。(常用)update
:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 。(常用)componentUpdated
:指令所在组件的 VNode 及其子 VNode 全部更新后调用。unbind
:只调用一次,指令与元素解绑时调用。
三、参数
el
:指令所绑定的元素,可以用来直接操作 DOM。binding
:一个对象,包含以下属性:
name
:指令名,不包括v-
前缀。value
:指令的绑定值,例如:v-my-directive="1 + 1"
中,绑定值为2
。oldValue
:指令绑定的前一个值,仅在update
和componentUpdated
钩子中可用。无论值是否改变都可用。expression
:字符串形式的指令表达式。例如v-my-directive="1 + 1"
中,表达式为"1 + 1"
。arg
:传给指令的参数,可选。例如v-my-directive:foo
中,参数为"foo"
modifiers
:一个包含修饰符的对象。例如:v-my-directive.foo.bar
中,修饰符对象为{ foo: true, bar: true }
。(vnode和oldVnode没用过)
-
HTML <div id="hook-arguments-example" v-demo:foo.a.b="message"></div> JS Vue.directive('demo', { bind: function (el, binding, vnode) { //第一次绑定元素时触发 var s = JSON.stringify el.innerHTML = 'name: ' + s(binding.name) + '<br>' + 'value: ' + s(binding.value) + '<br>' + 'expression: ' + s(binding.expression) + '<br>' + 'argument: ' + s(binding.arg) + '<br>' + 'modifiers: ' + s(binding.modifiers) + '<br>' + 'vnode keys: ' + Object.keys(vnode).join(', ') } }) new Vue({ el: '#hook-arguments-example', data: { message: 'hello!' } }) //显示结果: name:"demo" value:"hello" expression:"message" argument:"foo" ......
动态指令不是很了解,以后补上!
-
自定义指令,以及使用场景
2020-09-21 21:06:27vue 的自定义指令: 概述: vue 除了提供默认的内置指令,还可以允许开发人员根据实际情况自定义指令,他的作用价值在于开发人员在某些场合下需要对普通的DOM元素进行操作; 自定义指令的参数以及钩子函数 1、 ... -
Vue 中自定义指令及使用场景(directive)
2020-09-20 19:24:45有的情况下,对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。 创建自定义指令 1.创建局部指令 var app = new Vue({ el: '#app', data: { }, // 创建指令(可以多个) directives: { // 指令名称 ... -
vue的自定义指令及常用使用场景
2020-06-10 16:03:16除了核心功能morning的内置指令(v-model和v-show),也可以允许注册自定义指令 代码的复用和抽象是主要形式是组件,然而,有的情况系啊,你仍然需要对普通DOM进行底层操作 钩子函数、钩子函数参数、动态指令参数 ... -
vue 自定义指令如何使用和应用场景
2020-09-20 21:21:37自定义指令就是一种有效的补充和扩展,不仅可用于定义任何的DOM操作,并且是可复用的。 自定义指令编写的方式有2种 1、全局自定义指令 全局的指令必须要在实例化之前进行定义 Vue.directive(参数1,参数2) 参数... -
vue自定义指令的应用场景
2020-09-21 07:49:43使用自定义指令背景 代码复用和抽象的主要形式是组件。 当需要对普通 DOM 元素进行底层操作,此时就会用到自定义指令 但是,对于大幅度的 DOM 变动,还是应该使用组件 常用案例 1、 输入框自动聚焦 // 注册一个... -
vue的自定义指令
2020-11-01 16:35:02使用场景:对普通DOM 元素进行底层操作 全局自定义指令 id:指令id,definition:定义对象 Vue.directive(id,definition) 局部自定义指令:使用directives选项 自定义指令的钩子函数 钩子函数 描述 bind... -
Vue自定义指令以及自定义指令的模块化
2020-12-26 12:18:29自定义指令的使用场景就是操作基础DOM,实现功能需求。 官方文档 1.关于自定义指令的钩子函数 自定义指令的五个钩子函数都是可选的,比如 v-once 指令。 bind 指令第一次绑定到元素上;只调用一次;可以做相关... -
vue自定义指令的使用
2020-09-17 18:11:06什么是自定义指令,有哪些钩子函数及自定义指令的使用场景? 有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。 bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次...
-
华为1+X——网络系统建设与运维(中级)
-
精通编译Makefile,Nina, 从底层uboot到Android
-
项目管理工具与方法
-
iOS面试之@property
-
Galera 高可用 MySQL 集群(PXC v5.7+Hapro)
-
转载:获取屏幕的分辨率(多屏幕或者单屏幕)
-
包装e线.商业计划书【恩美路演提供】.pdf
-
华为机试 参数解析
-
联合概率、边缘概率、条件概率之间的关系&贝叶斯公式
-
PostgreSQL Logical Replication
-
零基础一小时极简以太坊智能合约开发环境搭建并开发部署
-
Temporal Graph Networks for Deep Learning on Dynamic Graphs
-
影视器材租赁平台商业计划书【恩美路演提供】.pdf
-
中央广播电视大学《组织行为学(选择题)》期末总复习资料(含答案).pdf
-
第一章网络通信基础.mht
-
CNH-M磁力泵碳化硅轴承的改进.rar
-
MySQL 备份与恢复详解(高低版本 迁移;不同字符集 相互转换;表
-
基本的js项目-源码
-
多路复用三种模型——select、poll、epoll
-
Dubbo与Zookeeper