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进行注册.全局注册的可以在任何创建的实例 ...
随机推荐
- 学生管理系统之Java+Mysql
主页面: 代码如下:package appstu.view; import java.awt.BorderLayout;import java.awt.Dimension;import java.aw ...
- CREATE FUNCTION - 定义一个新函数
SYNOPSIS CREATE [ OR REPLACE ] FUNCTION name ( [ argtype [, ...] ] ) RETURNS rettype { LANGUAGE lang ...
- CAD参数绘制mcdbsolid对象(com接口)
C#中实现代码说明: private void DrawSolid() { //绘McDbSolid对象 axMxDrawX1.AddLinetype("MLineType1", ...
- Perl语言入门:第六章习题:处理用户所指定的名字并汇报相应的姓。
37 print "\n----------------------------------_exercise_6_1--------------------------\n"; ...
- java “==”和“equals”
菜呀,只能记笔记了 ==:如果是基本数据类型,比较值,如果是引用类型,比较地址 equals:比较值
- 梯度提升决策树(GBDT)与XGBoost、LightGBM
今天是周末,之前给自己定了一个小目标:每周都要写一篇博客,不管是关于什么内容的都行,关键在于总结和思考,今天我选的主题是梯度提升树的一些方法,主要从这些方法的原理以及实现过程入手讲解这个问题. 本文按 ...
- Linux基础学习二
新建分区:fdisk /dev/sda(a代表第一块硬盘) 建完后w保存 更新分区表:partprobe mkfs.ext4 /dev/sdb{1..3} : 格式 ...
- Kali Linux 下载、引导、安装
下载卡莉 Linux 官方镜像: https://www.kali.org/downloads/ 官方虚拟机镜像: https://www.offensive-security.com/kali-li ...
- 杭电 2124 Repair the Wall(贪心)
Description Long time ago , Kitty lived in a small village. The air was fresh and the scenery was ve ...
- [luoguP1015] 回文数(模拟 + 高精度?)
传送门 类似高精的操作... 代码 #include <cstdio> #include <cstring> #include <iostream> #define ...