VUE.JS插件提示插件未定义怎么解决?

html代码如下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>插件</title>
    </head>
    <body>
        <div id="test">
            <p v-my-directive='msg'></p>            
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script src="../js/vue-myPlugin.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            Vue.use(MyPlugin)

            Vue.myGlobalMethod()
            const vm=new Vue({
                el:'#test',
                data:{
                    msg:'I liKe EaT'
                }
            })

            vm.$myMethod()
        </script>
    </body>
</html>

插件代码如下

(function(){

    const MyPlugin={}   

    MyPlugin.install = function (Vue, options) {        
      // 1. 添加全局方法或属性
      Vue.myGlobalMethod = function () {

        console.log("执行了myGlobalMethod方法")
      }

      // 2. 添加全局资源
      Vue.directive('my-directive',function(el,binding){
          el.textContent = binding.value.toLowerCase()
      })

      // 3. 注入组件选项
      // Vue.mixin({
      //   created: function () {
      //     // 逻辑...
      //   }
      //   ...
      // })

      // 4. 添加实例方法
      Vue.prototype.$myMethod = function(){

        console.log("执行了$myMethod实例方法")
      }
    }
    //向外暴露
    window.MyPlugin=MyPlugin
})

``
都是照着网课老师的代码敲得,不知道哪里出错了一直提示
Uncaught ReferenceError: MyPlugin is not defined
求问各路大佬怎么解决

1个回答

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
vue.js 关于打包与部署的问题
vue.js 关于打包与部署的问题,vue.js具体怎么打包与部署
Vue.js 关于Vue.js中样式引入问题
``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue.js组件</title> </head> <body> <div id="app"> <counter heading="完美极了" bgcolor="green"></counter> <counter heading="糟糕透了" bgcolor="red"></counter> </div> <template id="mycounter"> <div class=""> <h1>{{ heading }}</h1> <button type="button" name="button" @click="plus" style="background:{{ bgcolor }}">赞赞赞{{ count }}</button> </div> </template> <script src="vue.js" type="text/javascript"></script> <script type="text/javascript"> Vue.component("counter",{ template:"#mycounter", data:function(){ return { count : 0}; }, props:["heading","bgcolor"], methods : { plus : function(){ this.count += 1; } } }); new Vue({ el : "#app" }); </script> </body> </html> ``` 上面的代码中 <button type="button" name="button" @click="plus" style="background:{{ bgcolor }}">赞赞赞{{ count }}</button> 这一行报错,报错信息为: Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div style="{{ val }}">, use <div :style="val">. 改为: <button type="button" name="button" @click="plus" v-bind:style="background:{{ bgcolor }}">赞赞赞{{ count }}</button> 后仍然报错! 请问大家,这里应该怎么正确引入父组件传过来的bgcolor作为button的背景色?
vue.js中如何在data中声明一个空二维数组?
请问在vue.js中如何在data中声明一个空二维数组?请问在vue.js中如何在data中声明一个空二维数组?请问在vue.js中如何在data中声明一个空二维数组?
如何解决vue.js组件中template内容不能换行的问题?
sublime环境下,我用vue.js的时候,写一个组件,在template写入内容,代码不能换行,必须在代码写成一整行才不会报错。这样我组件的内容简单的还好,要是写一个复杂的内容的话,调试和日后修改会非常麻烦(所以代码排成一行),问下应该怎么解决?(初学vue,若是常识性弱智表达,大佬勿喷)
在html文件中引用vue.js和直接创建.vue文件有什么差别??
在html文件中引用vue.js和直接创建.vue文件有什么差别??
webStorm无法解析vue.js怎么解决?
把vue.js文件放入webStorm的项目文件夹里 ![图片说明](https://img-ask.csdn.net/upload/201910/19/1571468378_934721.png) 提示please sprcify Node.js interpreter ![图片说明](https://img-ask.csdn.net/upload/201910/19/1571468452_961945.png) 且在html文件夹中提示无法解析,该怎么解决
vue.js的ajax方法(不用jquery)如何加headers??
vue.js的ajax方法(不用jquery)如何加headers??官方例子没有headers...
vue.js中怎么带参数请求接口
在vue.js项目里我想用一个js文件存放接口的公共部分和加解密的方法,然后我第一次用vue+webpack不太会用,所以请问一下该怎么写
webstrom配置新版vue.js,启动项目后停止
![图片说明](https://img-ask.csdn.net/upload/201712/06/1512551547_956798.png) ![图片说明](https://img-ask.csdn.net/upload/201712/06/1512551557_993884.png) 新版本vue.js,已经没有了dev.server.js,配置build.js后,项目启动后自动关闭,如果直接执行命令npm run dev,项目能正常启动
关于vue.js的history模式,二级路由刷新之后不能获取js
关于vue.js的history模式,二级路由刷新之后不能获取js
vue.js 请求方法设置同步问题
使用vue.js对后台进行请求发送。 现在问题描述。 定义一个vue中,有6个方法,其中有一个方法请求成功后会调用另外两个方法, 调用时候,必须等第一个方法成功返回之后对页面渲染后再掉第二个方法。 目前vue 默认为异步请求,调用的第一个方法还没有渲染完页面, 第二个方法就已经请求了,造成页面获取值为未更新之前的数据。 现在想完成的形式: 定义一个vue,6个方法中,不设置就使用异步, 有一个方法需要单独设置为执行同步。 请大神说说vue的思路。就是需要vue实现部分方法同步 【ps:想说使用ajax的或者把第二个参数写在第一个参数里边的就不用说了】
如何将锚链接转为固定链接,vue.js开发的?
如何将锚链接转为固定链接,vue.js开发的? 如何将锚链接转为固定链接,vue.js开发的? 听说锚链接不利于seo,可是不知道Vue.js能不能切换模式?
vue.js项目部署在tomcat上,怎么才能让刷新不报404
vue.js项目部署在tomcat上,怎么才能让刷新不报404
vue.js2 关于post请求后端获取数据的问题
vue.js2发送post请求,在后端为什么获取不到,jquery却能获取
vue.js关于跨域问题,请教各位
我在本地运行vue.js前端请求接口,get,post,put,delete这四种请求都可以访问 ,但是把vue项目打包发布,用nginx做代理转发,再访问vue.js项目,put和delete请求都不可以访问。错误:has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.
解決vue.runtime.esm.js:619 [Vue warn]: Failed to resolve directive: waves
vue.runtime.esm.js:619 [Vue warn]: Failed to resolve directive: waves ``` <script> import waves from '@/components/directive/waves' export default { components: { Pagination }, directives: { waves } ...... } </script> ```
使用vue.js是不是可以前后端完全分离?后端不管是什么语言都可以通用?
使用vue.js是不是可以前后端完全分离?后端不管是什么语言前端都可以通用?
spring boot shiro vue.js怎么配置才能跨域
前后端分离的时候,我在服务器的controller上加了@CrossOrigin,在没有shiro时候, 在vue.js中能得到数据,但是只要加了shiro他就会显示![图片说明](https://img-ask.csdn.net/upload/201808/15/1534335492_175068.png),请问前端或者后台还需要怎么配置吗
Vue.js 提示 is not a valid selector
以下代码执行就报:SyntaxError: '#4028db8158f727120158fb421fe20020' is not a valid selector 我换一个ID命名又没有问题,有人知道这是什么原因吗? <div id="4028db8158f727120158fb421fe20020"> <table class="table table-striped"> <tr> <th>id</th> <th>paraTypeName</th> <th>paraName</th> </tr> <tr v-for="obj in result.data"> <td>{{ obj.id }}</td> <td>{{ obj.paraTypeName }}</td> <td>{{ obj.paraName }}</td> </tr> </table> </div> <script type="text/javascript"> var data = { result : { data : [ { id : 1, paraTypeName : 't1', paraName : 'a' }, { id : 1, paraTypeName : 't2', paraName : 'b' } ] } } new Vue({ el : "#4028db8158f727120158fb421fe20020", data : data }); </script> new Vue({ el : "#4028db8158f727120158fb421fe20020", data : data });
130 个相见恨晚的超实用网站,一次性分享出来
相见恨晚的超实用网站 持续更新中。。。
我花了一夜用数据结构给女朋友写个H5走迷宫游戏
起因 又到深夜了,我按照以往在csdn和公众号写着数据结构!这占用了我大量的时间!我的超越妹妹严重缺乏陪伴而 怨气满满! 而女朋友时常埋怨,认为数据结构这么抽象难懂的东西没啥作用,常会问道:天天写这玩意,有啥作用。而我答道:能干事情多了,比如写个迷宫小游戏啥的! 当我码完字准备睡觉时:写不好别睡觉! 分析 如果用数据结构与算法造出东西来呢? ...
字节跳动视频编解码面经
三四月份投了字节跳动的实习(图形图像岗位),然后hr打电话过来问了一下会不会opengl,c++,shador,当时只会一点c++,其他两个都不会,也就直接被拒了。 七月初内推了字节跳动的提前批,因为内推没有具体的岗位,hr又打电话问要不要考虑一下图形图像岗,我说实习投过这个岗位不合适,不会opengl和shador,然后hr就说秋招更看重基础。我当时想着能进去就不错了,管他哪个岗呢,就同意了面试...
win10系统安装教程(U盘PE+UEFI安装)
一、准备工作 u盘,电脑一台,win10原版镜像(msdn官网) 二、下载wepe工具箱 极力推荐微pe(微pe官方下载) 下载64位的win10 pe,使用工具箱制作启动U盘打开软件, 选择安装到U盘(按照操作无需更改) 三、重启进入pe系统 1、关机后,将U盘插入电脑 2、按下电源后,按住F12进入启动项选择(技嘉主板是F12) 选择需要启...
大学四年自学走来,这些私藏的实用工具/学习网站我贡献出来了
大学四年,看课本是不可能一直看课本的了,对于学习,特别是自学,善于搜索网上的一些资源来辅助,还是非常有必要的,下面我就把这几年私藏的各种资源,网站贡献出来给你们。主要有:电子书搜索、实用工具、在线视频学习网站、非视频学习网站、软件下载、面试/求职必备网站。 注意:文中提到的所有资源,文末我都给你整理好了,你们只管拿去,如果觉得不错,转发、分享就是最大的支持了。 一、电子书搜索 对于大部分程序员...
《奇巧淫技》系列-python!!每天早上八点自动发送天气预报邮件到QQ邮箱
将代码部署服务器,每日早上定时获取到天气数据,并发送到邮箱。 也可以说是一个小人工智障。 思路可以运用在不同地方,主要介绍的是思路。
致 Python 初学者
欢迎来到“Python进阶”专栏!来到这里的每一位同学,应该大致上学习了很多 Python 的基础知识,正在努力成长的过程中。在此期间,一定遇到了很多的困惑,对未来的学习方向感到迷茫。我非常理解你们所面临的处境。我从2007年开始接触 python 这门编程语言,从2009年开始单一使用 python 应对所有的开发工作,直至今天。回顾自己的学习过程,也曾经遇到过无数的困难,也曾经迷茫过、困惑过。开办这个专栏,正是为了帮助像我当年一样困惑的 Python 初学者走出困境、快速成长。希望我的经验能真正帮到你
Linux(服务器编程):15---两种高效的事件处理模式(reactor模式、proactor模式)
前言 同步I/O模型通常用于实现Reactor模式 异步I/O模型则用于实现Proactor模式 最后我们会使用同步I/O方式模拟出Proactor模式 一、Reactor模式 Reactor模式特点 它要求主线程(I/O处理单元)只负责监听文件描述符上是否有事件发生,有的话就立即将时间通知工作线程(逻辑单元)。除此之外,主线程不做任何其他实质性的工作 读写数据,接受新的连接,以及处...
HAL 硬件抽象层介绍
和你一起终身学习,这里是程序员Android本篇文章主要介绍Android开发中的部分知识点,通过阅读本篇文章,您将收获以下内容:和你一起终身学习,这里是程序员 Android本篇文章主要介绍Android开发中的部分知识点,通过阅读本篇文章,您将收获以下内容:一、HAL 概述一、HAL 概述HAL定义了供硬件供应商实施的标准接口,该接口使Android无需考虑底层驱动程序的实现。使用HA...
加快推动区块链技术和产业创新发展,2019可信区块链峰会在京召开
11月8日,由中国信息通信研究院、中国通信标准化协会、中国互联网协会、可信区块链推进计划联合主办,科技行者协办的2019可信区块链峰会将在北京悠唐皇冠假日酒店开幕。   区块链技术被认为是继蒸汽机、电力、互联网之后,下一代颠覆性的核心技术。如果说蒸汽机释放了人类的生产力,电力解决了人类基本的生活需求,互联网彻底改变了信息传递的方式,区块链作为构造信任的技术有重要的价值。   1...
8年经验面试官详解 Java 面试秘诀
作者 |胡书敏 责编 | 刘静 出品 | CSDN(ID:CSDNnews) 本人目前在一家知名外企担任架构师,而且最近八年来,在多家外企和互联网公司担任Java技术面试官,前后累计面试了有两三百位候选人。在本文里,就将结合本人的面试经验,针对Java初学者、Java初级开发和Java开发,给出若干准备简历和准备面试的建议。 Java程序员准备和投递简历的实...
知乎高赞:中国有什么拿得出手的开源软件产品?(整理自本人原创回答)
知乎高赞:中国有什么拿得出手的开源软件产品? 在知乎上,有个问题问“中国有什么拿得出手的开源软件产品(在 GitHub 等社区受欢迎度较好的)?” 事实上,还不少呢~ 本人于2019.7.6进行了较为全面的回答,对这些受欢迎的 Github 开源项目分类整理如下: 分布式计算、云平台相关工具类 1.SkyWalking,作者吴晟、刘浩杨 等等 仓库地址: apache/skywalking 更...
致 Python 初学者们!
作者| 许向武 责编 | 屠敏 出品 | CSDN 博客 前言 在 Python 进阶的过程中,相信很多同学应该大致上学习了很多 Python 的基础知识,也正在努力成长。在此期间,一定遇到了很多的困惑,对未来的学习方向感到迷茫。我非常理解你们所面临的处境。我从2007年开始接触 Python 这门编程语言,从2009年开始单一使用 Python 应对所有的开发工作,直至今...
究竟你适不适合买Mac?
我清晰的记得,刚买的macbook pro回到家,开机后第一件事情,就是上了淘宝网,花了500元钱,找了一个上门维修电脑的师傅,上门给我装了一个windows系统。。。。。。 表砍我。。。 当时买mac的初衷,只是想要个固态硬盘的笔记本,用来运行一些复杂的扑克软件。而看了当时所有的SSD笔记本后,最终决定,还是买个好(xiong)看(da)的。 已经有好几个朋友问我mba怎么样了,所以今天尽量客观...
使用 Angular 打造微前端架构的 ToB 企业级应用
这篇文章其实已经准备了11个月了,因为虽然我们年初就开始使用 Angular 的微前端架构,但是产品一直没有正式发布,无法通过生产环境实践验证可行性,11月16日我们的产品正式灰度发布,所以是时候分享一下我们在使用 Angular 微前端这条路上的心得(踩过的坑)了额,希望和 Angular 社区一起成长一起进步,如果你对微前端有一定的了解并且已经在项目中尝试了可以忽略前面的章节。 什么是微前...
大学四年因为知道了这32个网站,我成了别人眼中的大神!
依稀记得,毕业那天,我们导员发给我毕业证的时候对我说“你可是咱们系的风云人物啊”,哎呀,别提当时多开心啦????,嗯,我们导员是所有导员中最帅的一个,真的???? 不过,导员说的是实话,很多人都叫我大神的,为啥,因为我知道这32个网站啊,你说强不强????,这次是绝对的干货,看好啦,走起来! PS:每个网站都是学计算机混互联网必须知道的,真的牛杯,我就不过多介绍了,大家自行探索,觉得没用的,尽管留言吐槽吧???? 社...
拿下微软、Google、Adobe,印度为何盛产科技圈 CEO?
作者 | 胡巍巍 出品 | CSDN(ID:CSDNnews) 世界500强中,30%的掌舵人,都是印度人。 是的,你没看错。这是近日《哈佛商业评论》的研究结果。 其中又以微软CEO萨提亚·纳德拉(Satya Nadella)、和谷歌CEO桑达尔·皮查伊(Sundar Pichai,以下简称劈柴)最为出名。 微软CEO萨提亚·纳德拉(Satya Nadella) 其他著名印度...
Linux(内核剖析):19---中断总体概述
一、为什么要引入中断? 任何操作系统内核的核心任务,都包含有对连接到计算机上的硬件设备进行有效管理,如硬盘、蓝光碟机、键盘、鼠标、3D 处理器,以及无线电等。而想要管理这些设备,首先要能和它们互通音信才行。众所周知,处理器的速度跟外围硬件设备的速度往往不在一个数量级上,因此,如果内核采取让处理器向硬件发出一个请求,然后专门等待回应的办法,显然差强人意。既然硬件的响应这么慢,那么内核就应该在此期间...
程序员写了一个新手都写不出的低级bug,被骂惨了。
这种新手都不会范的错,居然被一个工作好几年的小伙子写出来,差点被当场开除了。
Java工作4年来应聘要16K最后没要,细节如下。。。
前奏: 今天2B哥和大家分享一位前几天面试的一位应聘者,工作4年26岁,统招本科。 以下就是他的简历和面试情况。 基本情况: 专业技能: 1、&nbsp;熟悉Sping了解SpringMVC、SpringBoot、Mybatis等框架、了解SpringCloud微服务 2、&nbsp;熟悉常用项目管理工具:SVN、GIT、MAVEN、Jenkins 3、&nbsp;熟悉Nginx、tomca...
深度学习笔记------卷积神经网络
深度学习笔记------卷积神经网络
一文带你入门Linux
文章目录1.1 Linux的概述:1.1.1 什么是Linux:1.1.1.1 学习Linux之前先了解Unix1.1.1.2 Linux的概述:1.1.1.3 Linux的历史:1.1.1.4 Linux系统的应用:1.1.1.5 Linux的版本1.1.1.6 Linux的主流版本1.2 Linux的安装:1.2.1 虚拟机安装:1.2.1.1 什么是虚拟机1.2.1.2 安装VmWare1....
普通三本毕业,我怎么一路艰辛进入阿里的
英雄不问出处? 自古以来就有这样一句话,真的英雄不问出处吗?这句话太挫了。普通三本院校的我,大四的时候居然都不知道什么是校招,所以出处太重要了。这也是没有机会参加阿里校招的原因,毕竟校招门槛比社招还是要低的,最重要的是校招进入阿里能让你的起点比别人更高。 有幸可以社招进入阿里,了解了校招的思路,赶紧介绍给学弟们,现在我们三本院校的小学弟今年居然有 3 个人通过了阿里的校招。下面我也把这份宝贵的经...
作为一个程序员,CPU的这些硬核知识你必须会!
CPU对每个程序员来说,是个既熟悉又陌生的东西? 如果你只知道CPU是中央处理器的话,那可能对你并没有什么用,那么作为程序员的我们,必须要搞懂的就是CPU这家伙是如何运行的,尤其要搞懂它里面的寄存器是怎么一回事,因为这将让你从底层明白程序的运行机制。 随我一起,来好好认识下CPU这货吧 把CPU掰开来看 对于CPU来说,我们首先就要搞明白它是怎么回事,也就是它的内部构造,当然,CPU那么牛的一个东...
破14亿,Python分析我国存在哪些人口危机!
一、背景 二、爬取数据 三、数据分析 1、总人口 2、男女人口比例 3、人口城镇化 4、人口增长率 5、人口老化(抚养比) 6、各省人口 7、世界人口 四、遇到的问题 遇到的问题 1、数据分页,需要获取从1949-2018年数据,观察到有近20年参数:LAST20,由此推测获取近70年的参数可设置为:LAST70 2、2019年数据没有放上去,可以手动添加上去 3、将数据进行 行列转换 4、列名...
强烈推荐10本程序员在家读的书
很遗憾,这个春节注定是刻骨铭心的,新型冠状病毒让每个人的神经都是紧绷的。那些处在武汉的白衣天使们,尤其值得我们的尊敬。而我们这些窝在家里的程序员,能不外出就不外出,就是对社会做出的最大的贡献。 有些读者私下问我,窝了几天,有点颓丧,能否推荐几本书在家里看看。我花了一天的时间,挑选了 10 本我最喜欢的书,你可以挑选感兴趣的来读一读。读书不仅可以平复恐惧的压力,还可以对未来充满希望,毕竟苦难终将会...
Python实战:抓肺炎疫情实时数据,画2019-nCoV疫情地图
今天,群里白垩老师问如何用python画武汉肺炎疫情地图。白垩老师是研究海洋生态与地球生物的学者,国家重点实验室成员,于不惑之年学习python,实为我等学习楷模。先前我并没有关注武汉肺炎的具体数据,也没有画过类似的数据分布图。于是就拿了两个小时,专门研究了一下,遂成此文。
疫情数据接口api
返回json示例 { "errcode":0,//0标识接口正常 "data":{ "date":"2020-01-30 07:47:23",//实时更新时间 "diagnosed":7736,//确诊人数 "suspect":12167,//疑是病例人数 "death":170,//死亡人数 "cur...
智力题(程序员面试经典)
NO.1  有20瓶药丸,其中19瓶装有1克/粒的药丸,余下一瓶装有1.1克/粒的药丸。给你一台称重精准的天平,怎么找出比较重的那瓶药丸?天平只能用一次。 解法 有时候,严格的限制条件有可能反倒是解题的线索。在这个问题中,限制条件是天平只能用一次。 因为天平只能用一次,我们也得以知道一个有趣的事实:一次必须同时称很多药丸,其实更准确地说,是必须从19瓶拿出药丸进行称重。否则,如果跳过两瓶或更多瓶药...
疫情防控,开发者集结出战!
作者 | 屠敏出品 | CSDN(ID:CSDNnews)2020 年伊始,病毒肆虐,人心惶惶。截止北京时间 1 月 31 日 15 时 30 分,全国确诊新型冠状病毒肺炎的数字已达到了...
相关热词 c# 压缩图片好麻烦 c#计算数组中的平均值 c#获取路由参数 c#日期精确到分钟 c#自定义异常必须继承 c#查表并返回值 c# 动态 表达式树 c# 监控方法耗时 c# listbox c#chart显示滚动条
立即提问