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 ...
随机推荐
- iframe子页面调用父页面js函数
window.parent.document.getElementById("test").value; jQuery方法为: $(window.parent.document). ...
- vue组件通信，点击传值，动态传值（父传子，子传父）
转载:https://blog.csdn.net/xr510002594/article/details/83304141 一.父组件传子组件,核心--props 在这里触发 handleClick ...
- 树状数组求LIS
我真的是咸鱼啊 多少年前的基础了我竟然才弄明白,哭 用树状数组维护<=x的最上上升子序列的最大值即可啊Orz 我真的菜的一笔啊! #include <bits/stdc++.h> u ...
- Nginx学习（1）--- 介绍与安装
1.基础介绍 常用功能 1.HTTP服务 动静分离.WEB缓存.虚拟主机设置.URL Rewrite 2.负载均衡 3.反向代理 4.正向代理 5.邮件服务器 优点 高扩展.高可用.支持高并发.低资源 ...
- 搞定PHP面试 - 函数知识点整理
一.函数的定义 1. 函数的命名规则 函数名可以包含字母.数字.下划线,不能以数字开头. function Func_1(){ } //合法 function func1(){ } //合法 func ...
- [剑指offer] 29. 顺时针打印矩阵 (for循环条件)
思路: 先定义左上和右下角点坐标,打印可分为从左到右,从上到下,从右到左,从下到上.依次判断最后一圈的四个循环条件. #include "../stdafx.h" #include ...
- 关于安卓sdk开发环境的的更新-Android SDK下载和更新失败
由于特别原因,我们更新安卓sdk时不会成功.解决办法: 修改C:\Windows\System32\drivers\etc\hosts文件.添加一行:74.125.237.1 dl-ssl ...
- Spring学习总结（19）——Spring概念详解
Spring是一个开源框架,Spring是于2003 年兴起的一个轻量级的Java 开发框架,由Rod Johnson创建.简单来说,Spring是一个分层的JavaSE/EEfull-stack(一 ...
- 洛谷—— P1238 走迷宫
https://www.luogu.org/problem/show?pid=1238 题目描述 有一个m*n格的迷宫(表示有m行.n列),其中有可走的也有不可走的,如果用1表示可以走,0表示不可以走 ...
- [Beginning SharePoint Designer 2010]Chapter5 主题和样式
本章概要: 1.什么是CSS 2.样式表的组成 3.如何管理CSS适应SPD的工具和特性 4.被SPS使用的关键的CSS类别 5.使用SPD应用样式到你的站点上