vue全局注册与局部注册的写法
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全局注册与局部注册的写法的更多相关文章
- 详解vue全局组件与局部组件使用方法
这篇文章主要为大家详细介绍了vue全局组件与局部组件的使用方法,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. vue全局/局部注册,以及一些混淆的组件main.js ...
- vue 组件 全局注册和局部注册
全局注册,注册的组件需要在初始化根实例之前注册了组件: 局部注册,通过使用组件实例选项注册,可以使组件仅在另一个组件或者实例的作用域中可用: 全局组件 js Vue.component('tab-ti ...
- Vue全局弹窗:一次注册,全局可弹
Vue全局弹窗 今天来搞一个全局弹窗,不用每个文件都引入,只在main.js里作为全局原型引入就好了 先新建弹窗组件 toast.vue <template></template&g ...
- vue -全局组件和局部组件
1.全局组件:Vue.component('标签名', 构造器名) Vue.component('mycpn', cpnC) 注:这种注册组件的方式是全局组件,可以在多个Vue实例中使用. 2.局部组 ...
- vue全局组件和局部组件
1.全局注册组件 Vue.componet('name',{ template:'<div></div>', data(){ retrun {} } }) 使用了以上这种方式注 ...
- Vue 全局过滤和局部过滤
局部过滤器(放在组件里) filters: { //局部过滤器 FormattingMoney:value=>{ return value==null? '0' : value/100 } }, ...
- vue全局组件与局部组件
<!DOCTYPE html> <html> <head> <title></title> </head> <script ...
- vue.js中的全局组件和局部组件
组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能. 组件的使用有三 ...
- Vue组件深入了解(组件注册和Prop)
一.组件名 自定义组件的名称强烈推荐遵循W3C规范中的方式:字母全小写且必须包含一个连字符. 二.全局注册和局部注册的区别 全局注册 Vue.component进行注册.全局注册的可以在任何创建的实例 ...
随机推荐
- leetcode_1015. Numbers With Repeated Digits
https://leetcode.com/problems/numbers-with-repeated-digits/ 与leetcode_357. Count Numbers with Unique ...
- spring中路径的注入
@RequestMapping("${mgt}/file") //请求的路径的统一添加,需要在mvc层配置<context:property-placeholder loca ...
- CSS3 动画-- 鼠标移上去,div 会旋转、放大、移动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- ZXing.dll 生成二维码 C# winform net4.5
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- vue 画二维码
首先安装一下相关的插件 qrcode2 npm install --save qrcode2 然后在需要画二维码的页面引入一下 import QRCode from 'qrcode2' 最后在meth ...
- Java设计模式之策略模式(Strategy Pattern)
简介 策略模式定义了算法族,分别封装起来,让它们之间可以互相替换,此模式让算法的变化独立于使用算法的客户. 组成 1.抽象策略角色(Strategy): 策略类,通常由一个接口或者抽象类实现. 2.具 ...
- js 技巧 (十)广告JS代码效果大全 【1】
广告JS代码效果大全 1.[普通效果] 现在很多网站广告做的如火如荼,现在我就来介绍一下常见的对联浮动广告效果的代码使用方法,介绍的这种效果,在1024*768分辨率下正常显示,在800*60 ...
- python3.x Day6 多进程
多进程:1.每个子进程申请到的资源都是独立的,不与其他进程共享.2.语法上和线程基本上差不多,使用multiprocessing.Process(target=xxxx,args=(xxx,xxx,x ...
- 树莓派 -- i2c学习
硬件平台 RaspberryPi-3B+ Pioneer600外扩版 i2c芯片为DS3231,adddress 0x68 首先来看一下i2ctool的使用 i2ctool 使用 https://i2 ...
- PHP:分页类(比较庞大不建议在项目中用)
文章来源:http://www.cnblogs.com/hello-tl/p/7685178.html <?php //地址 //page::$url=''; //每页的条数 默认10 //pa ...