如何写一个vue指令directive

举个例子：clickoutside.js

const clickoutsideContext = '@@clickoutsideContext';export default {/*@param el 指令所绑定的元素@param binding {Object} @param vnode vue编译生成的虚拟节点*/bind (el, binding, vnode) {const documentHandler = function(e) {console.log(el)console.log(e.target);console.log(vnode);console.log(binding);if(!vnode.context || el.contains(e.target)) {return false;}if (binding.expression) {vnode.context[el[clickoutsideContext].methodName](e)} else {el[clickoutsideContext].bindingFn(e);}}el[clickoutsideContext] = {documentHandler,methodName: binding.expression,bindingFn: binding.value}setTimeout(() => {document.addEventListener('click', documentHandler);}, 0)},update (el, binding) {el[clickoutsideContext].methodName = binding.expression;el[clickoutsideContext].bindingFn = binding.value;},unbind(el) {document.removeEventListener('click', el[clickoutsideContext].documentHandler);}
}

directive是怎么实现的呢?

1、在binding中写绑定方法

2、方法需要写在一个环境（context）中，放置泄露

如上定义了：el[clickoutsideContext]

转载于:https://www.cnblogs.com/heyinwangchuan/p/8052211.html

如何写一个vue指令directive相关推荐

如何写一个Vue自定义指令
Vue除了核心功能默认内置的指令 ,Vue 也允许注册自定义指令. 自定义指令是用来操作DOM的.尽管Vue推崇数据驱动视图的理念,但并非所有情况都适合数据驱动.自定义指令就是一种有效的补充和扩展,不 ...
面试题：你能写一个Vue的双向数据绑定吗？
在目前的前端面试中,vue的双向数据绑定已经成为了一个非常容易考到的点,即使不能当场写出来,至少也要能说出原理.本篇文章中我将会仿照vue写一个双向数据绑定的实例,名字就叫myVue吧.结合注释,希望 ...
面试题：你能写一个 Vue 的双向数据绑定吗？
作者:呆头呆脑丶 segmentfault.com/a/1190000014274840 在目前的前端面试中,vue的双向数据绑定已经成为了一个非常容易考到的点,即使不能当场写出来,至少也要能说出原理 ...
写一个Vue的双向数据绑定
原文 https://segmentfault.com/a/1190000014274840 在目前的前端面试中,vue的双向数据绑定已经成为了一个非常容易考到的点,即使不能当场写出来,至少也要能说出 ...
你能写一个 Vue 的双向数据绑定吗？
在目前的前端面试中,vue的双向数据绑定已经成为了一个非常容易考到的点,即使不能当场写出来,至少也要能说出原理.本篇文章中我将会仿照vue写一个双向数据绑定的实例,名字就叫myVue吧.结合注释,希望 ...
手写一个vue中英文翻译组件
1:下载vue-i18n插件 npm install vue-i18n 2:创建中英文js文件在文件中写入需要翻译的内容中文版cn.js export const m = {help: " ...
分享:你会写一个vue的双向数据绑定吗？
<!DOCTYPE html> <html> <head><title></title> </head> <body> ...
写一个简单易用可扩展vue表单验证插件(vue-validate-easy)
写一个vue表单验证插件(vue-validate-easy) 需求目标:简单易用可扩展如何简单开发者要做的写了一个表单,指定一个name,指定其验证规则. 调用提交表单方法,可以获取验证成功 ...
vue从入门到进阶：自定义指令directive，插件的封装以及混合mixins（七）
一.自定义指令directive 除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件.然而,有的 ...

如何写一个vue指令directive

如何写一个vue指令directive相关推荐

最新文章

热门文章