vue中自定义指令组件化生命周期节流和防抖获取DOMmint-ui简介过渡和动画

Posted 2021-06-24 苦海123

自定义指令：

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.创建一个子组件*.vue
                        2.在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 和 unmounted
            console.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<!-- 处理应用中不同状态的过渡 -->

提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：[e-mail]联系笔者删除。
笔者：苦海