vue全局注册是每个实例化的vue都可以使用,而局部则是实例化注册的那个可以用。举个例子,看看写法:

<div id="app">

   <p>页面载入时,input 元素自动获取焦点:</p>

   <input v-focus>

</div>

<script> // 注册一个全局自定义指令 v-focus

Vue.directive('focus', {

// 当绑定元素插入到 DOM 中。

   inserted: function (el) {

// 聚焦元素

   el.focus() } })

// 创建根实例

  new Vue({ el: '#app' })

</script>

局部注册:

我们也可以在实例使用 directives 选项来注册局部指令,这样指令只能在这个实例中使用:

<div id="app">

  <p>页面载入时,input 元素自动获取焦点:</p>

   <input v-focus>

</div>

<script> // 创建根实例

  new Vue({

    el: '#app',

    directives: {

// 注册一个局部的自定义指令 v-focus

    focus: {

// 指令的定义

    inserted: function (el) {

// 聚焦元素

    el.focus() } } }

  })

</script>

vue全局注册与局部注册的写法的更多相关文章

  1. 详解vue全局组件与局部组件使用方法

    这篇文章主要为大家详细介绍了vue全局组件与局部组件的使用方法,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. vue全局/局部注册,以及一些混淆的组件main.js ...

  2. vue 组件 全局注册和局部注册

    全局注册,注册的组件需要在初始化根实例之前注册了组件: 局部注册,通过使用组件实例选项注册,可以使组件仅在另一个组件或者实例的作用域中可用: 全局组件 js Vue.component('tab-ti ...

  3. Vue全局弹窗:一次注册,全局可弹

    Vue全局弹窗 今天来搞一个全局弹窗,不用每个文件都引入,只在main.js里作为全局原型引入就好了 先新建弹窗组件 toast.vue <template></template&g ...

  4. vue -全局组件和局部组件

    1.全局组件:Vue.component('标签名', 构造器名) Vue.component('mycpn', cpnC) 注:这种注册组件的方式是全局组件,可以在多个Vue实例中使用. 2.局部组 ...

  5. vue全局组件和局部组件

    1.全局注册组件 Vue.componet('name',{ template:'<div></div>', data(){ retrun {} } }) 使用了以上这种方式注 ...

  6. Vue 全局过滤和局部过滤

    局部过滤器(放在组件里) filters: { //局部过滤器 FormattingMoney:value=>{ return value==null? '0' : value/100 } }, ...

  7. vue全局组件与局部组件

    <!DOCTYPE html> <html> <head> <title></title> </head> <script ...

  8. vue.js中的全局组件和局部组件

    组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能. 组件的使用有三 ...

  9. Vue组件深入了解(组件注册和Prop)

    一.组件名 自定义组件的名称强烈推荐遵循W3C规范中的方式:字母全小写且必须包含一个连字符. 二.全局注册和局部注册的区别 全局注册 Vue.component进行注册.全局注册的可以在任何创建的实例 ...

随机推荐

  1. 学生管理系统之Java+Mysql

    主页面: 代码如下:package appstu.view; import java.awt.BorderLayout;import java.awt.Dimension;import java.aw ...

  2. CREATE FUNCTION - 定义一个新函数

    SYNOPSIS CREATE [ OR REPLACE ] FUNCTION name ( [ argtype [, ...] ] ) RETURNS rettype { LANGUAGE lang ...

  3. CAD参数绘制mcdbsolid对象(com接口)

    C#中实现代码说明: private void DrawSolid() { //绘McDbSolid对象 axMxDrawX1.AddLinetype("MLineType1", ...

  4. Perl语言入门:第六章习题:处理用户所指定的名字并汇报相应的姓。

    37 print "\n----------------------------------_exercise_6_1--------------------------\n";  ...

  5. java “==”和“equals”

    菜呀,只能记笔记了 ==:如果是基本数据类型,比较值,如果是引用类型,比较地址 equals:比较值

  6. 梯度提升决策树(GBDT)与XGBoost、LightGBM

    今天是周末,之前给自己定了一个小目标:每周都要写一篇博客,不管是关于什么内容的都行,关键在于总结和思考,今天我选的主题是梯度提升树的一些方法,主要从这些方法的原理以及实现过程入手讲解这个问题. 本文按 ...

  7. Linux基础学习二

    新建分区:fdisk /dev/sda(a代表第一块硬盘)                   建完后w保存 更新分区表:partprobe mkfs.ext4 /dev/sdb{1..3} : 格式 ...

  8. Kali Linux 下载、引导、安装

    下载卡莉 Linux 官方镜像: https://www.kali.org/downloads/ 官方虚拟机镜像: https://www.offensive-security.com/kali-li ...

  9. 杭电 2124 Repair the Wall(贪心)

    Description Long time ago , Kitty lived in a small village. The air was fresh and the scenery was ve ...

  10. [luoguP1015] 回文数(模拟 + 高精度?)

    传送门 类似高精的操作... 代码 #include <cstdio> #include <cstring> #include <iostream> #define ...