<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>plugs</title>
</head>
<body>
	<div id="app">
		<input type="text" v-input-focus>
		<box :func="getMt"></box>
	</div>
	<script src="node_modules/vue/dist/vue.js"></script>
	<script>
		//定义插件
		var plugs = {};
		plugs.install = function(Vue,options){
			Vue.mixin({
				created () {
				}
			})

			Vue.directive('input-focus',{
				inserted (el,binding){
					el.focus()
				}
			})

			Vue.prototype.$common = () => {
				return {
					add () {
						alert('add')
					}
				}
			}

			Vue.component('box',{
				data(){
					return {
						style:{width:'1000px',height:'1000px',border:'1px solid #ccc'},
						myfunc:this.func
					}
				},
				template:`<div :style="style" @click="myfunc('hello word')"></div>`,
				props:['func'],
				mounted (){
					console.log(this.myfunc)
				}
			})
		}

		//使用插件
		Vue.use(plugs)

		var vm = new Vue({
			data:{
				getMt:function(val){
					alert(val)
				}
			}
		}).$mount('#app')
	</script>
</body>
</html>

　　

vue中插件的使用的更多相关文章

  1. atom中开发vue常用插件

    atom: 开发利器,界面友好,配色出色,好用的插件众多. language-vue: 这个是首推,因为它就是为vue而生的呀,支持很多vue里的提示.在空的vue页面敲tem,vue模板的提示就自动 ...

  2. vue中自定义组件（插件）

    vue中自定义组件(插件) 原创 2017年01月04日 22:46:43 标签: 插件 在vue项目中,可以自定义组件像vue-resource一样使用Vue.use()方法来使用,具体实现方法: ...

  3. vue中引用swiper轮播插件

    有时候我们需要在vue中使用轮播组件,如果是在vue组件中引入第三方组件的话,最好通过npm安装,从而进行统一安装包管理. 申明:本文所使用的是vue.2x版本. 通过npm安装插件: npm ins ...

  4. webpack+vue中安装使用vue-layer弹窗插件

    1.安装vue-layer插件 npm install vue-layer --save-dev 2.打包入口文件main.js中引入vue.vue-layer.并且将vue-layer添加到vue原 ...

  5. Vue中better-scroll插件的使用

    实现原理:父容器固定高度,并设置属性overflow: hidden,使得子元素高度超出容器后能被隐藏.better-scroll作用在父容器上.1.npm安装better-scroll插件.npm ...

  6. 在Vue中使用layer.js弹出层插件

    layer.js(mobile)是一个小巧方便的弹出层插件,在之前的apicloud项目中被大量使用,但最近对apicloud的IDE.非常不友好的文档和极低的开发效率深感厌烦,决定弃用然后转向Vue ...

  7. Vue中的v-model与my97日期选择插件冲突

    Vue中的v-model指令只是一个语法糖,其具体实现是:监听input框的input事件,然后将用户输入的值赋值给input框的value属性 <input type="text&q ...

  8. vue中使用vue-pdf插件显示pdf

    最近项目需求需要在vue中展示pdf,上网搜索了实现方法,找到vue-pdf这个插件非常好用,并且还有许多方法.属性能进行功能扩展. 一.安装 npm install --save vue-pdf 二 ...

  9. vue中使用第三方插件animate.css实现动画效果

    vue中使用第三方插件animate.css实现动画效果1.首先先引入第三方类animated.css2.将你所需要动画的标签用包裹起来3.在transition元素中添加enter-active-c ...

随机推荐

  1. 从无到有创建一个grunt项目

    在安装好grunt的前提下创建一个grunt的项目: 1.首先创建一个项目文件 就叫grunt-project 2.进入这个文件 创建一个index.html 在创建一个js文件,进去创建一个inde ...

  2. React从安装到实战

    建议:初学者看之前请先看一遍菜鸟教程 可以安装一个ATOM编辑器,本人觉得很好用 一.安装并启动项目:网址  搭建好的项目目录为: 二.开始写项目: 1.组件到界面流程: 定义一个组件app.js导出 ...

  3. Centos7下 yum安装php扩展

    linux下, 使用thinkphp的模板标签,如 eq, gt, volist defined, present , empty等 标签时, 报错: used undefined function ...

  4. C语言提高 (3) 第三天 二级指针的三种模型 栈上指针数组、栈上二维数组、堆上开辟空间

    1 作业讲解 指针间接操作的三个必要条件 两个变量 其中一个是指针 建立关联:用一个指针指向另一个地址 * 简述sizeof和strlen的区别 strlen求字符串长度,字符数组到’\0’就结束 s ...

  5. sessionStorage与clone方法在项目中的应用

    //资料列表: //JSON.parse(jsonstr); //json格式字符串转换成json对象 //JSON.stringify(jsonobj); //json对象转换成json格式字符串 ...

  6. 训练1-C

    妈妈每天都要出去买菜,但是回来后,兜里的钱也懒得数一数,到底花了多少钱真是一笔糊涂帐.现在好了,作为好儿子(女儿)的你可以给她用程序算一下了,呵呵. Input 输入含有一些数据组,每组数据包括菜种( ...

  7. [bzoj 2726] 任务安排 （斜率优化 线性dp）

    3月14日第三题!!!(虽然是15号发的qwq) Description 机器上有N个需要处理的任务,它们构成了一个序列.这些任务被标号为1到N,因此序列的排列为1,2,3-N.这N个任务被分成若干批 ...

  8. 【hihocoder 1308】搜索二·骑士问题

    [题目链接]:http://hihocoder.com/problemset/problem/1308 [题意] [题解] 用bfs处理出3个骑士到每个点的最短路; 然后枚举最后3个骑士到了哪一个点. ...

  9. 【codeforces 805B】3-palindrome

    [题目链接]:http://codeforces.com/contest/805/problem/B [题意] 让你生成一个只包含a,b,c的字符串; 要求c出现的次数最少,且任意一个 长度为3的子串 ...

  10. HDU5976 Detachment

    /* HDU5976 Detachment http://acm.hdu.edu.cn/showproblem.php?pid=5976 数论 等差数列 * * */ #include <cst ...