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. Spring流行的十大理由

    Spring大概是每个JAVA程序员都听过的框架,但是它为什么能这么流行? 听到咕泡学院的Tom老师的公开课,下面是他总结的阿里为什么选择Spring的十大理由,我觉得这也是Spring能流行的原因: ...

  2. Eclipse导入web项目报错找不到HttpServletRequest解决方法

    解决方法 右击项目-> Properties -> Java Build Path -> Add Library -> Server Runtime -> next -& ...

  3. Mongo学习笔记

    安装和开始 下载 MongoDB 参考:+MongoDB安装配置(Windows) +Mongo手册

  4. MyBatis逆向工程自动生成代码

    MyBatis逆向工程根据数据库表自动生成mapper.xml,entity类,mapper类,简直不要 太方便好嘛 下面贴上关键配置代码,以免以后找不到 generator.xml <?xml ...

  5. #224 Profile Lookup (for in & if )

    我们有一个对象数组,里面存储着通讯录. 函数 lookUp 有两个预定义参数:firstName值和prop属性 . 函数将会检查通讯录中是否存在一个与传入的 firstName 相同的联系人.如果存 ...

  6. Asp.net Security框架(1)

    Security框架主要用于身份认证的,基本上所有Asp.net项目有意或者无意的都在使用的,框架的源码包含在Katana项目下. 最常见的使用方式或许就是SignIn来给客户端浏览器生成包含身份信息 ...

  7. Tmux会话的使用

    不想看废话的直接拖到下面看干货部分! 我们管理Linux服务器通常是通过ssh远程连接过去,如果在服务器上执行比较耗时的操作,比如下载安装软件.编译等等,如果需要数个小时来完成这些工作,但是又不得不关 ...

  8. PaaS平台的尴尬与变革

    当今时代只要提到云计算这个词语,一定会提到云计算分为IaaS.PaaS.SaaS 这三个层面,现阶段云环境中IaaS和SaaS都实现了商品化.但是,PaaS作为云计算的服务模式之一,既不像IaaS那样 ...

  9. 【webpack】流行的前端模块化工具webpack初探

    从开发文件到生产文件   有一天我突然意识到一个问题,在使用react框架搭建应用时,我使用到了sass/less,JSX模版以及ES6的语法在编辑器下进行开发,使用这些写法是可以提高开发的效率.可是 ...

  10. java继承多态和抽象类接口

    一.继承 通过扩展一个已有的类,并继承该类的属性和行为,来创建一个新的类.已有的称为父类,新的类称为子类(父类派生子类,子类继承父类).(1)继承的优点:    ①代码的可重用性:    ②父类的属性 ...