VUE系列-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

 <input type="radio" v-model="value"  value="男">
 <input type="radio" v-model="value"  value="女">

1.3 checkbox

<input type="checkbox" v-model="checks" value="游泳" >
<input type="checkbox" v-model="checks" value="健身">

1.4 修飾符應用 .number .lazy .trim

<input type="text" v-model.number="value">
<input type="text" v-model.trim="value">

二.自定義指令

全局指令和局部指令
編寫一個自定義指令
- 鉤子函數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

let vm = new Vue({
    el: '#app',
    data: { name: 'zf' }
});
function initWatch(key,handler){
    vm.$watch(key,handler);
}
initWatch('name',function(newValue){
    console.log(newValue)
});
vm.name = 'jw'; // 數據變化會執行對應的handler

當數據變化後會執行對應的處理函數

3.2.computed

let dirty = true; // 內部有髒值檢測系統
function initComputed(key,handler) {
    Object.defineProperty(vm, key, {
        get() {
            if (dirty) { // 取值後會將dirty 變成false
                value = handler();
                dirty = false;
            }
            return value
        }
    })
}
initComputed('age', function () {
    console.log('取值一次')
    return vm.name
});
console.log(vm.age);
console.log(vm.age);
vm.name = 'hello'; // 當依賴的值變化 會將dirty重新改成true,保證獲取最新值
dirty = true;
console.log(vm.age);

源代碼中通過,watcher 來實現髒值檢測的

function initComputed(key,handler) {
        // 源碼中dirty 是通過watcher中來實現自動更新dirty的值
    let watcher = new Watcher(vm,handler,function(){},{lazy:true});
    Object.defineProperty(vm, key, {
        get() {
            if (watcher.dirty) { // 取值後會將dirty 變成false
                value = handler();
                watcher.dirty = false;
            }
            return value
        }
    });
}

watch 每次值變化後都能執行對應的回調
computed 計算屬性多次取值是用緩存效果的，如果依賴的值變化會重新執行
computed defineProperty get / set

四.動畫

元素的顯示隱藏都可以增加動畫效果v-if、v-show、v-for、路由切換等操作。

常見的增加動畫的方式有 animation 、 transition 、 js編寫動畫

4.1 css3動畫

[圖片上傳失敗...(image-affbb2-1632738863814)]

我們先要具體掌握一下每個樣式的觸發階段

<div @click="show()">顯示/隱藏</div>
<transition>
    <div class="content" v-if="isShow"></div>
</transition>

.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

<link rel="stylesheet" href="node_modules/animate.css/animate.css">
<style >
    .content{
        background: red;width: 100px;height: 100px;
    }
    .v-enter-active{
        animation:bounceIn 1s ease-in;
    }
    .v-leave-active{
        animation:bounceOut 1s ease-in ;
    }
</style>

也可以採用直接指定樣式的方式

<transition enter-active-class="bounceIn" leave-active-class="bounceOut">
    <div class="content animated" v-if="isShow"></div>
</transition>

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來實現動畫效果

let vm = new Vue({
    el: '#app',
    methods:{
        enter(el,done){ // 進入時會觸發此函數
            // 將當前點擊項的背景圖賦予給動畫元素
            el.style.background = `url(${this.lists[this.currentIndex].cover})`;
            // 設置元素背景
            el.style.backgroundSize = `100% 100%`;
            // 將動畫元素放到指定位置 
            let {x,y} = this.$refs.lists[this.currentIndex].getBoundingClientRect();
            el.style.left = x +'px';
            el.style.top = y + 'px';
            el.style.transformOrigin = `center center`;

            // 獲取動畫目標位置
            let {x:a,y:b} = this.$refs.cart.getBoundingClientRect();
            el.style.transform = `translate3d(${a-x}px,${b-y}px,0) scale(0,0)`;
            el.addEventListener('transitionend',done); // 動畫結束後觸發 done 方法
        },
        afterEnter(){ // 結束後重置動畫
            this.showAnimate = false; // 直接隱藏
        },
        addCart(index){
            // 加入購物車 
            this.currentIndex = index; // 當前點擊的那一項
            this.showAnimate = true;
        }
    },
    data() {
        return {
            showAnimate:false,
            currentIndex:-1,
            lists: [{
                    cover: 'http://www.javascriptpeixun.cn/files/course/2019/10-13/20510264fa40871768.png',
                    id: 1,
                },
                {
                    cover: 'http://www.javascriptpeixun.cn/files/course/2019/10-13/21114956089d654633.png',
                    id: 2,
                },
                {
                    cover:'http://www.javascriptpeixun.cn/files/course/2019/10-13/2048331a9c5a183234.png',
                    id:3,
                }
            ]
        }
    }
})

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系列-Vue核心應用(二)

一.v-model的使用

1.1 select

1.2 radio

1.3 checkbox

1.4 修飾符應用 .number .lazy .trim

二.自定義指令

三.watch和computed

3.1 watch (監控)

3.2.computed

四.動畫

4.1 css3動畫

4.2 js編寫動畫

4.3 多元素動畫

五.Vue中的生命週期

鉤子函數中該做的事情

六.面試題環節

2024年DataOps趨勢預測：AI不會取代數據工程師

雲原生週刊：K8s 中的服務和網絡｜ 2024.4.29

[轉帖]cpupower

今天，昨天，近七天，近30天，近90天，js封裝

華爲云云原生FinOps解決方案，釋放雲原生最大價值

2021年年終總結：工作10年寶媽級別的前端開發工程師年終總結

2021前端面試題系列：HTTP請求和HTTP緩存控制

前端性能優化的重要方案：圖片懶加載

2021前端面試題系列： VUE相關的基礎面試題

前端性能優化經典：javascript防抖節流

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結