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 相关文章推荐
prototype 1.5 &amp; scriptaculous 1.6.1 学习笔记
Sep 07 Javascript
javascript Select标记中options操作方法集合
Oct 22 Javascript
基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
Sep 02 Javascript
jquery offset函数应用实例
Nov 14 Javascript
jQuery控制iFrame(实例代码)
Nov 19 Javascript
JQuery球队选择实例
May 18 Javascript
jquery.validate使用时遇到的问题
May 25 Javascript
JavaScript脚本判断蜘蛛来源的方法
Sep 22 Javascript
详解使用Typescript开发node.js项目(简单的环境配置)
Oct 09 Javascript
Next.js实现react服务器端渲染的方法示例
Jan 06 Javascript
ES6基础之解构赋值(destructuring assignment)
Feb 21 Javascript
JS面向对象之单选框实现
Jan 17 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
PHP4实际应用经验篇(2)
2006/10/09 PHP
Linux fgetcsv取得的数组元素为空字符串的解决方法
2011/11/25 PHP
javascript 实现 秒杀,团购 倒计时展示的记录 分享
2013/07/12 Javascript
使用js修改客户端注册表的方法
2013/08/09 Javascript
js对象内部访问this修饰的成员函数示例
2014/04/27 Javascript
jQuery实现contains方法不区分大小写的方法
2015/02/13 Javascript
jQuery实现文本展开收缩特效
2015/06/03 Javascript
JavaScript合并两个数组并去除重复项的方法
2015/06/13 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
2016/01/26 Javascript
微信小程序 图片加载(本地,网路)实例详解
2017/03/10 Javascript
JavaScript使用readAsDataURL读取图像文件
2017/05/10 Javascript
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
2018/09/14 Javascript
JavaScript常用数组操作方法,包含ES6方法
2020/05/10 Javascript
[28:57]EG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/16 DOTA
python算法学习之桶排序算法实例(分块排序)
2013/12/18 Python
python发布模块的步骤分享
2014/02/21 Python
Python中解析JSON并同时进行自定义编码处理实例
2015/02/08 Python
解析Mac OS下部署Pyhton的Django框架项目的过程
2016/05/03 Python
对pytorch网络层结构的数组化详解
2018/12/08 Python
python执行scp命令拷贝文件及文件夹到远程主机的目录方法
2019/07/08 Python
基于torch.where和布尔索引的速度比较
2020/01/02 Python
Python list运算操作代码实例解析
2020/01/20 Python
Python 操作 PostgreSQL 数据库示例【连接、增删改查等】
2020/04/21 Python
Python3.9新特性详解
2020/10/10 Python
用pip给python安装matplotlib库的详细教程
2021/02/24 Python
六十大寿答谢词
2014/01/12 职场文书
司机检讨书
2014/02/13 职场文书
共产党员公开承诺书范文
2014/03/28 职场文书
煤矿安全演讲稿
2014/05/09 职场文书
村创先争优活动总结
2014/08/28 职场文书
党的群众路线教育实践活动学习计划
2014/11/03 职场文书
2015年教师节贺卡寄语
2015/03/24 职场文书
入党培养人考察意见
2015/06/08 职场文书
python实现简单的名片管理系统
2021/04/26 Python
如何在向量化NumPy数组上进行移动窗口
2021/05/18 Python
Golang 对es的操作实例
2022/04/20 Golang