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. h5混编问题总结

    h5混编总结: 1.fragment 格式错误导致跳转混乱的问题:修改格式: 2.有缓存回退js不执行问题:未解决: 3.无缓存跨域回退白屏问题:解决跨域问题. 4.

  2. Custom Operators

    New operators are declared at a global level using the operator keyword, and are marked with the pre ...

  3. loadrunner 响应时间和TPS

    例子:一个高速路有10个入口,每个入口每秒钟只能进1辆车 1.请问1秒钟最多能进几辆车?    TPS=10 2.每辆车需要多长时间进行响应?    reponse time = 1 3.改成20辆车 ...

  4. vue cli本地开发跨域问题解决

    首先呢,找到在目录里找到config文件夹 然后修改config文件夹下的index.js里面dev的配置项proxyTable: 修改为: proxyTable: { '/api': { targe ...

  5. tinyXml输出utf-8文档

    TiXmlDocument虽然能读取utf-8的xml文件,但读入后在内存中是以多字节存储.如果新建一个TiXmlDocument,即使定义头为utf-8编码,直接调用SaveFile方法保存的文档仍 ...

  6. C++如何显式调用常成员函数

    C++的常成员函数与同名成员函数重载时,该如何显式调用常成员函数? 具体的一个小例子: #include <iostream> using namespace std; class C1 ...

  7. [JOYOI] 自然数拆分Lunatic版

    题目背景 话说小小鱼看了P1171(自然数拆分)之后感觉异常不爽,于是异常邪恶地将题目加强. 题目描述 输入自然数n,然后将其拆分成由若干数相加的形式,参与加法运算的数可以重复. 输入格式 输入只有一 ...

  8. MyBatis 返回Map<String,Object>类型

    <!-- 导出所有数据 --> <select id="exportAll" resultMap="map"> SELECT t1.ME ...

  9. jquery源码——noConflict实现

    实现方式很简单:在初始化的时候,记录当前全局中jQuery和$两个变量的的值,用_jQuery和_$分别存放,调用noConflict方法时,使用_jQuery和_$分别恢复对应的值,并且返回jQue ...

  10. Vue如何实现swiper左右滑动内容区控制导航tab同时切换高亮

    Vue如何实现左右滑动内容区控制导航tab同时切换高亮,实现的效果是:点击导航按钮时内容区发生改变,左右滑动内容区时导航按钮跟随切换高亮,停留在某个内容区时刷新页面后仍然停留在当前内容区.       ...