Vue 自定义指令功能完整实例

本文实例讲述了Vue 自定义指令功能。分享给大家供大家参考，具体如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>自定义指令</title>
  <script type="text/javascript" src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
</head>
<body>
<h1>自定义指令</h1>
<hr>
<div id="app">
  <div v-json="color">{{num}}</div>
  <p><button @click="add">加一</button></p>
</div>
<p>
  <button οnclick="unbind()">解绑</button>
</p>
</body>
</html>
<script>
  function unbind(){
    //vue 提供的解绑指令
    app.$destroy()
  }
  //自定义指令 有五个钩子函数（声明周期）
  //bind: 只调用一次。指令第一次绑定到元素时调用。用这个钩子函数可以定义一个绑定时执行一次的初始化动作
  //inserted: 被绑定元素插入父节点时调用 (父节点存在即可调用，不必存在于document中)
  // update: 被绑定于元素所在的模板更新时被调用,而无论绑定值是否发生变化 通过比较更新前后的绑定值，可以 忽略不必要的模板更新
  //componentUpdated: 被绑定元素所在模板完成一次更新周期时调用
  // unbind：只调用一次，指令与元素解绑时调用
  Vue.directive('json',{
    bind:function(el,binding){//被绑定
      console.log('1 - bind');
      el.style='color:'+binding.value;
    },
    inserted:function(){//绑定到节点
      console.log('2 - inserted');
    },
    update:function(){//组件更新
      console.log('3 - update');
    },
    componentUpdated:function(){//组件更新完成
      console.log('4 - componentUpdated');
    },
    unbind:function(){//解绑
      console.log('5 - unbind');
    }
  });
  //自定义指令
  // Vue.directive('json',function(el,binding){
  //   el.style='color:'+binding.value;
  // });
  var app = new Vue({
    el:'#app',
    data:{
      num:1,
      color:'red'
    },
    methods:{
      add:function(){
        this.num++
      }
    }
  })
</script>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家vue.js程序设计有所帮助。

赞 (0)

相关推荐

  • vue 使用自定义指令实现表单校验的方法

    笔者近期在公司的项目中使用自定义指令完成了表单校验. 这里将思路分享给大家,并写了一个小demo.这个自定义指令还需要大家自行完善. demo可见Github:vue-form-param-check 首先关于自定义指令的介绍可以参考官网. 首先,在github上已经有了一些开源组件可以支持表单校验.但是对于一些小项目而言,引入一个很大的东西实际上并不好.所以这里利用vue的自定义指令对表单校验进行了简单的实现. 分析 在平时我们所见的表单中,常见的做法有2种: - input框输入时和提交时,

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

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

  • Vue自定义指令实现checkbox全选功能的方法

    最近做的一个项目需要用到Vue实现全选功能,参考了一下网上的做法,发现用属性计算的复用性不高,于是选用自定义指令,但网上的做法大多是会对原始数据有一定的格式要求,而且没有返回结果,于是做了改进. 上代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id

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

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

  • 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自定义指令实现Select组件

    本篇文章教大家写一个非常简单的Select组件,想必很多人都写过Select,毕竟它太常用了,但是本篇文章的示例使用到了Vue的自定义指令,如果你对Vue自定义指令不怎么熟悉的话,本篇文章或许会让您有所收获! 完成的效果图如下: 一.首先,我们简单布局一下: <template> <div class="select"> <div class="inner"> <div class="inputWrapper&qu

  • Vue自定义指令使用方法详解

    Vue自定义指令使用方法详解

    Vue自定义指令的使用,具体内容如下 1.自定义指令的语法 Vue自定义指令语法如下: Vue.directive(id, definition) 传入的两个参数,id是指指令ID,definition是指定义对象.其中,定义对象可以提供一些钩子函数 2.钩子函数 定义对象的钩子函数如下: 钩子函数的参数 el: 指令所绑定的元素,可以用来直接操作 DOM . binding: 一个对象,包含以下属性: *name: 指令名,不包括 v- 前缀. *value: 指令的绑定值, 例如: v-my

  • vue自定义指令实现v-tap插件

    放弃jQuery,拥抱MVVM,拥抱组件吧! vue-touch基于hammer,对于普通简单手势的页面来说过于庞大! 于是想自己实现一个最常用的手势tap.顺着自定义指令和插件文档,昨晚实现了一个v-tap指令,丢出这篇干货. 指令与插件介绍 自定义指令和插件官方文档中也介绍比较简单详细,就不过多介绍. 我先说下本插件就用了三个API,如果大家不了解最好先事先看下文档避免后面的代码看的迷糊. 指令部分 1.update(nVal,oVal) 2.acceptStatement 插件部分 Vue

  • Vue自定义指令详解

    在 AngularJs 中,它的指令使用 directive ( name,factor_function)来实现: angular.module( 'myapp' ,[]) .directive (myDirective,function (){ return{ template : '', restrict: '', replace: '', ........ } }) 除了内置指令,Vue.js 也允许组件自定义指令. + 自定义指令提供一种机制将数据的变化映射为 DOM 行为 + Vue

  • Vue 自定义指令功能完整实例

    本文实例讲述了Vue 自定义指令功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自定义指令</title> <script type="text/javascript" src="https://cdn.bootcss.com/v

  • vue自定义指令directive实例详解

    vue自定义指令directive实例详解

    下面给大家介绍vue自定义指令directive,具体内容如下所示: 官网截图实例 vue除了一些核心的内部定义的指令(v-model,v-if,v-for,v-show)外,vue也允许用户注册自己的一些功能性的指令,有时候你实在是要对Dom操作,这个时候是自定义指令最合适的了. 来直接看例子:当页面加载时使得元素获得焦点(autofocus 在移动版 Safari 是不支持的),就是当页面加载好了,不做任何的操作使得表单自动获得焦点,光标自动在某个表单上代码如下: Vue.directive

  • Vue自定义指令v-focus实例详解

    Vue自定义指令v-focus实例详解

    目录 前言 自定义指令 directive 项目实际使用 技术背景 实际操作 优势 setTimeout(fn, 0) 永远的神 $nextTick(callback) 小结 前言 本文直接参考vue2.0官方文档, 并演示博主项目中的使用 自定义指令 directive 除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件.然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就

  • Vue 自定义动态组件实例详解

    现在基于vue的UI组件库有很多,比如iview,element-ui等.但有时候这些组件库满足不了我们的开发需求,这时候我们就需要自己写一个插件. 举第一个栗子 用vue-cli搭建好项目目录之后,在src/components下面新建一个文件夹放我们要写的插件,如图所示: index.vue里写我们的组件,代码如下: index.js里面写index.vue的install方法,并用Vue.component注册组件,代码如下: 接下来我们要在默认的main.js里将刚刚写的index.js

  • jQuery自定义滚动条完整实例

    jQuery自定义滚动条完整实例

    本文实例讲述了jQuery自定义滚动条实现方法.分享给大家供大家参考,具体如下: 很多时候,由于美观上的考虑,往往需要自定义各种各样的滚动条,因此,本人做了一个demo 运行效果截图如下: 以下是代码部分: <html> <head> <script type="text/javascript" src="jquery-1.9.1.min.js"></script> <script> $(function(

  • jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】

    本文实例讲述了jQuery+vue.js实现的九宫格拼图游戏.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } /*#piclist { width: 600p

  • vue自定义指令用法经典实例小结

    本文实例总结了vue自定义指令用法.分享给大家供大家参考,具体如下: 自定义指令: 一.属性: Vue.directive(指令名称,function(参数){ this.el -> 原生DOM元素 }); <div v-red="参数"></div> 指令名称:     v-red  ->  red * 注意: 必须以 v-开头 拖拽: 二.自定义元素指令:(用处不大) Vue.elementDirective('zns-red',{ bind:f

  • vue自定义指令的创建和使用方法实例分析

    vue自定义指令的创建和使用方法实例分析

    本文实例讲述了vue自定义指令的创建和使用方法.分享给大家供大家参考,具体如下: 一.自定义指令的创建和使用 Vue自带的指令很多,v-for/v-if/v-else/v-else-if/v-model/v-bind/v-on/v-show/v-html/v-text... 但是这些指令都是比较偏向于工具化,有些时候在实现具体的业务逻辑的时候,发现不够用,如何来自定义指令. 1.自定义指令 ① 创建 new Vue({ directives:{ change:{ bind:function(){

  • Vue自定义全局Toast和Loading的实例详解

    如果我们的Vue项目中没有用到任何UI框架的话,为了更好的用户体验,肯定会用到loading和toast.那么我们就自定义这两个组件吧. 1.Toast组件 首先,在common下新建global文件夹,存放我们的toast.vue和toast.js两个文件(当然文件的具体位置你可以自行安排). (1). toast.vue <template lang="html"> <div v-if="isShowToast" class="toa

  • vue自定义指令限制输入框输入值的步骤与完整代码

    需求 前端开发过程中,经常遇到表单校验的需求,比如校验用户输入框的内容,限制用户只能输入数字. 本文内容基于 element-ui,el-form 组件可以绑定 model.rule 用于表单内容校验,但如果有多个表单多个输入框那就得写很多个 rule,虽然方法可以通用可是使用起来也是比较繁琐的,可通过自定义执行实现一次注册,多次使用. Vue 自定义指令 我们使用 el-input 作为表单的输入框 1. 先注册一个自定义指令 import Vue from 'vue'; Vue.direct

随机推荐