Vue 中plugins插件的使用
1：说明
/*
## 插件
1. 功能：用于增强Vue
2. 本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。
3. 定义插件：
```js
对象.install = function (Vue, options) {
// 1. 添加全局过滤器
Vue.filter(....)
// 2. 添加全局指令
Vue.directive(....)
// 3. 配置全局混入(合)
Vue.mixin(....)
// 4. 添加实例方法
Vue.prototype.$myMethod = function () {...}
Vue.prototype.$myProperty = xxxx
}
```
4. 使用插件：```Vue.use()```
*/
2：代码结构
3：代码内容
vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave:false /*关闭语法检查*/
})
main.js
//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue生产提示
Vue.config.productionTip=false;
// 引入插件
import plugins from './plugins'
//应用插件
Vue.use(plugins)
// 创建Vm
const vm = new Vue( {
el:'#app',
render: (h) => h(App)
});
index.html
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<!-- 针对ie浏览器的一个特殊配置，含义是让ie浏览器以最高的渲染级别进行渲染界面 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 开启移动端理想视口 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!-- 配置页签的图标 -->
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<!-- 配置网页的标题：找 package.json文件里的 "name": "vue_test" 值 -->
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<!-- 如果浏览器不支持js，则该标签的元素里的内容将会被渲染 -->
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<!-- 容器 -->
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
App.vue
<!--
-->
<template>
<div>
<hr/>
<div class="divCss">
<h1 class="h1Css">Vue中的 plugins插件</h1>
<hr/>
<!-- 调用组件，传递数据 -->
<School/>
<hr/>
<Student />
<hr/>
</div>
</div>
</template>
<script>
import School from './components/School.vue';
import Student from './components/Student.vue';
export default {
name:'App',
components:{
Student,
School
},
}
</script><style>
.divCss{
background-color: chocolate;
margin: auto;
padding: 20px;
}
.h1Css{
font-size: 36px;
color: white;
}
plugins.js
/*
## 插件
1. 功能：用于增强Vue
2. 本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。
3. 定义插件：
```js
对象.install = function (Vue, options) {
// 1. 添加全局过滤器
Vue.filter(....)
// 2. 添加全局指令
Vue.directive(....)
// 3. 配置全局混入(合)
Vue.mixin(....)
// 4. 添加实例方法
Vue.prototype.$myMethod = function () {...}
Vue.prototype.$myProperty = xxxx
}
```
4. 使用插件：```Vue.use()```
*/
export default{
/* Vue入参 为vue 对象的构造器 */
install(Vue){
console.log("@@@@@@@@@@@@@@@@@@@@@@install@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@",Vue);
//全局过滤器
Vue.filter('mySlice',function(value){
return value.slice(0,4)
}) ;
//全局自定义指令
Vue.directive("fbind",{
//指令与元素成功绑定时（一上来）
bind(element,binding){
//console.log("fbind.bind",this);//注意此处的this是window
element.value = binding.value;
},
//指令所在元素被插入页面时
inserted(element,binding){
//console.log("fbind.inserted",this);//注意此处的this是window
element.focus();
},
//指令所在的模板被重新解析时
update(element,binding){
//console.log("fbind.update",this);//注意此处的this是window
element.value = binding.value;
}
})
Vue.directive('big1',function(element,binding){
//console.log('big1',this);//注意此处的this是window
element.innerText=binding.value * 1000;
});
// 全局混入
Vue.mixin({
data () {
return {
x:100,
y:100
}
}
})
// 给Vue原型上添加1个方法
Vue.prototype.hello=()=>{alert('你好啊！')}
}
}
Student.vue
<!--
-->
<template>
<div class="schoolClassStyle">
<h1 style="color:red">{{msg}}</h1>
<h2 >学生名称：{{name}}</h2>
<h2>学生性别：{{sex}}</h2>
<input type="text" v-fbind:value="name" style="margin-left:10px;"/><span style="color:dimgrey;font-size: 9px;padding: 20px;margin-left: 20px;">测试插件的全局绑定 </span>
<button @click="clickHelloInfo">点击测试插件的属性hello方法</button>
<br/>
</div>
</template>
<script>
export default {
name:'Student',
data () {
return {
msg:'学生信息',
name:'向北',
sex:'男'
}
},
methods:{
clickHelloInfo(){
this.hello()
}
}
}
</script>
<style>
.schoolClassStyle{
background-color: aquamarine;
}
</style>
School.vue
<!--
-->
<template>
<div class="schoolClassStyle">
<h1 style="color:red">{{msg}}</h1>
<h2 >学校名称：{{name | mySlice}}<span style="color:dimgrey;font-size: 9px;padding: 20px;margin-left: 20px;"> 测试插件中全局管道符</span></h2><!-- 给学校名称属性name 增加1个 mySlice的过滤器属性 -->
<h2>学校地址：{{address}}</h2>
</div>
</template>
<script>
export default {
name:'School',
data () {
return {
msg:'学校信息',
name:'华南师范大学',
address:'广州市天河区中山大道西55号'
}
},
}
</script>
<style>
.schoolClassStyle{
background-color: aquamarine;
}
</style>
4:界面效果图
为人：谦逊、激情、博学、审问、慎思、明辨、 笃行
学问：纸上得来终觉浅，绝知此事要躬行
为事：工欲善其事，必先利其器。
态度：道阻且长，行则将至；行而不辍，未来可期
.....................................................................
------- 换了个头像，静静的想，默默的思恋，一丝淡淡的忧伤 ----------
------- 桃之夭夭，灼灼其华。之子于归，宜其室家。 ---------------
------- 桃之夭夭，有蕡其实。之子于归，宜其家室。 ---------------
------- 桃之夭夭，其叶蓁蓁。之子于归，宜其家人。 ---------------
====================================================================
