vue中插件的使用
<!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中插件的使用的更多相关文章
- atom中开发vue常用插件
atom: 开发利器,界面友好,配色出色,好用的插件众多. language-vue: 这个是首推,因为它就是为vue而生的呀,支持很多vue里的提示.在空的vue页面敲tem,vue模板的提示就自动 ...
- vue中自定义组件（插件）
vue中自定义组件(插件) 原创 2017年01月04日 22:46:43 标签: 插件 在vue项目中,可以自定义组件像vue-resource一样使用Vue.use()方法来使用,具体实现方法: ...
- vue中引用swiper轮播插件
有时候我们需要在vue中使用轮播组件,如果是在vue组件中引入第三方组件的话,最好通过npm安装,从而进行统一安装包管理. 申明:本文所使用的是vue.2x版本. 通过npm安装插件: npm ins ...
- webpack+vue中安装使用vue-layer弹窗插件
1.安装vue-layer插件 npm install vue-layer --save-dev 2.打包入口文件main.js中引入vue.vue-layer.并且将vue-layer添加到vue原 ...
- Vue中better-scroll插件的使用
实现原理:父容器固定高度,并设置属性overflow: hidden,使得子元素高度超出容器后能被隐藏.better-scroll作用在父容器上.1.npm安装better-scroll插件.npm ...
- 在Vue中使用layer.js弹出层插件
layer.js(mobile)是一个小巧方便的弹出层插件,在之前的apicloud项目中被大量使用,但最近对apicloud的IDE.非常不友好的文档和极低的开发效率深感厌烦,决定弃用然后转向Vue ...
- Vue中的v-model与my97日期选择插件冲突
Vue中的v-model指令只是一个语法糖,其具体实现是:监听input框的input事件,然后将用户输入的值赋值给input框的value属性 <input type="text&q ...
- vue中使用vue-pdf插件显示pdf
最近项目需求需要在vue中展示pdf,上网搜索了实现方法,找到vue-pdf这个插件非常好用,并且还有许多方法.属性能进行功能扩展. 一.安装 npm install --save vue-pdf 二 ...
- vue中使用第三方插件animate.css实现动画效果
vue中使用第三方插件animate.css实现动画效果1.首先先引入第三方类animated.css2.将你所需要动画的标签用包裹起来3.在transition元素中添加enter-active-c ...
随机推荐
- 简明git教程（单人版本）
最近开始写一个比较大的东西,所以需要用到git,之前一直在用金山快盘和乌龟搭建的SVN,最近想尝试一下git 1.安装 Ubuntu: sudo apt-get install git 老版本的Ubu ...
- B/S架构的网站测试
一.功能测试 1.链接测试 链接是Web应用系统的一个主要特征,它是在页面之间切换和指导用户去一些不知道地址的页面的主要手段.链接测试可分为三个方面.首先,测试所有链接是否按指示的那样确实链接到了 ...
- Spring cloud父项目的建立
1.建立一个maven项目 注意建立项目的时候.选择pom的包 2.添加架包 <project xmlns="http://maven.apache.org/POM/4.0.0&quo ...
- WIN7无法保存打印机设置错误0x000006d9处理办法(转载)
办公电脑安装了GHOST版WIN7操作系统,在设置打印机共享时,报(错误0x000006d9),无法设置打印机共享, 查看微软官方文档:说是停止或禁用了Windows防火墙服务,必须启用 Window ...
- Php+Redis队列原理
我们新建一个文件queue.php <?php while(true){ echo 1; sleep(1); } 然后中 命令行里面 执行 php queue 你会发现每秒钟输出一个1:等了很久 ...
- 滚动效果--marquee的使用
1. <marquee></marquee>标签,默认从最右侧往左滚动: 2. marquee 支持的属性 (1)behavior设置滚动方式: <marquee beh ...
- Django_学生管理系统
一. Django简易学生管理系统 1.在pycharm中创建工程student_manage_system,添加app:student_manage 2.配置静态文件:在工程项目目录下新建目录sta ...
- [BZOJ4916]神犇(Monster_Qi)和蒟蒻(SWHsz)
很久很久以前,有一只神犇叫Monster_Qi; 很久很久之后,有一只蒟蒻叫SWHsz; 1<=N<=1E9,A.B模1E9+7; 求这个. 求μ的话直接输出1就行了因为除了1的平方外都有 ...
- win10 1809磁盘占用总是100%
快过年了,提前请假回家,装几台电脑公司备用.有个电脑装完系统开机很慢,开机完成之后电脑响应也很慢,于是打开任务管理器发现磁盘中用率一直是100%,然而程序读取数据的速度并不高. 解决思路: 关闭win ...
- jedis 连接 redis
一.连接单机版的 redis /** * 直接连接 redis * @throws Exception */ @Test public void test1() throws Exception { ...