Vue(九) 自定义指令

前面介绍了许多 Vue 内置的指令,比如 v-if.v-show等,这些丰富的指令能满足我们绝大部分的业务需求,不过在需要一些特殊功能时,我们仍然希望对 DOM 进行底层的操作,这时就要用到自定义指令. 基本用法自定义指令的注册方法和组件很像,也分全局注册和局部注册,比如注册一个 v-focus 的指令,用于在 <input>.<textarea> 元素初始化时自动获取焦点,两种写法分别是: //全局注册 Vue.directive('focus', { //指令选项 }); /…

Vue(九)---自定义指令(directive )

1.无参数自定义指令的方式:1. 使用Vue.directive 来自定义2. 第一个参数就是指令名称 xart3. el 表示当前的html dom对象4. 在方法体内就可以通过 innerHTML style.color 等方式操控当前元素了 <body> <div id="app"> <div v-xxx> 商店 </div> </div> <script type="text/javascript&…

最简单的方式理解Vue的自定义指令与混合

vue.js 自定义指令钩子函数:bindinsertedupdatecomponentUpdatedunbind 钩子函数完整实例:html: <div id="hook-arguments-example" v-demo:hello.a.b="message" v-color-swatch="bgColor" ></div> js: Vue.directive('demo', { bind: function (el…

Vue.js自定义指令的用法与实例

市面上大多数关于Vue.js自定义指令的文章都在讲语法,很少讲实际的应用场景和用例,以致于即便明白了怎么写,也不知道怎么用.本文不讲语法,就讲自定义指令的用法. 自定义指令是用来操作DOM的.尽管Vue推崇数据驱动视图的理念,但并非所有情况都适合数据驱动.自定义指令就是一种有效的补充和扩展,不仅可用于定义任何的DOM操作,并且是可复用的. 比如谷歌图片的加载做得非常优雅,在图片未完成加载前,用随机的背景色占位,图片加载完成后才直接渲染出来.用自定义指令可以非常方便的实现这个功能. 效果: 自定义…

vue 通过自定义指令实现置顶操作；

项目需求:要求当前项目每个页面滑到超出一屏的距离时,出现 backTop 按钮,点击则回到最顶端:俗称置顶操作: 因为涉及到的页面较多,每个页面都加肯定显得重复累赘,最终想到了 Vue 的自定义指令 Vue.directive: 场景分析:①.监听页面滚动过程,计算当前的 scrollY 与设定的 number 值进行对比,从而决定 backTop 按钮的出现隐藏: ②.出现 backTop 按钮时,点击按钮,实现置顶效果(为实现更完美的置顶效果,加了定时器,保证了一定速度的滑行): 实现过程…

vue怎么自定义指令？？

最近看看vue中自定义指令,感觉vue的指令和angular1的指令相差较大 <script> //指令钩子函数: /* bind 只调用一次,指令第一次绑定到元素的时调用 inserted 被指令绑定指令的元素插入父节点的时候调用 update 被绑定的元素模版只要发生变化,就会触发(通过比较模板变化前后) componentUpdated 被绑定元素所在模版完成一次更新周期时被触发 unbind 指令被解除绑定的时候 */ /*定义指令回调函数(钩子函数的几个参数的意义)第一个参数:绑定…

Vue directive自定义指令+canvas实现H5图片压缩上传-Base64格式

前言最近优化项目-手机拍照图片太大,回显速度比较慢,使用了vue的自定义指令实现H5压缩上传base64格式的图片 canvas自定义指令 Vue.directive("canvas", { bind: function (el, binding) { // 压缩图片需要的一些元素和对象 var reader = new FileReader(), img = new Image(); // 选择的文件对象 var file = null; // 缩放图片需要的canvas var…

Vue.directive 自定义指令

一.什么是全局API? 全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局API,比如我们今天要学习的指令Vue.directive.说的简单些就是,在构造器外部用Vue提供给我们的API函数来定义新的功能. 二.Vue.directive自定义指令我们在第一季就学习了内部指令,我们也可以定义一些属于自己的指令,比如我们要定义一个v-jspang的指令,作用就是让文字变成绿色. 在自定义指令前我们写一个小功能,在页面上有一个数字为10,数字的下面…

vue中自定义指令

//vue中自定义指令 //使用 Vue.directive(id, [definition]) 定义全局的指令 //参数1:指令的名称.注意,在定义的时候,指令的名称前面,不需要加 v-前缀; 但是, 在调用的时候,必须在置顶的名称前加上 v-前缀来进行调用 //参数2: 是一个对象, 这个对象身上,有一些指令相关的函数,这些函数可以在特定的阶段,执行相关的操作. Vue.directive("focus", { // 注意: 在每个函数中, 第一个参数永远是el, 表示被绑定了指令…

Vue2.0 【第二季】第1节 Vue.directive自定义指令

目录 Vue2.0 [第二季]第1节 Vue.directive自定义指令一.什么是全局API? 二. Vue.directive自定义指令三.自定义指令中传递的三个参数四.自定义指令的生命周期 Vue2.0 [第二季]第1节 Vue.directive自定义指令一.什么是全局API? 全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局API,比如我们今天要学习的指令Vue.directive.说的简单些就是,在构造器外部用Vue提供给我们…

Vue 3自定义指令开发

本文由葡萄城技术团队原创并首发转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 什么是指令(directive) 在Angular和Vue中都有Directive的概念,我们通常讲Directive 翻译为"指令". 在计算机技术中,指令是由指令集架构定义的单个的CPU操作.在更广泛的意义上,"指令"可以是任何可执行程序的元素的表述,例如字节码. 那么在前端框架Vue中"指令"到底是什么,他有什么作用呢…

vue.js自定义指令入门

Vue.js 允许你注册自定义指令,实质上是让你教 Vue 一些新技巧:怎样将数据的变化映射到 DOM 的行为.你可以使用Vue.directive(id, definition)的方法传入指令id和定义对象来注册一个全局自定义指令.定义对象需要提供一些钩子函数(全部可选): bind: 仅调用一次,当指令第一次绑定元素的时候. update: 第一次是紧跟在 bind 之后调用,获得的参数是绑定的初始值:以后每当绑定的值发生变化就会被调用,获得新值与旧值两个参数. unbind:仅调用一次,当…

Vue.directive 自定义指令的问题

1.今天复习一下Vue自定义指令的代码,结果出现一个很无语的结果,先贴代码. 2. <div id="example" v-change-by="myColor"></div> <script src="vue.min.js"></script> <script> new Vue({ el:"#example", data:{ msg:"", my…

vue通过自定义指令 v-py 将名字转拼音

自定义指令 py: 1.新建 vue-py.js文件 import Vue from 'vue'; var chinesePointCode = { "a": [21834, 38463, 38165], "ai": [22467, 25384, 21710, 21769, 21696, 30353, 30284, 34108, 30702, 33406, 30861, 29233, 38552, 35830, 25457, 22003, 21964, 23250,…

Vue.directive自定义指令

Vue除了内部指令,我们也可以定义一些属于自己的指令,比如我们要定义一个v-diy的指令,作用就是让文字变成红色. 写好了这个功能,我们现在就自己定义一个全局的指令.我们这里使用Vue.directive( ); html <div v-diy="color">{{message}}</div> js Vue.directive('diy',function(el,binding,vnode){ el.style='color:'+binding.value;…

vue.js自定义指令详解

写在文本前:相信在做vue的项目,你肯定接触了指令,我们常用vue内置的一些指令,比如v-model,v-text,v-if,v-show等等,但是这些内置指令不在本文的讲解范畴,本文想说的是其自定义指令.思考一下,自定义指令我们用在哪里?是不是一下子想不出来,感觉做一般的项目很少用到指令呢,想不到指令用在哪!!因为我们的确很少用,但不是说不会用.看官方api文档里有这么一句话:普通 DOM 元素进行底层操作,这时候就会用到自定义指令.也就是说我们在操作普通DOM的时候有可能会用到.在做项目的时…

「Vue」自定义指令

#全局自定义指令1.使用Vue.directive()定义全局的指令 v-focus2.参数1 指令的名称,在定义的时候,指令的名称前面不需要加v-前缀3.但是在调用的时候必须在指令名称前加上v-前缀进行调用4.参数2是一个对象,这个对象身上,有一些指令相关的函数,这些函数在特定阶段执行相关操作例1:获取DOM聚焦Vue.directive('focus',{ bind:function(el){ 1.每当指令绑定到元素的时候,就立即执行这个bind函数,只执行一次 2.每个函数中,第一个参数…

051——VUE中自定义指令：directive

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自定义指令:directive</title> <script src="vue.js"></script> </head> <body> <!-- directive: bind i…

vue中自定义指令vue.direvtive，自定义过滤器vue.filter(),vue过渡transition

自定义指令默认设置的核心指令( v-model,v-bind,v-for,v-if,v-on等 ),Vue 也允许注册自定义指令.注意,在 Vue2.0 里面,代码复用的主要形式和抽象是组件——然而,有的情况下,你仍然需要对纯 DOM 元素进行底层操作,这时候就会用到自定义指令. 自定义指令相当于为元素添加一个自定义属性,只不过是以v-开头的自定义自定义指令的语法注意:在vue中使用时候,要加上v-,在定义的时候,要去除v- 自定义指令和自定属性,当元素渲染的时候该属性会被删除,后者不会被…

vue的自定义指令控制菜单权限

用户登录后,选择子节点,节点中含有多个菜单,可以根据后台返回的权限数据进行权限控制在vue上挂载自定义指令方法,根据后台返回权限移除相应节点 import Cookies from "js-cookie"; const hasPermission = { install(Vue, options) { // let shishi = Cookies.get("shishi"); Vue.directive('has', { bind(el, binding, vn…

vue中自定义指令的使用

原文地址 vue中除了内置的指令(v-show,v-model)还允许我们自定义指令想要创建自定义指令,就要注册指令(以输入框获取焦点为例) 一.注册全局指令: // 注册一个全局自定义指令 `v-focus` Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el,binding) { // 当前指令绑定的dom元素 //console.log(el); // 指令传入的参数.修饰符.值 v-指令名称:参数…

Vue中自定义指令的使用方法！

除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件.然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令.举个聚焦输入框的例子,如下:(咳咳,借官网的用一用) 1.定义全局的自定义变量 main.js Vue.directive('color',{ inserted(el){ // 各单位注意,这里的el获取的是标签元素,说白了就是可以直接操作DOM cons…

vue之自定义指令

1.自定义指令的作用除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件.然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令. 参考文档:https://cn.vuejs.org/v2/guide/custom-directive.html 2.注册自定义指令 (1)注册全局自定义指令 Vue.directive("指令名称", { inserte…

vue的自定义指令

点击元素之外触发函数 <template> <div v-clickoutside="clickItemOut"></div> </template> const clickoutside = { bind (el, binding, vnode) { function documentHandler (e) { if (el.contains(e.target)) { return false } if (binding.express…

vue：自定义指令

<div id="app"> <div v-lang="color">{{num}}</div> <button @click="add">add</button> </div> Vue.directive('lang', function(el, binding){ console.log(el); console.log(binding); el.style='color…

vue全局自定义指令-元素拖拽

小白我用的是vue-cli的全家桶,在标签中加入v-drap则实现元素拖拽, 全局指令我是写在main.js中 Vue.directive('drag', { inserted: function (el) { el.onmousedown=function(ev){ var disX=ev.clientX-el.offsetLeft; var disY=ev.clientY-el.offsetTop; document.onmousemove=function(ev){ var l=ev.cl…