從零開始學vuejs

時間 2019-11-25

標籤開始 vuejs 简体版

原文原文鏈接

　　最近一段時間都花在了學習vue上，還老是斷斷續續的，學習的效果不是很明顯，思考了很久了，應該是沒有進行一個系統的總結，致使不少知識點老是似是而非，並且也有一部分是思惟尚未從java轉變過來，廢話很少說，慢慢學吧！css

　　準備將我學習vue的只是總結一下當個筆記吧，不記得的時候回頭看一看；html

　　vue官方文檔：https://cn.vuejs.orgvue

1.什麼是vue.jsjava

　　其實百度一下能夠知道不少說明，是一套用於構建用戶界面的漸進式框架，Vue 被設計爲能夠自底向上逐層應用，Vue 的核心庫只關注視圖層....，說實話這些剛開始對我來講徹底沒有什麼用，直接學就對了，暫時就把vue看成一個js的第三方庫用，就相似jquery同樣，首先用script標籤引入，而後用特定的語法使用就ok了；node

　　固然，這是最low的方式，後面咱們慢慢學怎麼和webpack包管理工具集成，實現模塊化開發，在此，咱們先了解一下幾個概念：jquery

　　node：什麼是node呢？咱們知道js代碼只能運行在瀏覽器上，可是沒有瀏覽器js能夠運行嗎？固然能夠，因而就有了node，node就是一個js的運行環境，你能夠把它理解爲瀏覽器的替代品，並且最關鍵的是js擺脫了瀏覽器的限制以後，就能夠用js寫後端代碼了；好比能夠寫個服務器，其實就是寫個程序跑起來一直監聽電腦的某個端口，外界能夠經過http請求訪問這個端口，而後程序就收到這個請求的url，根據url中的路徑去讀寫文件，而後返回用戶請求；webpack

　　npm：能夠簡單的理解爲一個下載第三方庫的工具，有了這個工具，你想在你的項目中使用優秀的第三方庫只須要一個命令能夠了npm i xxx -s，最比較新的node中已經自帶的npm，因此你無需本身去下載web

　　webpack：能夠用npm下載，在模塊化開發時候用到的，由於若是模塊之間的依賴關係很複雜，項目作好以後，頁面加載或交互時，將會發起大量請求，爲了性能優化，須要使用webpack這樣的打包器對模塊進行打包整合，以減小請求數。借用一張圖，其實就是簡化依賴關係的一個打包工具ajax

　　總之一句話，node是一個運行環境，npm是下載第三方庫的工具避免重複造輪子，webpack打包工具，優化性能vue-cli

2.vue簡單使用

　　咱們從最簡單的開始，隨便準備一個html文件，千萬不要從vue-cli腳手架開始，由於剛開始目錄太多，一臉蒙逼w(°ｏ°)w

　　我這裏編輯器用的是vscode，強烈推薦用這個，我用這個編輯器的最大緣由是輕量級(千萬別下錯了，vscode全稱叫作Visual Studio Code，還有一個名字很像的Microsoft Visual Studio Code，這個有幾個G的大小....)，並且想要什麼插件直接下載，好用，固然有興趣的也能夠用webstorm等；

　　新建一個html文件，用vscode打開，而後！+Tab快速生成html模板，引入vue的js文件，而且在vscode中下載一個open in browers插件，這樣就能夠在html中右鍵，選擇是在默認瀏覽器打開仍是在其餘瀏覽器打開

　　簡單vue代碼：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 引入vue的依賴文件 -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <div id="app">
        {{ message }}   //這裏有一個message變量，用{{}}包起來
    </div>


    <script>
        var app = new Vue({
            el: '#app',  //這裏就是選擇上面的div標籤
            data: {
                message: 'Hello Vue!'    //給message變量賦值，這裏會同步到div標籤中的message中
            }
        })
    </script>
</body>

</html>

　　右鍵，打開默認瀏覽器，而後瀏覽器中就能看到Hello Vue!

　　很容易，只須要三步，首先是引入vue依賴文件，而後在html標籤中用{{xxx}}包着一個vue變量，最後就是建立Vue實例，在這個實例中選擇指定標籤，定義變量值，而後這個變量值就會在html標籤中生效；

　　這裏其實就至關於document.getElementsById("app").innerText="Hello Vue!"，然而vue的目的就是儘可能不讓咱們去直接操做dom節點，咱們只須要專一於向標籤中填充數據就好了，瞭解了這些下面咱們就簡單看看vue常見的命令吧！

3.vue基礎語法

　　咱們在2中使用了{{}}這個東西表示其中的變量是和Vue實例相關聯的，其實vue還給咱們提供了一些命令

　　咱們要注意一點：只要是跟vue指令綁定的，都是變量、函數對象（boolean類型除外）或者是表達式，好比經典的v-bind:class="{xxxx}"，v-on:clidk="xxx"；注意，引號裏面的都是變量，不是字符串

　　3.1 v-bind指令

　　　　這個指令能夠綁定標籤中的任意屬性，使得這個屬性的值就變成了vue中的屬性!有沒有以爲這句話很繞，舉個例子：<a v-bind:href="url">我是百度</a>

　　　　這個a標籤的屬性href,被v-bind命令給綁定了，使得href這個屬性的值url就變成了vue中的一個屬性，下圖所示，在Vue實例中，咱們就能夠對url這個屬性賦值了，是否是很容易，並且這個命令還能夠簡寫成冒號，即上面的標籤簡寫後就是<a :href="url">我是百度</a>

　　我上面說過，v-bind屬性能夠綁定標籤中的任何屬性，也就是說屬性id，class，style，src等等屬性均可以，只須要聲明相似的 :xxx = 「aaa」，而後在Vue實例中的data中聲明aaa屬性便可

　　3.2 v-for指令

　　　　這個指令經常用於循環展現，舉個簡單的例子：

var app = new Vue({
            el: '#app',
            data: {   //定義了一個books數組
                books: [{
                    name: "魯濱遜",
                    price: 15
                }, {
                    name: "葫蘆娃",
                    price: 7
                }]
            }
        })

<ul>
   <li v-for="book in books">書名是：{{book.name}}-------價格是：{{book.price}}</li>
</ul>

　　3.3 v-if指令

　　　　這個用於條件判斷，若是v-if="flag"中flag爲true，那麼這個標籤就是看獲得的，不然就是看不到的，舉個例子：

 <h1 v-if="true">你看不到我</h1>
 <h1 v-if="false">你看獲得我</h1>

　　　　固然，也能夠在v-if裏面是一個屬性，效果和上面是同樣的

　　這個指令和v-show用法同樣，效果幾乎同樣，惟一的區別就是v-if指令爲false時，那麼該標籤在html中根本就沒有，而v-show即便爲false，這個標籤在html是存在的，只不過該標籤使用style="display: none;"不顯示出來，這也很好理解

　　3.4 v-model指令

　　　　注意，這個指令只會用在input標籤中，換句話說只會用在表單中，舉個例子,以下圖，只要輸入框中改變了什麼，那麼上面的顯示也會跟着改變，並且也會用於表單信息收集，後面用到的時候再說

　　3.5 v-on指令

　　　　前面的幾個指令都是綁定屬性的，這個命令是綁定事件的，咱們能夠用這個命令來綁定一些事件函數；舉個例子，綁定只要鼠標的點擊事件,每一次點擊按鈕，counter的值就會加一，使得vue實例中的counter也會跟着加一，而後p標籤又會時刻監聽着counter的變化，因此最終的效果就是每點擊一次按鈕，屏幕中的數字就會變化加一

　　補充一下，v-on指令因爲很經常使用，因此也有簡寫形式，就是@，好比上面的<button @click="counter += 1">Add 1</button>

　　到這裏能夠說vue的幾個基本指令就說完了，仍是很容易的，不知道你們有沒有發現，咱們如今的指令還只是涉及到了vue實例中的data中的屬性，那麼，在Vue實例中，除了el、data還有其餘的屬性嗎？

4.vue實例的屬性

　　vue實例的屬性太多，咱們就說說的經常使用屬性，首先的就是在上面咱們說到的el屬性和data屬性，這兩個屬性很好理解，el的全稱是element，也就是標籤嘛，這裏用的id選擇器選擇指定標籤，固然也能夠用class選擇器，本身能夠試試；而後data屬性表示在標籤中要進行初始化的一些靜態數據，注意，這裏是靜態數據；

　　而後咱們要想辦法讓這些數據是動態的，因而就有了事件監聽而後調用指定的函數，因而就有一個屬性是methods，在面向對象的語言中，這些函數也叫作方法，這裏的就是存放標籤中監聽的自定義的事件函數；

　　因爲每一次標籤中的數據發生變化，咱們要動態顯示的話，都用函數監聽，那麼每一次都會調用函數，雖說能夠實現基本功能，可是在某些特殊狀況下，咱們能夠利用一個計算屬性computed，這個屬性有一個好處，就是可使用緩存，好比計算屬性中有個變量數據一直沒有改變，那麼下一次訪問就直接返回緩存中的結果就好了，而函數的話每一次都會去執行一次；

　　還有就是在vue實例在實例化的過程當中也會默認調用一些函數（這些函數不是在methods中的），這些函數是一些生命週期函數，大概分爲三個部分，初始化的時候調用beforeCreate和created、beforedMount和mounted；更新數據的時候beforeUpdate和updated；銷燬vue實例的時候beforeDestroy和destroy；

　　咱們簡單瞭解vue的生命週期，下面有個圖從官網那裏拿過來的，很經典的一個圖：

　　下面咱們就用簡單的例子，簡單看看使用一下這幾個經常使用的屬性和生命週期函數：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>

<body>

    <div id="app">
        <input type="text" v-model="message" placeholder="隨便輸入什麼內容">
        <input type="submit" value="逆轉按鈕" @click = "reverseMsg">
        <br>
        <div>計算屬性爲：{{msg}}</div>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                message: ''
            },
            methods:{
                //這個方法做用是將字符串逆轉
                reverseMsg(){
                    return this.message = this.message.split('').reverse().join('')
                }

            },
            computed:{
                //這個計算屬性，在這類就是將逆轉的字符串後面加計算返回
                msg(){
                   return this.message+"計算"
                }

            },
            //如下都是生命週期函數的執行時機
            beforeCreate(){
                console.log("beforeCreate方法執行")
            },
            created(){
                console.log("create方法執行")
            },
            beforeMount(){
                console.log("beforedMount方法執行")
            },
            mounted(){
                console.log("mounted方法執行")
            },
            beforeUpdate(){
                console.log("beforeUpdate方法執行")
            },
            updated(){
                console.log("updated方法執行")
            },
            //注意，下面兩個直接用頁面測試不出來，到後面使用了vue-cli以後就很好測試了
            destoryed(){
                console.log("destoryed方法執行");
            },
            beforeDestory(){
                console.log("beforeDestory方法執行");
            }
        })
    </script>

</body>

</html>

　　能夠看到，屢次更新數據框中的數據都會調用更新的函數，而beforeCreate和created、beforedMount和mounted只會執行一次；beforeUpdate和updated會執行屢次

　　具體的步驟：

　　　　在調用beforeCreate的時候，vue實例中的el，data，data中的message都爲undefined；

　　　　調用created的時候，el仍是undefined，而數據已經與data中的屬性進行綁定（放在data中屬性當值發生改變的同時，視圖也會發生變化），通常能夠在這裏作初始數據的獲取；

　　　　調用beforedMount，載入前（完成了data和el數據初始化），可是頁面中的內容仍是vue中的佔位符，data中的message信息沒有被掛在到Bom節點中，通常能夠在這裏作初始數據的獲取；

　　　　調用mounted，載入後html已經渲染(ajax請求能夠放在這個函數中)，把vue實例中的data裏的message掛載到BOM節點中去；

　　　　調用beforeUpdate，更新前狀態（html中的數據變化前，不是data中的數據改變前），從新渲染以前觸發，而後vue的虛擬dom機制會從新構建虛擬dom與上一次的虛擬dom進行對比以後從新渲染；

　　　　調用updated,數據已經更改完成，dom也從新渲染完成

　　沒記錯的話還有一個監聽屬性沒有說到，後面用到再說，其實監聽屬性暫時基本用不到，先放一下，還有幾個動畫的指令，有興趣的本身研究一下；

5.vue組件

　　前面說了這麼多都是一些基本用法，vue真正的精髓就是組件，能夠有不少不少的組件，那麼什麼是組件呢？是一個js文件，仍是一個css文件？

　　其實我認爲組件是一個資源的集合，好比後面咱們可能會用到的Element UI組件庫中的組件，每個組件都包括js，css，scss，image等資源組成，而後咱們隨時能夠用這個組件放在咱們的頁面中，不須要咱們去本身手寫樣式或者去複製別人的css、js代碼了，實現了代碼的重用性，極大的簡化了開發；

　　固然咱們這裏會用到最簡單的組件，組件中就是一個template屬性（在模塊化開發中組件是一個vue文件，裏面有一個template標籤，在這個標籤裏，能夠用全部的html語法以及vue指令），例以下面的這樣的：

 <div id="app">
        <!--至於怎麼使用組件呢？能夠直接用組件名看成標籤使用就好了，注意，這裏標籤中可使用vue指令-->
        <template01></template01>
        <template02></template02>
        <div>{{message}}</div>
        
    </div>

    <script>
        var template01 = {template: '<h1>這裏是第一個自定義組件</h1>'}
        var template02 = {template: '<h1>這裏第二個自定義組件</h1>'}

        //這裏是第一種註冊組件的作法，直接全局註冊，也就是說子組件中還能夠用組件2
        Vue.component("template02",template02) 
        new Vue({
            el: '#app',
            data: {
                message: 'hello vue'
            },
            //這是第二種註冊組件的方式，可是這種方式是能在當前組件使用，這裏至關於 "template01": template01 
            components:{
                template01 
            }
           

        })
    </script>

　　若是是在組件化開發中，咱們的組件是這種形式的，下圖所示：

··　　這裏還有一點須要說一下，上面咱們使用了template01 組件，可是這個組件中是不能使用new Vue(xxx)這個裏面的data數據的，由於取不到；

　　咱們把當前的組件叫作父組件，template01 組件叫作子組件，如今咱們須要傳遞數據，因爲子組件沒法使用父組件中的數據，因而咱們能夠在子組件使用一個props，而後父組件能夠在<template01></template01>中使用vue指令綁定自定義屬性，這樣就將數據傳到子組件的props中，而後子組件就能夠隨便使用props中的數據了；

　　舉個簡單的例子：

　　補充一下，不知道你們有沒有以爲這個template屬性比較熟悉，在前面應該見過，就是那個Vue生命週期的圖中，有關於生命週期的具體詳解我看了一篇博客講的挺不錯的，有興趣的能夠去看看，點擊這裏；

　　其實這裏的template是vue的一個實例屬性，就像data屬性和el屬性同樣，實際上表示的是要渲染的模板，若是在Vue中沒有聲明這個屬性template，默認就把el屬性指向的標籤看成template去解析；不然只解析Vue中的template屬性對應的標籤內容，此時el對應的標籤不會解析

 <div id="app">
       
        <div>外面的模板：{{message}}</div>
        
    </div>

    <script>

        new Vue({
            el: '#app',
            data: {
                message: 'hello vue'
            },
            //注意，此時無論這個div中沒有沒id="app"都同樣，只會默認解析這個模板，而後渲染數據
           template:'<div><p>template屬性對應的模板：{{message}}</p></div>'
           

        })
    </script>

　　顯示的結果是：

　　由此能夠知道Vue實例中的template屬性優先級更高，不過這個屬性不多用到。。。

6.總結

　　多瞭解Vue的聲明週期以及vue基礎知識很重要，而後在使用vue的過程當中學會了不少的東西，慢慢學吧，此次只是簡單的看了一下基礎知識，下一次就好好的用vue-cli構建項目，而後快速開發一些東西