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. ansible中yaml语法应用

    4.yaml语法应用 ansible的playbook编写是yaml语言编写,掌握yaml语法是编写playbook的必要条件,格式要求和Python相似,具体教程参考如下 yaml语言教程 附上一个 ...

  2. Python tldextract模块

    最新发布的 PyPI: pip install tldextract 或者最新的开发版本: pip install -e 'git://github.com/john-kurkowski/tldext ...

  3. Android突破64K限制

    1.添加依赖 android{ defaultConfig{ ... multiDexEnabled true ... } } dependencies{ compile 'com.android.s ...

  4. hdfs深入:07、hdfs的文件的读取过程

    详细步骤解析 1. Client向NameNode发起RPC请求,来确定请求文件block所在的位置: 2. NameNode会视情况返回文件的部分或者全部block列表,对于每个block,Name ...

  5. 简单的linux看门狗脚本

    watchdog.sh #!/bin/bash now=`date '+%Y-%m-%d %H:%M:%S'` baseDir=$(cd `dirname $0`; pwd) sleepTime=10 ...

  6. PHP中设置session过期的时间

    如何严格限制session在30分钟后过期!1.设置客户端cookie的lifetime为30分钟:2.设置session的最大存活周期也为30分钟:3.为每个session值加入时间戳,然后在程序调 ...

  7. linux ping-测试主机之间网络的连通性

    博主推荐:更多网络测试相关命令关注 网络测试  收藏linux命令大全 ping命令用来测试主机之间网络的连通性.执行ping指令会使用ICMP传输协议,发出要求回应的信息,若远端主机的网络功能没有问 ...

  8. php-fpm进程数管理

    PHP-FPM 先来了解一些名词概念: CGI是Common Gateway Interface(通用网管协议),用于让交互程序和Web服务器通信的协议.它负责处理URL的请求,启动一个进程,将客户端 ...

  9. 笔记——python语言规范

    Lint 对你的代码运行pylint 定义: pylint是一个在Python源代码中查找bug的工具. 对于C和C++这样的不那么动态的(译者注: 原文是less dynamic)语言, 这些bug ...

  10. 【】node基础概念问题(转载)

    1.nodejs编写HelloWord,了解什么是nodejs,nodejs有什么特点   2.nodejs的模块怎么用,如何载入别的模块(require),如何给另一模块调用(module, mod ...