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 相关文章推荐
javascript 读取图片文件的大小
Jun 25 Javascript
javascript在事件监听方面的兼容性小结
Apr 07 Javascript
jquery实用代码片段集合
Aug 12 Javascript
js获取控件位置以及不同浏览器中的差别介绍
Aug 08 Javascript
Select标签下拉列表二级联动级联实例代码
Feb 07 Javascript
jquery 为a标签绑定click事件示例代码
Jun 23 Javascript
Vue方法与事件处理器详解
Dec 01 Javascript
JS轮播图实现简单代码
Feb 19 Javascript
10个在JavaScript开发中常遇到的BUG
Dec 18 Javascript
layui 中select下拉change事件失效的解决方法
Sep 20 Javascript
解决vue自定义全局消息框组件问题
Nov 22 Javascript
Node.js API详解之 net模块实例分析
May 18 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
帅气的琦玉老师
2020/03/02 日漫
学习php中的正则表达式
2014/08/17 PHP
PHP合并数组的2种方法小结
2016/11/24 PHP
PHP crc32()函数讲解
2019/02/14 PHP
如何在centos8自定义目录安装php7.3
2019/11/28 PHP
Ajax执行顺序流程及回调问题分析
2012/12/10 Javascript
JS+CSS实现一个气泡提示框
2013/08/18 Javascript
jQuery 获取浏览器所在的IP地址的小例子
2013/11/08 Javascript
Enter回车切换输入焦点实现思路与代码兼容各大浏览器
2014/09/01 Javascript
js实现具有高亮显示效果的多级菜单代码
2015/09/01 Javascript
JavaScript的removeChild()函数用法详解
2015/12/27 Javascript
获取JS中网页各种高宽与位置的方法总结
2016/07/27 Javascript
Vue.js实战之通过监听滚动事件实现动态锚点
2017/04/04 Javascript
js仿微信抢红包功能
2020/09/25 Javascript
JS中图片压缩的方法小结
2017/11/14 Javascript
javascript实现blob加密视频源地址的方法
2019/08/08 Javascript
vue实现的封装全局filter并统一管理操作示例
2020/02/02 Javascript
Sublime Text3 配置 NodeJs 环境的方法
2020/05/20 NodeJs
jQuery实现B2B网站后台管理系统侧导航
2020/07/08 jQuery
Python多进程同步简单实现代码
2016/04/27 Python
python opencv 图像尺寸变换方法
2018/04/02 Python
python实现将读入的多维list转为一维list的方法
2018/06/28 Python
python 定时任务去检测服务器端口是否通的实例
2019/01/26 Python
基于Python实现下载网易音乐代码实例
2020/08/10 Python
css3学习之2D转换功能详解
2016/12/23 HTML / CSS
德国BA保镖药房韩文网:kr.ba.de
2017/09/04 全球购物
英国领先的电子、技术和办公用品购物网站:Ebuyer
2018/04/04 全球购物
智能电子应届生求职信
2013/11/10 职场文书
幼儿园毕业寄语
2014/04/03 职场文书
企业年度评优方案
2014/06/02 职场文书
三十年同学聚会感言
2015/07/30 职场文书
如何让2019年上半年的工作总结更出色!
2019/07/01 职场文书
关于Javascript闭包与应用的详解
2021/04/22 Javascript
Mysql数据库手动及定时备份步骤
2021/11/07 MySQL
Win11怎么修改电源模式?Win11修改电源模式的方法
2022/04/05 数码科技
使用Nginx+Tomcat实现负载均衡的全过程
2022/05/30 Servers