我们在考虑做一些功能性的封装的时候,我们会考虑使用vue的指令来做,那么指令应该怎么写:

具体参考:

https://cn.vuejs.org/v2/guide/custom-directive.html

注册一个加单的指令:

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

注册一个局部指令:

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

具体使用:

<input v-focus>

vue---指令怎么写的更多相关文章

  1. 一个能拖动,能调整大小,能更新bind值的vue指令-vuedragx

    一. 背景说明 开发一个可自定义组件化门户配置页面,期间采用了vue框架作为前端视图引擎,作为一个刚入手vue的萌新,开发第一个功能就遇到了拦路虎.需要一个拖动并且可改变大小的容器盒子.当时查看vue ...

  2. vue指令概览

    原文 简书原文:https://www.jianshu.com/p/5fd47b7422fd 大纲 1.什么是vue指令 2.向指令中传入参数 3.指令中带入修饰符 4.指令的缩写 5.常见的vue指 ...

  3. vue指令用法

    vue指令 指令式带有 v- 前缀的特殊特性v-text和v-html都属于指令将数据和dom做关联,当表达式的值改变时,响应式地作用在视图 解决大胡子语法闪烁案例 [v-cloak] { dispa ...

  4. Vue框架(一)——Vue导读、Vue实例(挂载点el、数据data、过滤器filters)、Vue指令(文本指令v-text、事件指令v-on、属性指令v-bind、表单指令v-model)

    Vue导读 1.Vue框架 vue是可以独立完成前后端分离式web项目的js框架 三大主流框架之一:Angular.React.Vue vue:结合其他框架优点.轻量级.中文API.数据驱动.双向绑定 ...

  5. Vue框架(二)——Vue指令(v-once指令、v-cloak指令、条件指令、v-pre指令、循环指令)、todolist案例、Vue实例(计算、监听)、组件、组件数据交互

    Vue指令 1.v-once指令  单独使用,限制的标签内容一旦赋值,便不可被动更改(如果是输入框,可以主动修改) <!DOCTYPE html> <html lang=" ...

  6. vue指令大全~~~

    是的,这里有很全的vue指令使用~ 1.简单的vue应用 vue作为一个mvvm框架,想想为什么叫做mvvm? Model是负责数据的存储, View负责页面的展示 Model View 负责业务逻辑 ...

  7. [Vue] : Vue指令

    Vue指令之 v-cloak v-cloak是解决解决插值表达式的闪烁问题 . 给插值表达式的元素加上v-cloak <p v-cloak>{{ msg }}</p> 为v-c ...

  8. vue指令实现拖动的高级写法

    不熟悉vue自定义指令看这里: https://cn.vuejs.org/v2/guide/custom-directive.html vue指令实现拖动方法很方便也挺简单,但是网上大部分的教程代码, ...

  9. 一起学vue指令之v-bind

    一起学vue指令之v-bind 一起学 vue指令 v-bind  网页的图片url地址并不是固定写死的,如果写死,每一个活动就改一次图片的url,一个网页有多少张图片,工作量多大? 通常来说,客户端 ...

  10. Vue学习笔记【4】——Vue指令之v-on

    Vue指令之v-on v-on指令介绍 直接使用指令v-on 使用简化指令@ 绑定事件代码:@事件名="methods中的方法名称" <!DOCTYPE html> & ...

随机推荐

  1. 修改vs2005,vs2008,vs2010调试默认浏览器

    前些日子不小心安装上了一个sogou的浏览器,感觉这个浏览器用起来也算方便,所以就么有卸载,一直就这么用着,但当我用vs来调试web程序的 时候问题出来了,默认的调试浏览器变成了搜狗的浏览器了,我在v ...

  2. phpstorm + x-debug 进行php调试

    参照http://www.cnblogs.com/tippoint/p/3429092.html 进行安装xdebug: 首先自己写一个打印php的页面,将phpinfo 拷贝到下面的框内进行分析. ...

  3. 【Mongodb】用户和认证 权限总结

    开启MongoDB服务时不添加任何参数时,默认是没有权限验证的,登录的用户可以对数据库任意操作而且可以远程访问数据库!   在刚安装完毕的时候MongoDB都默认有一个admin数据库,此时admin ...

  4. [Bayes ML] This is Bayesian Machine Learning

    From: http://www.cnblogs.com/bayesianML/p/6377588.html#central_problem You can do it: Dirichlet Proc ...

  5. Aspose------导出Excel

    代码: /// <summary> /// 导出Excel /// </summary> /// <typeparam name="T">泛型类 ...

  6. Android沉浸式状态栏兼容4.4手机的实现

    一.概述 最近注意到QQ新版使用了沉浸式状态栏,ok.先声明一下:本篇博客效果下图: 关于这个状态栏变色究竟叫「Immersive Mode」/「Translucent Bars」有兴趣能够去 为什么 ...

  7. ECharts 3 -- gauge表盘的配置项

    绘制一个简单的表盘图表 在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器. <body> <!-- 为 ECharts 准备一个具备大小(宽高)的 DOM --& ...

  8. C#(少用的)

    挖一挖C#中那些我们不常用的东西之系列(1)——ToDictionary,ToLookup 挖一挖C#中那些我们不常用的东西之系列(2)——IsXXX 系列方法 挖一挖C#中那些我们不常用的东西之系列 ...

  9. AcceptEx 以及 获取远程IP与port

    // 獲取本地以及遠程的IP和port setsockopt(clientfd, SOL_SOCKET, SO_UPDATE_ACCEPT_CONTEXT, (char *)&listenfd ...

  10. 删除腾讯游戏助手自动生成的文件aow_drv.log

    解决办法: 管理员身份运行cmd,依次执行如下指令: net stop aow_drvdel C:\aow_drv.logmkdir C:\aow_drv.logattrib +s +h C:\aow ...