vue中自定义指令
//vue中自定义指令
//使用 Vue.directive(id, [definition]) 定义全局的指令
//参数1:指令的名称.注意,在定义的时候,指令的名称前面,不需要加 v-前缀; 但是, 在调用的时候,必须在置顶的名称前加上 v-前缀来进行调用
//参数2: 是一个对象, 这个对象身上,有一些指令相关的函数,这些函数可以在特定的阶段,执行相关的操作。 Vue.directive("focus", {
// 注意: 在每个函数中, 第一个参数永远是el, 表示被绑定了指令的那个元素,这个el参数,是一个原生的JS对象
bind: function(el){ // 每当指令绑定到元素上的时候,会立即执行这个bind函数,【触发一次】
//
},
inserted: function(el){ // inserted 表示元素插入到DOM中的时候,会执行inserted函数【触发一次】
el.focus()
},
updated: function(el) { // 当VNode更新的时候,会执行updated,可能【会触发多次】
//
}
}) //调用:
//注意: Vue中所有的指令,在调用的时候,都以 v- 开头
<input type="text" class="form-control" v-model="keywords" v-focus/>
如果指令需要多个值,可以传入一个JS对象字面量,指令函数能够接受所有合法类型的JS表达式。
<div v-demo="{ color: 'white', text: 'hello!' }"></div>
Vue.directive('demo', function (el, binding) {
console.log(binding.value.color) // => "white"
console.log(binding.value.text) // => "hello!"
})
vue中自定义指令的更多相关文章
- vue中自定义指令vue.direvtive,自定义过滤器vue.filter(),vue过渡transition
自定义指令 默认设置的核心指令( v-model,v-bind,v-for,v-if,v-on等 ),Vue 也允许注册自定义指令.注意,在 Vue2.0 里面,代码复用的主要形式和抽象是组件——然而 ...
- vue中自定义指令的使用
原文地址 vue中除了内置的指令(v-show,v-model)还允许我们自定义指令 想要创建自定义指令,就要注册指令(以输入框获取焦点为例) 一.注册全局指令: // 注册一个全局自定义指令 `v- ...
- Vue中自定义指令的使用方法!
除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件.然而,有的情况下,你仍然需要对普通 DOM ...
- 051——VUE中自定义指令:directive
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue怎么自定义指令??
最近看看vue中自定义指令,感觉vue的指令和angular1的指令相差较大 <script> //指令钩子函数: /* bind 只调用一次,指令第一次绑定到元素的时调用 inserte ...
- vue 通过自定义指令实现 置顶操作;
项目需求:要求当前项目每个页面滑到超出一屏的距离时,出现 backTop 按钮,点击则回到最顶端:俗称置顶操作: 因为涉及到的页面较多,每个页面都加肯定显得重复累赘,最终想到了 Vue 的自定义指令 ...
- Vue.directive 自定义指令
一.什么是全局API? 全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局API,比如我们今天要学习的指令Vue.directive.说的简单些就是,在 ...
- Vue2.0 【第二季】第1节 Vue.directive自定义指令
目录 Vue2.0 [第二季]第1节 Vue.directive自定义指令 一.什么是全局API? 二. Vue.directive自定义指令 三.自定义指令中传递的三个参数 四.自定义指令的生命周期 ...
- Vue 3自定义指令开发
本文由葡萄城技术团队原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 什么是指令(directive) 在Angular和Vue中都有Direct ...
随机推荐
- Samba应用案例
一.配置文件详解 Samba配置文件非常简洁明了,所有的设置都在 /etc/samba/smb.conf 配置文件中进行,通过对该配置文件的修改,可以将Samba配置为一台匿名文件服务器.基于账户的文 ...
- ANSI Common lisp1
lisp(本文专指common lisp)语言简介 lisp程序员能够并且经常编写一些能够写程序的程序,对于程序生成程序的这种特性, 因为lisp是主流语言中唯一一个提供一些方便的抽象来让你完成这个任 ...
- 【字符串】【P5830】 【模板】失配树
[字符串][P5830] [模板]失配树 Description 给定一个长度为 \(n\) 的字符串 \(S\),有 \(m\) 次询问,每次询问给定 \(S\) 的两个前缀,求它们的最长公共 bo ...
- js规范思维导图(仅限于自己)
- java web开发入门汇总
servlet 用java语言开发动态资源网站的技术,在doGet方法中拼接显示html,在doPost方法中提交数据.类似于.net的ashx技术. servlet生成的class文件存放在tomc ...
- Spring Security教程之session管理(十一)
1.1 检测session超时 1.2 concurrency-control 1.3 session 固定攻击保护 Spring Security通过http元素下的子元素s ...
- 【06月05日】A股滚动市净率PB历史新低排名
2010年01月01日 到 2019年06月05日 之间,滚动市净率历史新低排名. 上市三年以上的公司,2019年06月05日市净率在30以下的公司. 来源:A股滚动市净率(PB)历史新低排名. 1 ...
- winform 通用自动更新程序
通用自动更新程序 主要功能: 1. 可用于 C/S 程序的更新,集成到宿主主程序非常简单和配置非常简单,或不集成到主程序独立运行. 2. 支持 HTTP.FTP.WebService等多种更新下载方式 ...
- 解决ios环境下点击输入框页面被顶起不能自动回弹到底部问题
第一步:在标签的输入框中添加获取焦点事件 代码写法: @focus="getFocus" (vue代码) 可直接拷贝拿去放在自己页面元素中,如下: <div class= ...
- vue学习笔记01
使用vscode配置vue项目 因为之前我没有接触过vue.js,以前的网页也是用Thymeleaf或者jsp写的,这次要求用vscode写vue,感觉现在前端招聘需求量最大的也是这个技术,刚好自己也 ...