138Vue-带参数自定义指令directive、v-foucs
不带参数的参考api链接
全局
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title>
</head><body><div id="app"><input type="text" v-color='msg'></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">/*自定义指令-带参数*/Vue.directive('color', {bind: function (el, binding) {// 根据指令的参数设置背景色console.log(binding.value)el.style.backgroundColor = binding.value.color;}});var vm = new Vue({el: '#app',data: {msg: {color: 'blue'}},methods: {handle: function () {}}});</script>
</body></html>
局部指令
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title>
</head><body><div id="app"><input type="text" v-color='msg'><input type="text" v-focus></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">/*自定义指令-局部指令*/var vm = new Vue({el: '#app',data: {msg: {color: 'red'}},methods: {handle: function () {}},directives: {color: {bind: function (el, binding) {el.style.backgroundColor = binding.value.color;}},focus: {inserted: function (el) {el.focus();}}}});</script>
</body></html>
138Vue-带参数自定义指令directive、v-foucs相关推荐
- vue从入门到进阶:自定义指令directive,插件的封装以及混合mixins(七)
一.自定义指令directive 除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件.然而,有的 ...
- 第三十九篇 自定义指令 - directive
前面讲了关于在Vue中如何来进行封装swiper组件的内容,本篇内容讲到使自定义组件,讲这块内容也是同样为了后续再次回顾封装swiper组件变化做铺垫内容,那么什么是自定义指令,在前面的内容讲过了好些 ...
- 29.VUE自定义指令directive和inserted
VUE自定义指令directive和inserted 1.什么事自定义指令 1.2使用自定义指令的方式 2.设置自定义组件 2.1 设置全局指令 2.2 设置私有指令 2.3 钩子函数 3. 案例 1 ...
- Vue3 学习笔记 —— 破坏式更新、自定义指令 directive
目录 1. 什么叫破坏式更新? 2. Vue3 中的自定义指令 2.1 自定义指令的生命周期 2.1.1 Vue2 Vs Vue3 的自定义指令生命周期 2.1.2 自定义指令的生命周期中,接收的参数 ...
- ionic入门教程第十八课-初识自定义指令directive oni-bar(tab-bar)
经过这么长时间的学习,我想大家都有了一定的基础了. 这节课尝试着给大家讲点更加深入的东西,能理解的就好好学学,还理解不来的朋友也不要紧,可以当做扩展阅读看看就好. 学习切忌过于急躁. 到目前为止,我教 ...
- Vue3:自定义指令directive
一.vue2自定义指令生命周期 bind: function () {}, inserted: function () {}, update: function () {}, componentUpd ...
- Vue 自定义指令(directive)
气温骤降,南京又开始了降温 速冻模式,这谁受得了. 进入主题: vue自带了很多的指令,v-once.v-model.v-for等,这些指令对我们的代码带来了很多的帮助,也让他们的编写简单了不少,但是 ...
- vue中如何自定义指令directive
一. 什么是自定义指令 我们看到的v-开头的行内属性,都是指令,不同的指令可以完成或实现不同的功能,对普通 DOM元素进行底层操作,这时候就会用到自定义指令.除了核心功能默认内置的指令 (v-mode ...
- html标签outclick,vue自定义指令(Directive中的clickoutside.js)的理解
阅读目录 vue自定义指令clickoutside.js的理解 vue自定义指令请看如下博客: 一般在需要 DOM 操作时我们都需要使用自定义指令的方式去实现,当然一些特殊的事件监听也可以使用指令,例 ...
最新文章
- 神舟战神_14英寸小钢炮 神舟战神S72021S5开箱
- python主要运用于-Python的8大主要应用领域,看看哪个是你的菜?
- python和java一样吗-Python与Java的区别与优劣?
- surging 微服务引擎 1.0 正式发布
- 在Linux上安装Chef工作站
- 屋子里有1到100号100盏关闭的灯
- PVD桌面怎样重新调整personal vDisks大小
- java中的io系统详解[转]
- python 身份证验证系统_用Python写一个身份证号码校验系统
- php7.4中让gd库支持jpeg格式
- HaaS EDU K1设备资源总体介绍
- 数学分析-极值点、拐点
- FDD LTE B1是什么
- 国家虚拟仿真实验教学项目共享平台(实验空间)PHP SDK
- java adsl 拨号_Java实现ADSL拨号上网
- CCF数据库专委会杜小勇:数据库40年激荡历程
- 软件产品测试报告如何用于软件退税?
- 在vue项目中使用supermap,基于 SuperMap iClient 8C(2017) for JavaScript,底图为天地图
- GIS学习(一):密度分析、可达性分析、空间句法
- 为什么使用服务器端渲染 (SSR)?
热门文章
- csrf验证问题 -- 不同域名下Iframe嵌套Cookie失效导致csrf验证失败
- java 递归算法伪代码,从伪代码实现递归(NTRUE加密)
- C语言经典面试算法题之跳水比赛
- rand()函数100000随机数_Excel之数学函数SQRT/MOD/EXP/LN/RAND
- 【车辆行人检测和跟踪数据集及代码汇总】
- 【远程桌面】Dell机器登陆与退出远程桌面
- java前端用什么软件好_Java开发者必备的六款工具
- 数据库用户账单流水表设计
- stringify_如何使用Stringify使孩子的就寝时间自动化
- 患者随访在医疗体系建设中的意义