自定義指令：

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

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

組件化：

組件是帶有名稱的可復用實例,組件系統是vue允許我們使用小型、獨立、可重復的組件構建復雜應用；如創建一個header組件并放到另一個組件中：

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

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

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

Provide\Inject父組件傳遞數據給子組件:

使用props從父組件向子組件傳遞數據時，當子組件嵌套太深時要逐級傳遞數據，會很麻煩；此時使用Provide\Inject就方便多了，具體使用如：

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

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

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

異步組件：

// 返回promise的工廠函數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:當實例創建后執行處理函數；生命周期鉤子還有一些如： mounted、updated 和 unmountedconsole.log(this.num) // 1 this指向當前實例,通過this.變量可以拿到變量的值}})

節流和防抖：

vue沒有內置的防抖和節流支持，借用lodash可實現此功能，如：

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

獲取DOM：

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

mint-ui使用簡介：

// 1.mint-ui就是element-ui的移動端版本，是餓了么團隊開發的。// 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按需引入部分組件實用型：// 1.引入部分組件 ： import {Cell,Checklist,...} from 'mint-ui'// 2.使用部分mint-ui組件 ： Vue.component(Cell,name,Cell)

過渡和動畫：

在vue中可以通過class和style自定義動畫和過渡，同時vue也提供了自己的動畫及過渡。

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

提示：本文圖片等素材來源于網絡，若有侵權，請發郵件至郵箱：810665436@qq.com聯系筆者刪除。
筆者：苦海

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。