Vue的土著指令和自定义指令实例详解

1.土著指令

　　当我开始学习Vue的时候，看官网的时候看到了“指令”两个字。我愣住了，what？指令是啥啊？后来继续往下看，像这种什么“v-for”“v-show”“v-if”都叫做指令。等到后来Vue玩的差不多了，开始写项目的时候发现，常见的指令也就那么几个，比如“v-if”“v-show”“v-model”“v-for”“v-bind”“v-on”。

　　你可以认为这是一种语法糖或者这是一种命令。在常见的这些指令中，大体的使用方法如下：

1.v-text ：string  用法：更新元素的textContent,更新部分的textContent，需要使用{{Mustache}}插值。

2.v-show：any 用法：根据表达式真假值，切换元素的 display css 属性 。

3.v-if：any  用法：表达式的真假条件渲染元素。在切换时元素以及它的数据绑定/组件被销毁并且重建。如果是<template>,并提出它的内容作为条件块。 条件变化时改指令出发过渡效果。

4.v-for :Array | Object | number | string  用法：基于源数据多次渲染元素或者模板块 语法：alias in expression。

5.v-on：Function |  Inline Statement  参数 $event( required) 修饰符。　

6.v-bind：any 类型: any (with argument)  | Object  (without argument) 参数：attrOrProp (optional) ;修饰符： .prop ---被用于绑定DOM 属性；.camel ---transform the kebab-case attribute name into camelCase .(supported since 2.1.0) 用法： 在绑定 class 和 style 特性时，支持其它类型的值。如对象和数组；在绑定prop时，子组件必须声明prop。

7.v-model ：限制<input> <select> components 。

2.自定义指令

　　　但是，仅仅靠上面的这些有时候是不够的，比如最近我司做的一个项目中，UI做了一个页面。然后我和UI在聊需求的时候，我说这个输入框吧最好给他加一个效果，弹出输入框的时候获得焦点，显示一个跳动的光标。这样用户可以更清楚的看到在哪输入。

　　达成共识之后，写功能的时候我突然发现，WTF？我这是用的Vue啊，数据驱动视图啊，总不能document.getElementById(inputid).focus()吧。

　　于是乎，我就去找文档，突然发现了一个单词directive，我去查了查这个单词的意思：

　　看了一下文档，大体意思就是，虽然吧这个v-model和v-show已经很好用了，但是总是挡不住天马行空的前端人员的骚操作，所以在有的情况下，需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。当然呢，官方的例子就是我需要的这个，当即我就get了一波新知识。

　　如同我随手写下的这个HTML，里面有一个v-focus，大概没见过，这是啥？别急，继续往下看：

　　没错，这个v-focus就是我自己定义的指令，当然啦，你也可以用除了关键字之外的单词去命名，方便自由。

　　我们来看一下这个自定义指令，相信大家对下面的这部分都明白，无非就是如果value的值等同于true，那么el就focus即获得焦点。

　　那个前面的update什么意思呢？update是更新的意思，这是一个钩子函数，即focusState更新时调用function，在调用函数时，继续判断focusState——如果真，则获得焦点；为假，一边凉快去吧。同样，我们在查看官方文档的时候，就会发现，同样的钩子函数还有：

•bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

•inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

•update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。

•componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。

•unbind：只调用一次，指令与元素解绑时调用。

利用这些操作，我们可以完成很多比较骚的套路，比如可以在加载大的图片时，可以先用纯色占位，当图片加载完成后才直接渲染出来。例如下图：

　　在这个例子中，我们调用的钩子函数是inserted，即插入父节点后触发。当图片还未加载好时，先用随机的颜色代替，等图片加载好之后，去掉背景色，替换成图片。

　　我们在此处传入的参数为el----当前的dom节点和binding-----一个对象，包含以下属性：

•def:钩子函数。

•rawName：指令的名称。

•value：向指令传入的值

　　　　同样，我们也可以封装多种已经造好的轮子为自定义指令。毕竟，我们站在巨人的肩膀上才会看的更远，走的更远。

您可能感兴趣的文章:

  • vue 中自定义指令改变data中的值
  • Vue.directive自定义指令的使用详解
  • 详解在Vue中通过自定义指令获取dom元素
  • Vue自定义指令拖拽功能示例
  • Vue自定义指令介绍(2)
  • vue.js通过自定义指令实现数据拉取更新的实现方法
  • Vue.js每天必学之指令系统与自定义指令
赞 (0)

相关推荐

  • Vue.directive自定义指令的使用详解

    很多教程都是在讲自定义指令的概念和语法,看的相当蛋疼.本文不讲语法和概念,只讲用法. 自定义指令基本就是用来操作DOM的,虽然官方推荐数据驱动视图,有时候还是需要自定义指令来操作DOM,指令可复用. 1. 自定义指令实现拖拽 HTML: <div v-drag>我可以拖拽</div> JS: Vue.directive('drag', inserted:function(el){ //inserted 钩子函数:当元素被插入父元素时触发,可省略 let oDiv=el; //el

  • vue 中自定义指令改变data中的值

    通过局部自定义指令实现了一个拖动的指令 html: <div style="position:absolute;width:100px;height:100px;border:1px solid red" v-drag="{set:set}"></div> script: methods:{ set(x,y){ this.data.x=x; this.data.y=y; } }, directives:{ // 拖动的自定义指令 drag(e

  • Vue自定义指令介绍(2)

    Vue自定义指令介绍(2)

    Vue指令 Vue的指令以v-开头,作用在HTML元素上,将指令绑定在元素上,给绑定的元素添加一些特殊行为. 例如: <h1 v-if="yes">Yes</h1> 其中,v-是Vue的标识,if是指令ID,yes是expression.yes是MVVM中的VM即ViewModel,当它的值发生变化,就会触发指令,改变View视图的显示. expression还可以使用内联的模式,任何依赖的属性发生变化时都会触发指令的执行.如: <h1 v-if=&quo

  • 详解在Vue中通过自定义指令获取dom元素

    vue.js 是数据绑定的框架,大部分情况下我们都不需要直接操作 DOM Element,但在某些时候,我们还是有获取DOM Element的需求的: 在 vue.js 中,获取某个DOM Element常用的方法是将这个元素改成一个组件 (component),然后通过 this.$el 去获取,但是在一些很小的项目里,在一些没有使用 webpack 等构建工具的项目中,创建一个组件并不是那么值得,所以 vue 提供了另一种操作DOM元素的方式,就是自定义指令 (directive) : 自定

  • Vue.js每天必学之指令系统与自定义指令

    基础 除了内置指令,Vue.js 也允许注册自定义指令.自定义指令提供一种机制将数据的变化映射为 DOM 行为. 可以用 Vue.directive(id, definition) 方法注册一个全局自定义指令,它接收两个参数指令 ID 与定义对象.也可以用组件的 directives 选项注册一个局部自定义指令. 钩子函数 定义对象可以提供几个钩子函数(都是可选的): •bind:只调用一次,在指令第一次绑定到元素上时调用. •update: 在 bind 之后立即以初始值为参数第一次调用,之后

  • vue.js通过自定义指令实现数据拉取更新的实现方法

    前言 这篇文章的代码片段位于 vue 的单文件组件中,即以 .vue 结尾的文件中,本文说明的只是一种实现方法,既不是唯一的方法也不是最好的方法,如果大家有更好的方法可以留言,大家进行讨论. 第一步 首先,一定要先定义变量: // app.vue <script> data () { return { // 定义 getData getData:{}, // 定义自定义指令的绑定值 ifUpdate:true } } 第二步 然后要使用 ajax 的话,要在 index.html 里引入 jq

  • Vue自定义指令拖拽功能示例

    下面给大家分享vue自定义指令拖拽功能代码,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>实例方法</title> <meta name="viewport" content="width=device-width, initial-scale=1

  • Angular7中创建组件/自定义指令/管道的方法实例详解

    组件 使用命令创建组件 •创建组件的命令:ng generate component 组件名 •生成的组件组成: 组件名.html .组件名.ts.组件名.less.组件名.spec.ts •在组件的控制器 @Component({ selector: 'app-heroes', templateUrl: './heroes.component.html', styleUrls: ['./heroes.component.less'] }) 手动创建组件 1.创建一个组件ts文件 2.在组件中设

  • Android使用xml自定义图片实例详解

    Android使用xml自定义图片实例详解

    Android使用xml自定义图片实例详解 实现效果图: 白色圆角图片 bg_round_rectangle_white.xml <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <!-

  • Android启动内置APK和动态发送接收自定义广播实例详解

    Android启动内置APK和动态发送接收自定义广播实例详解

    Android启动内置APK和动态发送接收自定义广播实例详解 工作中遇到这样一个需求,需要为按键添加一个亲情号,提供一个接口启动内置的APK,思考再三决定更改Framework,利用广播机制去实现. 一.代码动态自主启动内置APK 我们都知道Android系统为我们提供了很多服务管理类,PackageManager主要是管理应用程序包,通过它就可以获取应用程序信息并构建Intent,启动对应的应用.除此之外Android还未我们提供了一些对应的类来管理相关的xml文件,比如说可以通过Packag

  • 微信小程序 自定义对话框实例详解

    微信小程序 自定义对话框实例详解

    微信小程序 自定义对话框实例详解 效果图: index.wxml: <button type="default" bindtap="clickbtn"> 点击 </button> <view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view> <

  • Vue中遍历数组的新方法实例详解

    1.foreach foreach循环对不能使用return来停止循环 search(keyword){ var newList = [] this.urls.forEach(item =>{ if(item.name.indexOf(keyword) != -1){ newList.push(item) } }) return newList } 2.filter item对象就是遍历数组中的一个元素,includes是es6中的新方法,在search方法中直接返回新数组 search(key

  • Vue触发隐藏input file的方法实例详解

    1.使用input透明覆盖法 将input的z-index设置为1以上的数字并覆盖到需点击的内容上,将input的样式opacity设置为0(即为透明度为0),这样通过绑定在input上的change事件触发     ----推荐 <p class="uploadImg"> <input type="file" @change="picUpload($event)" accept="image/*" />

  • Vue中使用webpack别名的方法实例详解

    在工作中,我们经常会写出这种代码: import MHeader from '../../components/m-header/m-header' @import "../../common/stylus/variable" @import "../../common/stylus/mixin" 即,需要引入公共文件,但是公共文件的文件路径里当前文件很远,那么就会形成上面示例中的那种路径很长的情况. 而因为文件目录是约定俗成的,不可轻易更改,无法修改相对路径.那么

  • vue组件中的样式属性scoped实例详解

    Scoped CSS Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素 它是通过使用PostCSS来改变以下内容实现的: <style scoped> .example { color: red; } </style> <template> <div class="example">hi</di

  • vue开发设计分支切换与cleanup实例详解

    目录 分支切换与cleanup 了解分支切换 分支切换导致的问题 如何清除掉副作用函数的无效关联关系? 疑问:为什么对传入的副作用函数进行一层包裹? 完整代码 产生的问题:代码运行发生栈溢出 如何解决此种情况下的栈溢出? 嵌套的effect与effect栈 effect嵌套的场景? 初始化 原因: 支持嵌套 避免无限递归循环 产生无限递归循环的代码: 原因分析: 解决循环 完整代码 分支切换与cleanup 了解分支切换 代码示例如下 const data = { ok: true, text:

  • MotionLayout自定义开关按钮实例详解

    目录 MotionLayout自定义一个动画开关按钮 使用方法 完整代码直接拿去用 MotionLayout自定义一个动画开关按钮 MotionLayout是一个非常新的类,它来自ConstraintLayout 2.0库中,主要目的是为了帮助Android开发人员在应用中降低使用手势和组件动画的难度 使用方法 MotionSwitch(Modifier.height(26.dp).width(86.dp), onText = "最热", offText = "最新"

随机推荐