Vue自定义指令写法与个人理解


Posted in Javascript onFebruary 09, 2019

什么是Vue指令?

指令是一种可以附加到DOM元素的微命令(tiny commands). 它们通常以"v-"作为前缀, 以方便Vue知道你在使用一种特殊的标记, 从而确保语法的一致性. 如果你需要对HTML元素的低级别(low-level)访问来控制一些行为, 它们通常很有用.

如果你正在使用Vue(或者Angular), 你可能已经很熟悉其中的一些指令, 如: v-if, v-else等等. 我们将从了解一些基础开始, 但是如果你更愿意直接看例子, 请直接往下滚动. 这些例子也能很好的让你理解这些概念.

以下是一些指令的使用方法, 以及对应的例子片段. 这些例子不是规定性的, 它们只是一些用例. 这里的"例子"实际上是"指令".

v-example: 这将实例化一个指令, 但不接受任何参数. 虽然不带参数的指令, 在使用的过程中并不是很灵活, 但是你仍然可以通过这种类型的指令对DOM元素做一些操作.

v-example="value": 这将传递一个值给指令, 并且该指令根据该值计算出要做的操作.

<div v-if="stateExample">I will show up if stateExample is true</div>

v-example="'string'": 这将让你把'string'作为一个表达式.

<p v-html="'<strong>this is an example of a string in some text</strong>'"></p>

v-example:arg="value": 这允许我们传入一个参数给指令. 下面的例子中, 我们绑定到一个类, 将其样式化为一个对象, 单独存储.

<div v-bind:class="someClassObject"></div>

v-example:arg.modifier="value": 这允许我们使用修饰语. 下面的例子中, 允许我们在点击事件时, 调用preventDefault().

<button v-on:submit.prevent="onSubmit"></button>

理解Vue自定义指令

既然我们已经大致过了一遍所有的我们所用过的指令类型方法, 让我们想一想我们如何通过自己编写的自定义指令来实现它们? 使用自定义指令的一个很好的例子是滚动事件, 让我们看看如何实现它.

首先, 最基本的是如何创建一个全局的指令. (是的, 它什么也不做.) 仅仅是创建了一个指令.

Vue.directive('tack');

HTML:

<p v-tack>This element has a directive on it</p>

我们有几个可用的钩子, 每个钩子可以选择一些参数. 钩子如下:

bind: 一旦指令附加到元素时触发
inserted: 一旦元素被添加到父元素时触发
update: 每当元素本身更新(但是子元素还未更新)时触发
componentUpdate: 每单组件和子组件被更新时触发
unbind: 一旦指令被移除时触发

就个人而言, bind和update也许是这五个里面最有用的两个钩子了.
每个钩子都有el, binding, 和vnode参数可用. update和componentUpdated钩子还暴露了oldVnode, 以区分传递的旧值和较新的值.

el, 跟你所期待的一样, 就是所绑定的元素. binding是一个保护传入钩子的参数的对象. 有很多可用的参数, 包括name, value, oldValue, expression, arguments, arg及修饰语. vnode有一个更不寻常的用例, 它可用于你需要直接引用到虚拟DOM中的节点. binding和vnode都应该被视为只读.

绑定一个自定义指令

既然我们已经知道了这一点, 就可以开始研究如何在实际中使用一个自定义指令. 让我们完善刚才所创建的第一个指令, 让它变得有用:

Vue.directive('tack', {
  bind(el, binding, vnode) {
    el.style.position = 'fixed'
  }
});

在HTML元素中:

<p v-tack>I will now be tacked onto the page</p>

毫无疑问, 它完全可以按照我们所希望的工作. 但是它还不够灵活, 如果我们可以传入一个值, 然后直接更新或者重用这个指令就好了. 例如, 我们想为这个元素指定一个值, 表示这个元素离顶部多远(多少个像素), 我们可以这样写(在CODEPEN上查看):

// JS
Vue.directive('tack', {
  bind(el, binding, vnode){
    el.style.position = 'fixed';
    el.style.top = binding.value + 'px';
  }
});

// HTML
<div id="app">
  <p>Scroll down the page</p>
  <p v-tack="70">Stick me 70px from the top of the page</p>
</div>

假设我们想要区分从顶部或者左侧偏移70px, 我们可以通过传递一个参数来做到这一点(在CODEPEN上查看):

// JS
Vue.directive('tack', {
  bind(el, binding, vnode) {
    el.style.position = 'fixed';
    const s = (binding.arg === 'left' ? 'left' : 'top');
    el.style[s] = binding.value + 'px';
  }
});

// HTML
<p v-tack:left="70">I'll now be offset from the left instead of the top</p>

当然, 你可以同时传入不止一个值. 你可以像使用标准指令一样简单的使用自定义指令(在CODEPEN上查看):

// JS
Vue.directive('tack', {
  bind(el, binding, vnode) {
    el.style.position = 'fixed';
    el.style.top = binding.value.top + 'px';
    el.style.left = binding.value.left + 'px';
  }
});

// HTML
<p v-tack="{top: '40', left: '100'}">Stick me 40px from the top of the page and 100px from the left of the page</p>

基于我们的自定义指令, 我们可以创建和修改方法, 从而创建更为复杂的自定义指令. 这里, 我们将做一个waypoints-like例子, 用少量的代码实现特定滚动事件触发的动画效果(在CODEPEN上查看):

// JS
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;
    }
  }
});

// HTML
<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>

为了让大家看得更清楚, 在这个代码片段中, 我们尽可能的保证它的简单易读. 在实际的APP中, 你可以构建非常友好的, 并且非常灵活的, 适合整个团队使用的自定义指令.

在实际的构建中, 我会将指令代码放在"main.js"文件中, 该文件位于"src"目录的根目录下(如果你使用的是Vue-cli构建工具), 那么"App.vue"以及组件目录中的所有的.vue文件都可以访问它. 当然, 还要其他方法可以使用它, 但是我发现对于整个应用程序来说, 这是最灵活的实现方式.

以上就是个人对Vue自定义指令的理解,希望对大家有所帮助

Javascript 相关文章推荐
splice slice区别
Oct 09 Javascript
JS仿flash上传头像效果实现代码
Jul 18 Javascript
jQuery jcrop插件截图使用方法
Nov 20 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
Jul 23 Javascript
Lua表达式和控制结构学习笔记
Dec 15 Javascript
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
Mar 12 Javascript
详解webpack提取第三方库的正确姿势
Dec 22 Javascript
vuedraggable+element ui实现页面控件拖拽排序效果
Jul 29 Javascript
vue基于两个计算属性实现选中和全选功能示例
Feb 08 Javascript
一百行JS代码实现一个校验工具
Apr 30 Javascript
jQuery实现的记住帐号密码功能完整示例
Aug 03 jQuery
微信小程序左右滚动公告栏效果代码实例
Sep 16 Javascript
Vue指令指令大全
Feb 09 #Javascript
vue基于两个计算属性实现选中和全选功能示例
Feb 08 #Javascript
vue计算属性get和set用法示例
Feb 08 #Javascript
vue多次循环操作示例
Feb 08 #Javascript
JS散列表碰撞处理、开链法、HashTable散列示例
Feb 08 #Javascript
ES6 对象的新功能与解构赋值介绍
Feb 05 #Javascript
Vue从TodoList中学父子组件通信
Feb 05 #Javascript
You might like
php使用array_rand()函数从数组中随机选择一个或多个元素
2014/04/28 PHP
PHP函数积累总结
2019/03/19 PHP
javascript 随机展示头像实现代码
2011/12/06 Javascript
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
2014/08/04 Javascript
JavaScript的事件代理和委托实例分析
2015/03/25 Javascript
js实现鼠标滑过文字链接色彩变化的效果
2015/05/06 Javascript
jQuery实现带延迟的二级tab切换下拉列表效果
2015/09/01 Javascript
javascript 数组的定义和数组的长度
2016/06/07 Javascript
JS面试题---关于算法台阶的问题
2016/07/26 Javascript
JavaScript 函数模式详解及示例
2016/09/07 Javascript
JS函数修改html的元素内容,及修改属性内容的方法
2016/10/28 Javascript
javascript 定时器工作原理分析
2016/12/03 Javascript
vue.js单页面应用实例的简单实现
2017/04/10 Javascript
JS设置随机出现2个数字的实例代码
2017/07/19 Javascript
浅谈react受控组件与非受控组件(小结)
2018/02/09 Javascript
微信小程序实现滑动翻页效果(完整代码)
2019/12/06 Javascript
jQuery实现验证用户登录
2019/12/10 jQuery
vue实现图片上传预览功能
2019/12/23 Javascript
Vue+Element实现网页版个人简历系统(推荐)
2019/12/31 Javascript
JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析
2020/03/02 Javascript
python中list常用操作实例详解
2015/06/03 Python
Python贪吃蛇游戏编写代码
2020/10/26 Python
Python 中pandas.read_excel详细介绍
2017/06/23 Python
使用PyTorch训练一个图像分类器实例
2020/01/08 Python
Django如何使用asyncio协程和ThreadPoolExecutor多线程
2020/10/12 Python
html5简介_动力节点Java学院整理
2017/07/07 HTML / CSS
夏威夷咖啡公司:Hawaii Coffee Company
2019/09/19 全球购物
路德维希•贝克(LUDWIG BECK)中文官网:德国大型美妆百货
2020/09/19 全球购物
营销与策划专业毕业生求职信
2013/11/01 职场文书
教育专业个人求职信
2013/12/02 职场文书
工程采购员岗位职责
2014/03/09 职场文书
人事行政经理岗位职责
2014/06/18 职场文书
中共广东省委常委会党的群众路线教育实践活动整改方案
2014/09/23 职场文书
2015年中学团委工作总结
2015/07/22 职场文书
大学毕业生自我鉴定范文
2019/06/21 职场文书
nginx反向代理配置去除前缀案例教程
2021/07/26 Servers