Vue 中plugins插件的使用
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:界面效果图
为人:谦逊、激情、博学、审问、慎思、明辨、 笃行
学问:纸上得来终觉浅,绝知此事要躬行
为事:工欲善其事,必先利其器。
态度:道阻且长,行则将至;行而不辍,未来可期
.....................................................................
------- 桃之夭夭,灼灼其华。之子于归,宜其室家。 ---------------
------- 桃之夭夭,有蕡其实。之子于归,宜其家室。 ---------------
------- 桃之夭夭,其叶蓁蓁。之子于归,宜其家人。 ---------------
=====================================================================
* 博客文章部分截图及内容来自于学习的书本及相应培训课程以及网络其他博客,仅做学习讨论之用,不做商业用途。
* 如有侵权,马上联系我,我立马删除对应链接。 * @author Alan -liu * @Email no008@foxmail.com
转载请标注出处! ✧*꧁一品堂.技术学习笔记꧂*✧. ---> https://www.cnblogs.com/ios9/
学问:纸上得来终觉浅,绝知此事要躬行
为事:工欲善其事,必先利其器。
态度:道阻且长,行则将至;行而不辍,未来可期
.....................................................................
------- 桃之夭夭,灼灼其华。之子于归,宜其室家。 ---------------
------- 桃之夭夭,有蕡其实。之子于归,宜其家室。 ---------------
------- 桃之夭夭,其叶蓁蓁。之子于归,宜其家人。 ---------------
=====================================================================
* 博客文章部分截图及内容来自于学习的书本及相应培训课程以及网络其他博客,仅做学习讨论之用,不做商业用途。
* 如有侵权,马上联系我,我立马删除对应链接。 * @author Alan -liu * @Email no008@foxmail.com
转载请标注出处! ✧*꧁一品堂.技术学习笔记꧂*✧. ---> https://www.cnblogs.com/ios9/