自定義指令：

vue中通過directive方法自定義指令，如：自定義一個(gè)v-focus指令：

<script>Vue.directive('focus', {//通過directive('指令名',{配置})注冊(cè)全局指令inserted: function (el) {//inserted:表示當(dāng)自定義指令插入元素后，后面跟處理函數(shù)el.focus()//通過原生API獲取光標(biāo)}})//實(shí)例化：new Vue({el: '#app',//directives:{},//directives可在實(shí)例中注冊(cè)局部指令，用法：directives:{指令名:{inserted:處理函數(shù)}}})</script><div id="app"><input v-focus></div>//自定義使用使用

組件化：

組件是帶有名稱的可復(fù)用實(shí)例,組件系統(tǒng)是vue允許我們使用小型、獨(dú)立、可重復(fù)的組件構(gòu)建復(fù)雜應(yīng)用；如創(chuàng)建一個(gè)header組件并放到另一個(gè)組件中：

// 1.定義數(shù)據(jù)配置：const db = {data() {return {text: 'header'}},template:`<h2>{{text}}</h2>`}// 2.創(chuàng)建 Vue 應(yīng)用實(shí)例并將定義的數(shù)據(jù)配置給app實(shí)例:const app = Vue.createApp(db)//新版vue中通過createApp函數(shù)創(chuàng)建實(shí)例// 3.給app定義名為 head-vue 的組件:（component聲明全局組件，components聲明局部組件）//全局組件：app.component('head-vue', {props: ['person'],//props:接收父組件變量供子組件使用,后面可接數(shù)組或?qū)ο?#xff08;當(dāng)需要指定變量值類型時(shí)使用對(duì)象方式，如：person:String）template: `<li>{{person.names}}<button @click="$emit('big')">按鈕</button></li>`,//$meit用于調(diào)用內(nèi)建括事件，括號(hào)里面?zhèn)魅雰?nèi)建函數(shù)名，如：@big='Font += 1'供按鈕調(diào)用emits: ['inFocus', 'submit']//定義已發(fā)出事件})// 局部組件聲明：const comA = {}; //在對(duì)象中定義組件const comB = {};const app = Vue.createApp({components: {//components后面接一個(gè)對(duì)象，對(duì)象中以：'組件名':組件 的形式聲明組件'componentA': ComA,'componentB': ComB}})//注意：局部注冊(cè)的組件在其子組件中不可用，如果想要在comA中使用comB,可這樣聲明組件：const comA = {components:{'componentB':comB}}//或者使用es6中模塊導(dǎo)入的方式：import comB from './comB.vue'export default {//在組件comA中components: {componentB:comB}}// 4.mount掛載 Vue 應(yīng)用到Dom上：app.mount('#box')//5.在另一個(gè)組件使用head-vue：<div><head-vue></head-vue>//可以將組件進(jìn)行任意次數(shù)的復(fù)用,互不影響</div>

子組件和全局組件基本用法：

<script>// 1.SPA架構(gòu)：// 2.父組件和子組件：使用的是父組件，被使用的是子組件，父組件在使用子組件的時(shí)候，父組件要聲明子組件、引入子組件、使用組件對(duì)象// 3.子組件的使用：// 1.創(chuàng)建一個(gè)子組件*.vue// 2.引入子組件到父組件script部分export default前面，如引入一個(gè)footer組件： import footer from './footer.vue'// 3.export default{}中聲明子組件：components:{footervue:footer,headervue:header}// 4.父組件template中使用：<template><div><footervue></footervue></div></template>//4.全局組件的使用：1.創(chuàng)建一個(gè)子組件*.vue2.在main.js文件中引入子組件：import headervue from './components/header.vue'，并使用：vue.component('組件名',組件對(duì)象)聲明為全局組件3.父組件template中使用：<template><div><footervue></footervue></div></template>//5.父組件傳遞值給子組件：1.在父組件template中的子組件<*** key='value'></***>加入key='value'----傳遞參數(shù)，或者<*** v-bind:key='變量名'></***>//2.在子組件export default 里的props里面加入?yún)?shù)的key，如： props:['key','key1'] -----接收父組件參數(shù)的設(shè)置//3.在子組件template中通過使用{{key}}的方式使用參數(shù)//注意：在js中可以通過this.key的方式獲取key并使用//6.vueBus的通信使用來實(shí)現(xiàn)子組件通信父組件：1.創(chuàng)建一個(gè)sub.vue子組件文件，并在main.js文件中引入子組件：import sub from './sub.vue'，并使用：vue.component('sub',sub)使其成為全局子組件 或者 在components:{}中定義為局部子組件// 2.創(chuàng)建一個(gè)用來通信的連接器connector.js文件,此文件實(shí)際導(dǎo)出的是一個(gè)vue實(shí)例對(duì)象：new Vue(),代碼如：//import Vue from 'vue';//var connector = new Vue();//export default connector;// 3.分別在父組件和子組件引入connector.js連接器文件// 4.在父組件使用：連接器connector.$on('事件名',function(mes){console.log(mes)})監(jiān)聽子組件的通訊// 5.在子組件使用：connector.$emit('事件名','子組件發(fā)送的內(nèi)容') 發(fā)送通訊，唯一標(biāo)識(shí) 子父一致//注意：具體使用看Vuetest案例分析</script>

Provide\Inject父組件傳遞數(shù)據(jù)給子組件:

使用props從父組件向子組件傳遞數(shù)據(jù)時(shí)，當(dāng)子組件嵌套太深時(shí)要逐級(jí)傳遞數(shù)據(jù)，會(huì)很麻煩；此時(shí)使用Provide\Inject就方便多了，具體使用如：

//如在父組件fatherView中n層下面有一個(gè)子組件sonViewNz,此時(shí)子組件想要拿到父組件中的一個(gè)數(shù)據(jù)（例如變量user中的值），如下：app.component('fatherView', {data() {arr: [1, 2, 3]},provide: { //provide：用來在父組件中定義要傳入子組件的數(shù)據(jù)，數(shù)據(jù)通過鍵值對(duì)的方式傳遞給子組件user: 'jack',},provide() { //當(dāng)要訪問父組件屬性值時(shí)，上面的變量方法是行不通的，要使用返回對(duì)象provide的函數(shù)的形式傳遞數(shù)據(jù)return {// fatherArrLenth: this.arr.length //:默認(rèn)情況下傳遞的數(shù)據(jù)不是響應(yīng)式的，也就是說父組件中數(shù)據(jù)改變時(shí)傳遞的值不會(huì)改變，想要改變就要使用Vue.computed方法處理數(shù)據(jù)，如下：fatherArrLenth: Vue.computed(() => this.arr.length),}}})app.component('sonViewN', {data() {},inject: ['user'], //inject:在子組件中接收父組件中傳入過來的數(shù)據(jù)，后面接一個(gè)數(shù)組，里面?zhèn)魅敫附M件中要傳遞數(shù)據(jù)的變量名created() { //鉤子事件處理函數(shù)console.log(`${this.user}`); //通過this.變量名即可拿到數(shù)據(jù)}})

使用keep-alive解決is性能問題：

//利用is指令可以實(shí)現(xiàn)不同組件之間的切換，但是有時(shí)候會(huì)保持這些組件的狀態(tài)來避免反復(fù)渲染，此時(shí)可以使用keep-alive，如：<keep-alive><viewCom :is = 'coms'></viewCom></keep-alive>

異步組件：

// 返回promise的工廠函數(shù)const app = Vue.createApp({})const AsyncComp = Vue.defineAsyncComponent(() =>new Promise((resolve, reject) => {resolve({template: '異步'})}))app.component('asyncComp', AsyncComp)//es6形式：import {defineAsyncComponent} from 'vue'const AsyncComp = defineAsyncComponent(() =>import ('./components/AsyncComponent.vue'))app.component('asyncComponent', AsyncComp)

生命周期鉤子：

Vue.createApp({data() {return { num: 1 }},created() {//created:當(dāng)實(shí)例創(chuàng)建后執(zhí)行處理函數(shù)；生命周期鉤子還有一些如： mounted、updated 和 unmountedconsole.log(this.num) // 1 this指向當(dāng)前實(shí)例,通過this.變量可以拿到變量的值}})

節(jié)流和防抖：

vue沒有內(nèi)置的防抖和節(jié)流支持，借用lodash可實(shí)現(xiàn)此功能，如：

<script src="https://unpkg.com/lodash@4.17.20/lodash.min.js"></script><script>Vue.createApp({methods: {click: _.debounce(function() {//}, 300)}}).mount('#app')//注意：此方式使可復(fù)用組件共享相同的防抖處理函數(shù)，為彼此獨(dú)立，可將此添加到created鉤子中</script>

獲取DOM：

1.前端框架就是為了減少DOM操作，但是在特殊情況下，也可以操作DOM的。2.操作DOM的步驟：1.在需要操作的DOM元素上添加：ref='名稱A'2.在需要獲取的地方加入：this.$refs.名稱A注意：在子組件上獲取DOM元素的方式為：this.$refs.名稱.$el

mint-ui使用簡(jiǎn)介：

// 1.mint-ui就是element-ui的移動(dòng)端版本，是餓了么團(tuán)隊(duì)開發(fā)的。// 2.使用步驟：// 1.安裝： npm install mint-ui -S// 2.引入vue : import Vue from 'vue' // 3.1引入全部組件使用型： // 1.引入mint-ui : import Mint from 'mint-ui'// 2.使用全部mint-ui： Vue.use(Mint)// 3.2按需引入部分組件實(shí)用型：// 1.引入部分組件 ： import {Cell,Checklist,...} from 'mint-ui'// 2.使用部分mint-ui組件 ： Vue.component(Cell,name,Cell)

過渡和動(dòng)畫：

在vue中可以通過class和style自定義動(dòng)畫和過渡，同時(shí)vue也提供了自己的動(dòng)畫及過渡。

<!-- 1.<transition name='key'>:控制元素或組件進(jìn)入和離開時(shí)觸發(fā)過渡,它有6個(gè)控制過渡效果的類名（v-enter-from進(jìn)入過渡開始狀態(tài)、v-enter-active進(jìn)入過渡生效狀體、v-enter-to進(jìn)入過渡結(jié)束狀態(tài)、v-leave-from離開過渡開始狀態(tài)、v-leave-active離開過渡生效狀態(tài)、v-leave-to離開過渡結(jié)束狀態(tài)），這6個(gè)控制狀態(tài)的class類在使用時(shí)需要注意：transition上面應(yīng)該有一個(gè)name屬性，其值為這6個(gè)類名的標(biāo)識(shí)，具體使用時(shí)，將這6個(gè)類名中v替換為transition中name的屬性值；同時(shí)在transition中的元素被插入或刪除時(shí)，vue自動(dòng)監(jiān)聽類的變化外，還會(huì)監(jiān)聽鉤子函數(shù)，如下： -->.fade-enter-from{}里面正常寫CSS代碼，當(dāng)p標(biāo)簽出現(xiàn)或消失時(shí)就會(huì)使用到這里6個(gè)類中對(duì)應(yīng)狀態(tài)的過渡效果<transition name='fade'><p v-if="show">hello</p></transition><transition :duration="1000">...</transition><!-- :duration='毫秒值'用來控制過渡或動(dòng)畫時(shí)間，值也可以是一個(gè)對(duì)象：{ enter: 500, leave: 800 }控制具體進(jìn)入離開的時(shí)間 --><transition @before-enter="beforeEnter :css="false"">css="false"用于跳過過渡檢測(cè)，提高性能</transition><!-- 可在transition中聲明鉤子函數(shù)，用函數(shù)控制具體的效果，@before-enter類似事件，"beforeEnter"為事件處理函數(shù)名；事件還有：enter、after-enter、enter-cancelled、before-leave、leave、after-leave、leave-cancelled--><transition mode="out-in"></transition><!-- mode用于設(shè)置過渡模式，其值有：in-out新元素先過渡，過渡完后當(dāng)前元素在過渡、out-in順序相反 --><transition-group tag="ul"></transition-group><!-- 處理多個(gè)元素，渲染列表等，tag用于聲明該組中transition-group類型，如果里面元素為li等，這里可設(shè)置為ul -->watchers<!-- 處理應(yīng)用中不同狀態(tài)的過渡 -->

提示：本文圖片等素材來源于網(wǎng)絡(luò)，若有侵權(quán)，請(qǐng)發(fā)郵件至郵箱：810665436@qq.com聯(lián)系筆者刪除。
筆者：苦海

總結(jié)

以上是生活随笔為你收集整理的vue中自定义指令、组件化、生命周期、节流和防抖、获取DOM、mint-ui简介、过渡和动画的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。