1, 全局指令

在main.js中引入

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})

页面中使用

<div>
<input v-focus/> </div>

2, 局部执行指令

在需要的js页面中引入

data() {
return {}
},
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}

页面中使用

<div>
<input v-focus/> </div>

vue-07-自定义指令的更多相关文章

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

    vue.js 自定义指令 钩子函数:bindinsertedupdatecomponentUpdatedunbind 钩子函数完整实例:html: <div id="hook-argu ...

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

    市面上大多数关于Vue.js自定义指令的文章都在讲语法,很少讲实际的应用场景和用例,以致于即便明白了怎么写,也不知道怎么用.本文不讲语法,就讲自定义指令的用法. 自定义指令是用来操作DOM的.尽管Vu ...

  3. vue 通过自定义指令实现 置顶操作;

    项目需求:要求当前项目每个页面滑到超出一屏的距离时,出现 backTop 按钮,点击则回到最顶端:俗称置顶操作: 因为涉及到的页面较多,每个页面都加肯定显得重复累赘,最终想到了 Vue 的自定义指令  ...

  4. vue怎么自定义指令??

    最近看看vue中自定义指令,感觉vue的指令和angular1的指令相差较大 <script> //指令钩子函数: /* bind 只调用一次,指令第一次绑定到元素的时调用 inserte ...

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

    前言 最近优化项目-手机拍照图片太大,回显速度比较慢,使用了vue的自定义指令实现H5压缩上传base64格式的图片 canvas自定义指令 Vue.directive("canvas&qu ...

  6. Vue.directive 自定义指令

    一.什么是全局API? 全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局API,比如我们今天要学习的指令Vue.directive.说的简单些就是,在 ...

  7. vue中自定义指令

    //vue中自定义指令 //使用 Vue.directive(id, [definition]) 定义全局的指令 //参数1:指令的名称.注意,在定义的时候,指令的名称前面,不需要加 v-前缀; 但是 ...

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

    目录 Vue2.0 [第二季]第1节 Vue.directive自定义指令 一.什么是全局API? 二. Vue.directive自定义指令 三.自定义指令中传递的三个参数 四.自定义指令的生命周期 ...

  9. Vue 3自定义指令开发

    本文由葡萄城技术团队原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 什么是指令(directive) 在Angular和Vue中都有Direct ...

  10. vue.js自定义指令入门

    Vue.js 允许你注册自定义指令,实质上是让你教 Vue 一些新技巧:怎样将数据的变化映射到 DOM 的行为.你可以使用Vue.directive(id, definition)的方法传入指令id和 ...

随机推荐

  1. Java集合不能存放基本数据类型

    Java集合不能存放基本数据类型,只能存放对象的引用. 每个集合元素都是一个引用变量,实际内容都存放在堆内或方法区里面, 但是基本数据类型是在栈内存上分配空间的,栈上的数据随时会被收回. 如何解决? ...

  2. centos6安装oracle11g过程中报错Error in invoking target “install” of makefile ‘/home/oracle/app/oracle/product/11.2.0/dbhome_1/ctx/lib/ins_ctx.mk’

    报这个错误的原因是由于缺少compat_libstdc包所导致.安装即可 1.在http://www.rpm-find.net/linux/rpm2html/search.php?query=comp ...

  3. Go的Get命令兼容公司Gitlab仓库的HTTP协议

    对于公司的私有Gitlab仓库,没有对https支持,在使用最新版本的go get命令时,需要使用-insecure参数来支持http,但如果导入的包里边依赖了需要https的仓库,就不好使了,折腾了 ...

  4. java解析json数据用到的jar包

    百度云连接: https://pan.baidu.com/s/1iuQCc7uBO5XtAsNn6hwCew

  5. Linux(Ubuntu-CentOS)

    2017.3.29 查看已安装软件版本 dpkg-query --list 2017.3.3 Ubuntu 14.04 安装 phpmyadmin make sure apache works wel ...

  6. 无知小子踏入python web大门

    学习python flask的第一天,费劲我小白的脑子,总算完成了环境配置 详情如下,其他小白误走弯路,希望和我一样爱好python的人坚信:python或许是最好的语言! 那么,开始喽,有不对的地方 ...

  7. Python基础知识当中容易混淆的几个知识点

    在Python的基础知识当中,对于类实现可迭代功能有了一种新的方式,而这种方式则有别于我们学.NET等其他高级语言. 在Python当中,目前常用的有两种方式来实现这种迭代器的返回:__iter__ ...

  8. Lombok轮子

    前提 自从进公司实习后,项目代码中能用 Lombok 的都用了,毕竟这么好的轮子要充分利用好.也可以减少一些 get/set/toString 方法的编写,虽说 IDEA 的插件可以自动生成 get/ ...

  9. PMP:8.项目质量管理

    内容中包含 base64string 图片造成字符过多,拒绝显示

  10. Android插件化的兼容性(中):Android P的适配

    Android系统的每次版本升级,都会对原有代码进行重构,这就为插件化带来了麻烦. Android P对插件化的影响,主要体现在两方面,一是它重构了H类中Activity相关的逻辑,另一个是它重构了I ...