前端筆記之Vue（三）生命週期&CSS預處理&全局組件&自定義指令

時間 2019-11-12

標籤前端筆記 vue 生命週期 css 預處理全局組件自定義指令欄目 CSS 简体版

原文原文鏈接

1、Vue的生命週期

生命週期就是指一個對象的生老病死的過程。css

用Vue框架，熟悉它的生命週期可讓開發更好的進行。前端

全部的生命週期鉤子自動綁定 this 上下文到實例中，所以你能夠訪問數據，對屬性和方法進行運算。這意味着，你不能使用箭頭函數來定義一個生命週期方法 (例如 created: () => this.fetchTodos())。這是由於箭頭函數綁定了父上下文，所以 this 與你期待的 Vue 實例不一樣，this.fetchTodos 的行爲未定義。vue

生命週期的鉤子函數，就是vue實例在和必定的時間點去執行的函數webpack

生命週期總共有11個函數，首先看看官網的圖，詳細的給出了vue的生命週期，其中這八個是比較常見的:web

它能夠總共分爲8個階段：ajax

l beforeCreate（建立前）npm

l created（建立後）編程

l beforeMount(載入前)瀏覽器

l mounted（載入後）sass

l beforeUpdate（更新前）

l updated（更新後）

l beforeDestroy（銷燬前）

l destroyed（銷燬後）

l 還有三個是：activated()、deactivated()、 errorCaptured()

1.1 beforeCreate()

在實例初始化以後，數據觀測 (data observer) 和 event/watcher 事件配置以前被調用。

此時data、dom也不可見！

1.2 created() ***

在實例建立完成後被當即調用。在這一步，實例已完成如下的配置：數據觀測 (data observer)，屬性和方法的運算，watch/event 事件回調。然而，掛載階段還沒開始，$el 屬性目前不可見。

此時data可見，能夠在這個生命週期發送ajax，等回調成功後,將數據放進data中！dom仍是不可見.

1.3 beforeMount()

在掛載開始以前被調用：相關的 render 函數首次被調用。

此時data可見 $el DOM依然不可見，沒什麼用，created 徹底能夠代替。

1.4 mounted() ***

el 被新建立的 vm.$el 替換，並掛載到實例上去以後調用該鉤子。若是 root 實例掛載了一個文檔內元素，當 mounted 被調用時 vm.$el 也在文檔內。

此時data 和 dom均可見，生命週期執行完畢，工做中會在這個生命週期裏面調用methods裏面發送ajax的函數，意思是等dom加載完畢以後操做一些方法或發送ajax，跟寫在created 沒什麼區別。

1.5 beforeUpdate() 和 updated() ***

l beforeUpdate：數據更新時調用，發生在虛擬 DOM 從新渲染和打補丁以前。適合在更新以前訪問現有的 DOM，好比手動移除已添加的事件監聽器。

l updated：因爲數據更改致使的虛擬 DOM 從新渲染和打補丁，在這以後會調用該鉤子。當這個鉤子被調用時，組件 DOM 已經更新，因此你如今能夠執行依賴於 DOM 的操做。然而在大多數狀況下，你應該避免在此期間更改狀態。若是要相應狀態改變，一般最好使用計算屬性或 watcher 取而代之。

1.6 activated 和 deactivated

這兩個生命週期寫在子組件裏面，控制子組件的上下樹，能激活兩個生命週期。

activated ：keep-alive 組件激活時調用

deactivated ：keep-alive 組件停用時調用

1.7 beforeDestroy() 和 destroyed()

beforeDestroy ：實例銷燬以前調用。在這一步，實例仍然徹底可用

destroyed ： Vue 實例銷燬後調用。調用後，Vue 實例指示的全部東西都會解綁定，全部的事件監聽器會被移除，全部的子實例也會被銷燬。

如何：觸發這兩個生命週期鉤子。

沒用。

1.8 errorCaptured()

沒用。

App.vue父組件：

<template>
    <div>
        <h1>{{a}}</h1>
        <button @click="add">+</button>
    <!--父組件使用v-if 控制組件上下樹，觸發組件的生命週期函數-->
        <keep-alive v-if="isShow">
            <Child></Child>
        </keep-alive>
    </div>
</template>
<script>
    import Child from "./components/Child.vue"
    export default{
        data(){
            return {
                a:100,
                isShow:true
            }
        },
        methods:{
            add(){
                this.a++;
                this.isShow = !this.isShow;
            }
        },
        components:{
            Child
        }
        beforeCreate(){
            console.log("初始化以後，el和data並未初始化" + this.a);
        },
        created(){
            console.log("組件建立完成，完成了data 數據的初始化，el沒有" + this.a);
        console.log("組件建立完成，完成了data 數據的初始化，el沒有" + this.$el);
        },
        beforeMount(){
            console.log("掛載以前，完成了data 數據的初始化，el沒有 " + this.a);
            console.log("掛載以前，完成了data 數據的初始化，el沒有" + this.$el);
        },
        mounted(){
            console.log("掛載以後，完成了el的綁定" +this.a);
            console.log("掛載以後，完成了el的綁定" +this.$el);
        }
        beforeUpdate(){
            console.log("數據更新前狀態："+ $(this.$el).find("h1").text());
        },
        updated(){
            console.log("數據更新後狀態（完成了渲染）：" + this.a);
        }
    }
</script>

聲明週期

Child.vue子組件：

<template>
    <div>
        <h1>我是子組件</h1>
        <zisun></zisun>
    </div>
</template>
<script>
    import zisun from "./zisun.vue";
    export default{
        components:{
            zisun
        },
        activated(){
            console.log("組件激活了");
        },
        deactivated(){
            console.log("組件停用了");
        },
        beforeDestroy(){
            console.log("組件銷燬前");
        },
        destroyed(){
            console.log("組件銷燬後");
        },
        errorCaptured(){
            console.log("子組件報錯了");
        }
    }
</script>

生命週期

孫子組件：

<template>
    <h1>我是孫子組件</h1>
</template>

2、CSS預處理（動態樣式表）

2.1 CSS預處理器簡介

作前端，處理CSS是你的特長，隨着工程的增大，CSS的預處理愈來愈重要，或者要維護咱們的css，工做會愈來愈困難，形成這些困難的很大緣由源於CSS 是一門非程序式語言，沒有變量、函數、SCOPE（做用域）、嵌套等概念。

什麼是CSS預處理？

CSS預處理器定義了一種新的語言，其基本思想是，用一種專門的編程語言，爲CSS增長了一些編程的特性，將CSS做爲目標生成文件，而後開發者就只要使用這種語言進行編碼工做。通俗的說，CSS預處理器用一種專門的編程語言，進行Web頁面樣式設計，而後再編譯成正常的CSS文件，以供項目使用。CSS預處理器爲CSS增長一些編程的特性，無需考慮瀏覽器的兼容性問題，例如你能夠在CSS中使用變量、簡單的邏輯程序、函數等等在編程語言中的一些基本特性，可讓你的CSS更加簡潔、適應性更強、可讀性更佳，更易於代碼的維護等諸多好處。

CSS預處理器技術已經很是的成熟，並且也涌現出了不少種不一樣的CSS預處理器語言，好比說：Sass、LESS、Stylus，還有postCSS插件等。

2.2 Less使用和安裝

Less、stylus是Nodejs工做流工具，SASS須要安裝ruby。

以Less舉例，sass、stylus自學便可。

Less 是一種動態樣式語言，它使用相似CSS的語法，爲CSS賦予了動態語言的特性，如變量、繼承、數學運算、函數等，更方便CSS的編寫和維護。

LESS能夠在多種語言、環境中使用，包括瀏覽器、桌面客戶端、服務端。

API手冊：

http://www.bootcss.com/p/lesscss/

http://less.bootcss.com/

在全局安裝less，這是一個CLI工具。其實，你並不須要安裝，由於後面直接用webpack結合less便可。

npm install -g less

或者安裝在項目中：

npm install --save-dev less

查看版本：

lessc -v

2.3 Less變量和嵌套

Less可讓咱們以嵌套的方式寫CSS，直接在父元素選擇器中嵌套子元素選擇器，它會自動編譯成後代選擇器。

定義變量：@變量名:變量值

示例：@yanse:red;
調用：div{color:@yanse;}
編譯：div{color:red;}

第一步：建立.less文件，開始寫less語法：

@a:200px;
div{
    width: 200px;
    height: @a;
    ul{
        width: @a;
        height: @a;
        li{
            float: left;
            width: 30px;
            height: 30px;
            background: orange;
            &.cur{background: red;}
            &:hover{background: green;}
            &:before{content: "";}
        }
    }
}

&表示它本身

第二步：用lessc命令編譯這個文件，生成css

lessc 01.less 01.css

編譯後的結果：

div {
  width: 200px;
  height: 200px;
}
div ul {
  width: 200px;
  height: 200px;
}
div ul li {
  float: left;
  width: 30px;
  height: 30px;
  background: orange;
}
div ul li.cur {
  background: red;
}
div ul li:hover {
  background: green;
}
div ul li:before {
  content: "";
}

示例代碼

2.4 Less數學運算

在less中任何數字、顏色或變量均可以參與數學運算，運算建議包裹在括號()中。

2.5 Less混合（包含）

在less中能夠定義一些經過的屬性集爲一個class，而後在另外一class調用這些屬性

.border{border:1px solid #f40;}

若是須要在其餘css中引入經過的屬性集，只要在任意class中像這樣調用便可：

div{.border}

注意：任何class、id或元素屬性均可以以一樣的方式引入。

2.6 Less帶參數的混合（包含）

在less中，還能夠像函數同樣定義一個帶參數的屬性集：

.border(@radius){
    -webkit-border-radius:@radius;
    -moz-border-radius:@radius;
    -ms-border-radius:@radius;
    -o-border-radius:@radius;
    border-radius:@radius;
}

在其餘class中這樣調用：

div{ .border(5px); }

2.7 Less帶默認參數的混合（包含）

2.8 Less的循環

2.9 Less和webpack結合

咱們但願在Vue、React項目中使用less，此時就須要webpack在打包的時候順便進行less編譯。

必需要裝less依賴和3個loader依賴，分別是css-loader、style-loader、less-loader。

安裝loader依賴：

npm install --save-dev less
npm install --save-dev less-loader
npm install --save-dev css-loader
npm install --save-dev style-loader

安裝完依賴，要配置webpack.config.js文件：

參照：https://www.npmjs.com/package/less-loader

var path = require('path');
const {VueLoaderPlugin} =  require("vue-loader"); //最新版webpack須要引入此插件

module.exports = {
    ...
    //配置webpack的模塊插件
    module:{
        // 關於模塊配置
        rules: [
            ...
            { test: /\.less$/,
                use: [
                    {loader: "style-loader"},//翻譯行內CSS
                    {loader: "css-loader"},  //翻譯外鏈CSS
                    {loader: "less-loader"}  //將Less編譯爲CSS
 ] }
        ]
    },
    resolve: {
        alias: { //配置別名
          'vue$': 'vue/dist/vue.esm.js' // 用 webpack 1 時需用 'vue/dist/vue.common.js'
        }
    },
    //最新版webpack須要引入此插件
    plugins:[
       new VueLoaderPlugin()
    ]
};

若是碰見webpack報錯，在項目中安裝一下webpack的項目依賴便可：

npm install --save-dev webpack

配置完成後，使用時在style標籤里加上lang="less"就能夠寫less的代碼了(style標籤里加上scoped爲只在此做用域有效)

組件中使用less樣式表

<style lang="less" scoped>
    @a:200px;
    div{
        width: @a;
        height: @a;
        background: red;
    }
</style>

或引入外鏈.less文件：

<style lang="less" scoped>
@import "./01.less";
</style>

或

<style lang="less" scoped src="./01.less"></style>

3、全局組件

前面兩天咱們使用的都是局部組件，哪一個頁面要用，就在哪一個頁面引用，而後再使用。若是不想每次使用都要引用，想直接使用的狀況下就須要用到全局組件。

語法：

Vue.component("頁面使用的名字", import引入時的名字);

第一步：在app文件夾新建一個plugins文件夾（它表示插件的意思），在文件夾中新建一個components.js文件，這個文件中放的都是全局組件。把components文件夾中的.vue組件都引入到當前js文件向外暴露。

components.js:

import Hehe from "../components/Hehe.vue";
import Haha from "../components/Haha.vue";

export default function(Vue){
    Vue.component("MyHehe", Hehe);
    Vue.component("MyHaha", Haha);
}

示例代碼

第二步：在app.js中import引入這個js文件，同時使用Vue.use(插件名) → 安裝插件的意思

import Vue from 'vue';
import App from './App.vue';
import components from './plugins/components.js';
Vue.use(components); //註冊全局組件

new Vue({
    el : "#app",
    render : (h)=> h(App)
})

而後就能夠在任何頁面中，直接使用全局組件，全局組件中的代碼改真名就怎麼寫。

App.vue

<template>
    <div>
        <h1>{{a}}</h1>
        <MyHehe></MyHehe>
        <MyHaha></MyHaha>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                a : 100
            }
        }
    }
</script>

示例代碼

4、自定義指令（directive）

4.1自定義局部指令

除了核心功能默認內置的指令（v-model、v-if、v-show等），若是不夠用，Vue容許註冊自定義指令。

若是想封裝局部指令，組件中接受一個directives的選項：

App.vue

<template>
    <div>
        <h1 v-color="'red'" v-height="100" >我是App頁面</h1>
        <h2 v-color:aa.bb.cc>我是App頁面</h2>
    </div>
</template>
<script>
    export default {
        directives : {
            color : { inserted(el,binding){ console.log(binding) el.style.color = binding.value
                    //$(el).css(binding.name, binding.value);
                }
            },
            height : {
                inserted(el,binding){
                    if(binding.value){
                        el.style.height = binding.value + "px";
                    }else{
                        el.style.height = 200 + "px"; } } }
        }
    }
</script>

需求：給頁面寫一個不固定的高，根據手機屏幕的高度，去計算內容區域的高度

<template>
    <div>
        <header>
            <ul>
                <li>新聞</li>
                <li>軍事</li>
            </ul>
        </header>
        <div class="content" v-height="50" v-style="{color:'green',fontSize:'50'}" v-color.red>
            <p>愛上對方就哭了</p>
            <p>愛上對方就哭了</p>
            ...
            <p>愛上對方就哭了</p>
            <p>愛上對方就哭了11</p>
        </div>
    </div>
</template>
<script>
    export default {
        directives : {
            color : {
                inserted(el,binding){
                    el.style.color = Object.keys(binding.modifiers)[0];
                }
            },
            height : {
                inserted(el,binding){
                    var height = document.documentElement.clientHeight - binding.value;
                    el.style.height = height + "px";
                }
            },
            style : {
                inserted(el,binding){
                    var a = Object.keys(binding.value)[0];
                    var b = Object.keys(binding.value)[1];

                    $(el).css({
                        [a]:binding.value[a],
                        [b]:binding.value[b] + "px"
                    })
                }
            }
        }
    }
</script>
<style lang="less">
    header{ul{overflow: hidden;list-style:none;li{float: left;width: 50%;height: 50px;border-right: 1px solid #000;background: orange;box-sizing: border-box;}}}.content{overflow-y:scroll;}
</style>

而後就能夠在模板中任何元素身上使用自定義的v-color、v-height、v-style指令屬性。

若是指令須要多個值，能夠傳入一個JavaScript對象字面量。記住，指令函數可以接受全部合法的 JavaScript 表達式。

4.2全局自定義指令

全局指令和全局組件的封裝方式同樣，也是在plugins文件夾中新建directives.js文件。

自定義全局指令想在哪用就在哪用。

main.js

import Vue from 'vue';
import App from './App.vue';

import directives from './plugins/directives.js';
Vue.use(directives); //註冊全局指令

new Vue({
    el : "#app",
    render : (h)=> h(App)
})

directives.js

export default function(Vue){
   Vue.directive('style', {
        inserted(el,binding){
            var a = Object.keys(binding.value)[0];
            var b = Object.keys(binding.value)[1];
            // $(el).css({color:'green', fontSize:50})
            $(el).css({[a]:binding.value[a], [b]:binding.value[b]})
        }
  })

 Vue.directive('color', {
        inserted(el,binding){
            // el.style.color = binding.value
            el.style.color = Object.keys(binding.modifiers)[0]
        }
   })

    Vue.directive('height', {
        inserted(el,binding){
            var height = document.documentElement.clientHeight - binding.value;
            el.style.height = height + "px";
        }
 })
}