Vue 中plugins外掛的使用
阿新 • • 發佈：2022-12-04
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>
