VUE系列-Vue核心应用(二)

港控/mmm° 2022-09-13 04:28 194阅读 0赞

> 大家好，我是前端岚枫，一枚二线城市的程序媛，上篇主要跟分享了[《Vue核心概念及特性 (一)》][Vue_]，今天主要跟大家分享我整理的vue的一些常用的核心应用，主要包括一些表单组件、自定义指令、修饰符、watch、computed、动画、vue的生命周期及可能涉及到一些常用的面试题，vue面试题相关的答案我后期会专门整理分享。

## 一.v-model的使用 ##

### 1.1 select ###

<select v-model="select">
        <option v-for="fruit in fruits" :value="fruit">
                {
       {fruit}}
        </option>
    </select>

### 1.2 radio ###

### 1.3 checkbox ###

### 1.4 修饰符应用 .number .lazy .trim ###

## 二.自定义指令 ##

*  全局指令和局部指令
 *  编写一个自定义指令
    
     *  钩子函数bind，inserted，update

<input type="text" v-focus.color="'red'">
        Vue.directive('focus',{ 
            inserted:(el,bindings)=>{ 
                let color = bindings.modifiers.color;
                if(color){ 
                    el.style.boxShadow = `1px 1px 2px ${ bindings.value}`
                }   
                el.focus();
            }
        });

*  clickoutside指令

<div v-click-outside="change">
            <input type="text" @focus="flag=true" >
            <div v-show="flag">
                contenter
            </div>
        </div>
        <script> let vm = new Vue({ el:'#app', data:{ flag:false }, methods:{ change(){ this.flag = false } }, directives:{ 'click-outside'(el,bindings,vnode){ document.addEventListener('click',(e)=>{ if(!el.contains(e.target,vnode)){ let eventName = bindings.expression; vnode.context[eventName]() } }) } } }) </script>

## 三.watch和computed ##

为什么总有面试问他们的区别? 先说watch 和 computed内部调用的都是`new Watcher`

### 3.1 watch (监控) ###

先来看下`watch`

> 当数据变化后会执行对应的处理函数

### 3.2.computed ###

源代码中通过,`watcher` 来实现脏值检测的

*  watch 每次值变化后 都能执行对应的回调
 *  computed 计算属性 多次取值是用缓存效果的，如果依赖的值变化 会重新执行
 *  computed defineProperty get / set

## 四.动画 ##

元素的显示隐藏都可以增加动画效果`v-if`、`v-show`、`v-for`、路由切换等操作。

常见的增加动画的方式有 `animation` 、 `transition` 、 `js编写动画`

### 4.1 css3动画 ###

![931e2794854c14f42556ddf3c9c50a4d.png_id_MfLT8_originHeight_600_originWidth_1200_originalType_binary_ratio_1_status_done_style_none][]

我们先要具体掌握一下每个样式的触发阶段

.content{ 
        width: 100px;height: 100px;background: red;;;
    }
    .v-enter{  /*进入前*/
        background: blue;
        opacity: 0;
    }
    .v-enter-active{  /*进入中*/
        transition: all 2s linear;
    }
    .v-enter-to{  /*目标*/
        background: black;
    }
    /* 回到默认效果 红色 */
    .v-leave{  /*开始离开*/
        background: yellow;
    }
    .v-leave-active{  /*离开中*/
        transition: all 2s linear;
    }
    .v-leave-to{  /*目标*/
        background: green;
    }
    /*元素隐藏*/

> 我们可以使用`name属性来更改默认v-前缀`

**配合**`**animate.css**`**使用**

安装`animate.css`

npm install animate.css

也可以采用直接指定样式的方式

### 4.2 js编写动画 ###

**常用的钩子**

*  before-enter 触发enter之前
 *  before-leave 触发leave之前
 *  enter 进入动画过程
 *  leave 离开动画过程
 *  after-enter 进入动画结束
 *  after-leave 离开动画结束

添加购物车的例子:

<ul>
        <li v-for="(list,index) in lists" ref="lists">
            <div class="cover">
                <img :src="list.cover">
            </div>
            <button @click="addCart(index)">加入购物车</button>
        </li>
        
        <transition @enter="enter" @after-enter="afterEnter" >
            <span class="animate" v-if="showAnimate"></span>
        </transition>
    </ul>
    <div class="cart" ref="cart">快进来!!!</div>

我们可以借助 `v-if`来实现动画效果

### 4.3 多元素动画 ###

如果动画遇到`v-for`就需要使用`transition-group`,而且每个元素必须增加`key`属性

<div class="nav-list" ref="box">
        <transition-group>
            <div class="nav-item" v-for="i in count" v-show="isShow" :key="i">{
       {i}}</div>
        </transition-group>
    </div>
    <div class="nav" @click="show()">导航</div>
    <script> let vm = new Vue({ el: '#app', methods:{ // 控制是否显示 show(){ this.isShow = !this.isShow} }, data() { return { isShow: false, count:6 // 循环六个导航 } } }) </script>

.nav-list .v-enter{  /*进入前的状态*/
        opacity: 0;
        transform: translate(0,0);
    }
    .v-enter-active,.v-leave-active{  /*运动中的效果*/
        transition: all .5s linear;
    } 
    .nav-list .v-leave-to{  /*离开后的目标*/
        transform: translate(0,0);
        opacity: 0;
    }

## 五.Vue中的生命周期 ##

*  beforeCreate 在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。
 *  created 实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。这里没有$el
 *  beforeMount 在挂载开始之前被调用：相关的 render 函数首次被调用。
 *  mounted el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
 *  beforeUpdate 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
 *  updated 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
 *  beforeDestroy 实例销毁之前调用。在这一步，实例仍然完全可用。
 *  destroyed Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。

### 钩子函数中该做的事情 ###

*  created 实例已经创建完成，因为它是最早触发的原因可以进行一些数据，资源的请求。
 *  mounted 实例已经挂载完成，可以进行一些DOM操作
 *  beforeUpdate 可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
 *  updated 可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。 该钩子在服务器端渲染期间不被调用。
 *  destroyed 可以执行一些优化操作,清空定时器，解除绑定事件

## 六.面试题环节 ##

*  computed和watch有什么区别?
 *  Vue的生命周期,每个生命周期具体适合哪些场景
 *  Vue中ref是什么?
 *  Vue动画的生命周期?
 *  Vue如何编写自定义指令?

[Vue_]: https://blog.csdn.net/lfcss/article/details/120370555?spm=1001.2014.3001.5501
[931e2794854c14f42556ddf3c9c50a4d.png_id_MfLT8_originHeight_600_originWidth_1200_originalType_binary_ratio_1_status_done_style_none]: /images/20220828/6a2b150cd8524893bb9f6b09ebf59e5b.png