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进行注册.全局注册的可以在任何创建的实例 ...
随机推荐
- h5混编问题总结
h5混编总结: 1.fragment 格式错误导致跳转混乱的问题:修改格式: 2.有缓存回退js不执行问题:未解决: 3.无缓存跨域回退白屏问题:解决跨域问题. 4.
- Custom Operators
New operators are declared at a global level using the operator keyword, and are marked with the pre ...
- loadrunner 响应时间和TPS
例子:一个高速路有10个入口,每个入口每秒钟只能进1辆车 1.请问1秒钟最多能进几辆车? TPS=10 2.每辆车需要多长时间进行响应? reponse time = 1 3.改成20辆车 ...
- vue cli本地开发跨域问题解决
首先呢,找到在目录里找到config文件夹 然后修改config文件夹下的index.js里面dev的配置项proxyTable: 修改为: proxyTable: { '/api': { targe ...
- tinyXml输出utf-8文档
TiXmlDocument虽然能读取utf-8的xml文件,但读入后在内存中是以多字节存储.如果新建一个TiXmlDocument,即使定义头为utf-8编码,直接调用SaveFile方法保存的文档仍 ...
- C++如何显式调用常成员函数
C++的常成员函数与同名成员函数重载时,该如何显式调用常成员函数? 具体的一个小例子: #include <iostream> using namespace std; class C1 ...
- [JOYOI] 自然数拆分Lunatic版
题目背景 话说小小鱼看了P1171(自然数拆分)之后感觉异常不爽,于是异常邪恶地将题目加强. 题目描述 输入自然数n,然后将其拆分成由若干数相加的形式,参与加法运算的数可以重复. 输入格式 输入只有一 ...
- MyBatis 返回Map<String,Object>类型
<!-- 导出所有数据 --> <select id="exportAll" resultMap="map"> SELECT t1.ME ...
- jquery源码——noConflict实现
实现方式很简单:在初始化的时候,记录当前全局中jQuery和$两个变量的的值,用_jQuery和_$分别存放,调用noConflict方法时,使用_jQuery和_$分别恢复对应的值,并且返回jQue ...
- Vue如何实现swiper左右滑动内容区控制导航tab同时切换高亮
Vue如何实现左右滑动内容区控制导航tab同时切换高亮,实现的效果是:点击导航按钮时内容区发生改变,左右滑动内容区时导航按钮跟随切换高亮,停留在某个内容区时刷新页面后仍然停留在当前内容区. ...