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程序设计有所帮助。
相关推荐
-
Vue自定义指令使用方法详解
Vue自定义指令的使用,具体内容如下 1.自定义指令的语法 Vue自定义指令语法如下: Vue.directive(id, definition) 传入的两个参数,id是指指令ID,definition是指定义对象.其中,定义对象可以提供一些钩子函数 2.钩子函数 定义对象的钩子函数如下: 钩子函数的参数 el: 指令所绑定的元素,可以用来直接操作 DOM . binding: 一个对象,包含以下属性: *name: 指令名,不包括 v- 前缀. *value: 指令的绑定值, 例如: v-my
-
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自定义指令详解
在 AngularJs 中,它的指令使用 directive ( name,factor_function)来实现: angular.module( 'myapp' ,[]) .directive (myDirective,function (){ return{ template : '', restrict: '', replace: '', ........ } }) 除了内置指令,Vue.js 也允许组件自定义指令. + 自定义指令提供一种机制将数据的变化映射为 DOM 行为 + Vue
-
详解在Vue中通过自定义指令获取dom元素
vue.js 是数据绑定的框架,大部分情况下我们都不需要直接操作 DOM Element,但在某些时候,我们还是有获取DOM Element的需求的: 在 vue.js 中,获取某个DOM Element常用的方法是将这个元素改成一个组件 (component),然后通过 this.$el 去获取,但是在一些很小的项目里,在一些没有使用 webpack 等构建工具的项目中,创建一个组件并不是那么值得,所以 vue 提供了另一种操作DOM元素的方式,就是自定义指令 (directive) : 自定
-
Vue自定义指令实现checkbox全选功能的方法
最近做的一个项目需要用到Vue实现全选功能,参考了一下网上的做法,发现用属性计算的复用性不高,于是选用自定义指令,但网上的做法大多是会对原始数据有一定的格式要求,而且没有返回结果,于是做了改进. 上代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id
-
Vue.js每天必学之指令系统与自定义指令
基础 除了内置指令,Vue.js 也允许注册自定义指令.自定义指令提供一种机制将数据的变化映射为 DOM 行为. 可以用 Vue.directive(id, definition) 方法注册一个全局自定义指令,它接收两个参数指令 ID 与定义对象.也可以用组件的 directives 选项注册一个局部自定义指令. 钩子函数 定义对象可以提供几个钩子函数(都是可选的): •bind:只调用一次,在指令第一次绑定到元素上时调用. •update: 在 bind 之后立即以初始值为参数第一次调用,之后
-
vue自定义指令实现v-tap插件
放弃jQuery,拥抱MVVM,拥抱组件吧! vue-touch基于hammer,对于普通简单手势的页面来说过于庞大! 于是想自己实现一个最常用的手势tap.顺着自定义指令和插件文档,昨晚实现了一个v-tap指令,丢出这篇干货. 指令与插件介绍 自定义指令和插件官方文档中也介绍比较简单详细,就不过多介绍. 我先说下本插件就用了三个API,如果大家不了解最好先事先看下文档避免后面的代码看的迷糊. 指令部分 1.update(nVal,oVal) 2.acceptStatement 插件部分 Vue
-
使用Vue自定义指令实现Select组件
本篇文章教大家写一个非常简单的Select组件,想必很多人都写过Select,毕竟它太常用了,但是本篇文章的示例使用到了Vue的自定义指令,如果你对Vue自定义指令不怎么熟悉的话,本篇文章或许会让您有所收获! 完成的效果图如下: 一.首先,我们简单布局一下: <template> <div class="select"> <div class="inner"> <div class="inputWrapper&qu
-
vue 使用自定义指令实现表单校验的方法
笔者近期在公司的项目中使用自定义指令完成了表单校验. 这里将思路分享给大家,并写了一个小demo.这个自定义指令还需要大家自行完善. demo可见Github:vue-form-param-check 首先关于自定义指令的介绍可以参考官网. 首先,在github上已经有了一些开源组件可以支持表单校验.但是对于一些小项目而言,引入一个很大的东西实际上并不好.所以这里利用vue的自定义指令对表单校验进行了简单的实现. 分析 在平时我们所见的表单中,常见的做法有2种: - input框输入时和提交时,
-
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除了一些核心的内部定义的指令(v-model,v-if,v-for,v-show)外,vue也允许用户注册自己的一些功能性的指令,有时候你实在是要对Dom操作,这个时候是自定义指令最合适的了. 来直接看例子:当页面加载时使得元素获得焦点(autofocus 在移动版 Safari 是不支持的),就是当页面加载好了,不做任何的操作使得表单自动获得焦点,光标自动在某个表单上代码如下: Vue.directive
-
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自定义滚动条实现方法.分享给大家供大家参考,具体如下: 很多时候,由于美观上的考虑,往往需要自定义各种各样的滚动条,因此,本人做了一个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自带的指令很多,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
随机推荐
- 无线标记语言(WML)基础之WMLScript 基础第1/2页
- 阿里云主机一键安装lamp、lnmp环境的shell脚本分享
- Access 执行SQL的方法
- sqlserver中在指定数据库的所有表的所有列中搜索给定的值
- 轻松掌握Java建造者模式
- Python正则表达式非贪婪、多行匹配功能示例
- 日期处理的js库(迷你版)--自建js库总结
- php适配器模式介绍
- thinkPHP微信分享接口JSSDK用法实例
- Python内置数据类型详解
- 关于C++中的static关键字的总结
- mysql 中存在null和空时创建唯一索引的方法
- js实现网页多级级联菜单代码
- Nodejs实现的一个简单udp广播服务器、客户端
- 用纯CSS+DIV写的漂亮Flash幻灯片及SQL标签教程!
- Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
- MSSQL 2000 使用帮助(sql server简明教程)
- 用rsync对网站进行镜像备份实现步骤
- IE弹出www.zhaomeimei.cn的解决教程
- Android中转场动画的实现与兼容性处理