Vue的plugins插件

插件plugins.js:

export default {install(Vue){//定义全局过滤器Vue.filter("mySlice", function(value){return value.slice(0,5)});//定义全局混合Vue.mixin({data: function(){return {x:100,y:200}}});Vue.prototype.hello=()=>{alert("你好啊！")}}
}

main.js

import Vue from 'vue'
import App from './App.vue'Vue.config.productionTip = falseimport plugins from "./plugins"
Vue.use(plugins)new Vue({render: h => h(App),
}).$mount('#app')

SchoolCom.vue

<template><div><h1>学校名字:{{name}}</h1><h1>学校地址:{{address}}</h1></div>
</template><script>export default {name: "SchoolCom",data: function(){return {name: "深圳大学",address: "深圳"}},
}
</script>

StudentCom.vue

<template><div><h1>{{msg | mySlice}}</h1><h1>学生名字:{{name}}</h1><h1>学生年龄:{{age}}</h1><button @click="showHello">点我显示hello</button></div>
</template><script>export default {name: "StudentCom",data: function(){return {msg: "我是学生啊混合",name: "张三",age: 18}},methods:{showHello: function(){this.hello()}}
}
</script>

App.vue

<template><div><img src="./assets/logo.png"/><hr><StudentCom></StudentCom><hr><SchoolCom></SchoolCom></div>
</template><script>
import StudentCom from "./components/StudentCom"
import SchoolCom from "./components/SchoolCom"export default {name: "App",components:{StudentCom: StudentCom,SchoolCom: SchoolCom}
}
</script>

Vue的plugins插件相关推荐

vue连线插件_一起写一个即插即用的 Vue Loading 插件
写在之前实现 Loading 思路上并不困难,只不过是根据请求前后进行设置而已,可当要设置的状态越来越多又不能全局统一设置时,就又变得十分繁琐重复.在 Github 和各个社区站里搜 Loading ...
plugins 插件
## 插件:功能:用于增强Vue1. 本质包含install方法的一个对象,install的第一个参数是Vue,第二个的参数是插件使用者传递的数据2. 定义插件:对象.install = functi ...
Vue CLI 官方文档（一）@vue/cli、@vue/cli-service、插件和 Preset
Vue CLI 官方文档(一)@vue/cli.@vue/cli-service.插件和 Preset 文章目录 Vue CLI 官方文档(一)@vue/cli.@vue/cli-service.插件 ...
前端Vue制作日历插件FullCalendar
前端Vue制作日历插件FullCalendar 官方文档:https://fullcalendar.io/ 效果图安装 Vue2:npm install --save @fullcalendar/v ...
vue调用cordova 插件_Vue.js 使用cordova camera插件调取相机
本文给出在vue.js里如何使用cordova的插件完成调取相机及图库,并完成图片上传的操作. 具体的操作步骤如下第一步:在cordova项目下安装cordova-plugin-camera插件 c ...
vue连线插件_Vue + 常用第三方插件基础使用
Vue + 常用第三方插件基础使用一.Vue + element 1.element-->快速入手-->按需引入方式: (1).安装element-ui //-S等同于:--save ...
一文教会你如何用Vue开发Chrome插件
前言作为一个常年的B端前端开发者来说,千篇一律的业务开发有着些许的枯燥无味.在联调过程中,会经常发现后端在部署服务,然后又不知什么时候部署好,由于公司的部署系统查看系统部署状态入口较深,所以闲暇之余 ...
SpringBoot之Vue安装幻灯片插件
SpringBoot之Vue安装幻灯片插件前台项目使用了nuxt模板,但这个模板没有Element组件,所以需要引入 Nuxt官网 1.安装插件 npm install vue-awesome-sw ...
vue官方eslint插件配置eslint-plugin-vue-libs
由于eslint-config-vue已经被废弃,于是总结了一下eslint-plugin-vue-libs的eslint config配置,如下: module.exports = {extends ...

Vue的plugins插件

Vue的plugins插件相关推荐

最新文章

热门文章