【必看】認識Vue，Vue快速入門，Vue如何建立一個例項？Vue的生命週期，什麼是鉤子函式？

阿新 • • 發佈：2018-12-10

認識Vue

Vue (讀音 /vjuː/，類似於 view) 是一套用於構建使用者介面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注檢視層，不僅易於上手，還便於與第三方庫或既有專案整合。另一方面，當與現代化的工具鏈以及各種支援類庫結合使用時，Vue 也完全能夠為複雜的單頁應用提供驅動。

漸進式：
1 我們可以像使用jQuery一樣，使用vue

2 採用node的方式去使用vue

前端框架三巨頭：Vue.js、React.js、AngularJS，vue.js以期輕量易用著稱，vue.js和React.js發展速度最快，AngularJS還是老大。

官網：https://cn.vuejs.org/

參考：https://cn.vuejs.org/v2/guide/

尤雨溪，Vue.js 創作者，Vue Technology創始人，致力於Vue的研究開發。

3.快速入門

接下來，我們快速領略下vue的魅力

3.1.建立工程

建立一個maven工程：

在這裡插入圖片描述

位置資訊：

在這裡插入圖片描述

3.2.安裝vue

3.2.1.下載安裝

下載地址：https://github.com/vuejs/vue

可以下載2.5.16版本https://github.com/vuejs/vue/archive/v2.5.16.zip

下載解壓，得到vue.js檔案。

3.2.2.使用CDN

或者也可以直接使用公共的CDN服務：

<!-- 開發環境版本，包含了用幫助的命令列警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

或者：

<!-- 生產環境版本，優化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

3.3.vue入門案例

3.3.1.HTML模板

在vue-demo目錄新建一個HTML

在這裡插入圖片描述

在hello.html中，我們編寫一段簡單的程式碼：

在這裡插入圖片描述

h2中要輸出一句話：xx 非常帥。效果圖如下所示：

在這裡插入圖片描述

3.3.2.vue渲染

然後我們通過Vue進行渲染：

<!-- 引入vue -->
<script src="vue-2.5.17.js"></script>
<!-- 1 必須要有父容器,所有內容只能寫在這個父容器中
      父容器一定要有id屬性，id的值自定義，但是一般叫 app
 -->
<div id="app">

    <!-- 此處需要獲取Vue物件中的name
         {{}}兩個大括號獲取data中的屬性的值
     -->
    <h2>{{name}}很帥</h2>
    <h2>有{{num}}位女神為之傾倒</h2>
</div>
<!-- 通過vue控制x顯示的內容 -->
<script>
    // 方向一：當改變data.屬性內容的時候,view中自動更新
    // 方向二：當在頁面改變name的時候，data中的name也會自動更新
    var vm = new Vue({
        el:"#app",//el就是element的簡寫，指向父容器的id
        data:{// data 專門用來存放資料
            name:"奇哥",
            num:100
        }
    });


</script>

首先通過 new Vue()來建立Vue例項
然後建構函式接收一個物件，物件中有一些屬性：
- el：是element的縮寫，通過id選中要渲染的頁面元素，本例中是一個div
- data：資料，資料是一個物件，裡面有很多屬性，都可以渲染到檢視中
  - name：這裡我們指定了一個name屬性
頁面中的h2元素中，我們通過{{name}}的方式，來渲染剛剛定義的name屬性。

開啟頁面檢視效果：

在這裡插入圖片描述

更神奇的在於，當你修改name屬性時，頁面會跟著變化：

在這裡插入圖片描述

3.3.3.雙向繫結

 方向一：當改變data.屬性內容的時候,view中自動更新
 方向二：當在頁面改變name的時候，data中的name也會自動更新
       注意點：頁面的name得可以改變 ，此時就要選擇文字框

我們對剛才的案例進行簡單修改：

<div id="app">
    <input type="text" v-model="num">
    <h2>
        {{name}} 非常帥,
        有{{num}}位女神為他著迷。
    </h2>
</div>
<script src="vue-2.5.17.js"></script>
<script type="text/javascript">
    // 生成一個Vue例項
    var app = new Vue({
        el:"#app", // el,即element。要渲染的的頁面元素
        data:{ // 資料
            name:"奇哥",
            num:1
        }
    })
</script>

我們在data添加了新的屬性：num
在頁面中有一個input元素，通過v-model與num進行繫結。
同時通過{{num}}在頁面輸出

效果：

在這裡插入圖片描述

我們可以觀察到，輸入框的變化引起了data中的num的變化，同時頁面輸出也跟著變化。

input與num繫結，input的value值變化，影響到了data中的num值
頁面{{num}}與資料num繫結，因此num值變化，引起了頁面效果變化。

沒有任何dom操作，這就是雙向繫結的魅力。

3.3.4.事件處理

我們在頁面新增一個按鈕：

<input type="button" value="+" v-on:click="num++">
<input type="button" value="-" v-on:click="num--">

這裡用v-on指令繫結點選事件，而不是普通的onclick，然後直接操作num
普通click是無法直接操作num的。

效果：

在這裡插入圖片描述

4.Vue例項

4.1.建立Vue例項

每個 Vue 應用都是通過用 Vue 函式建立一個新的 Vue 例項開始的：

var vm = new Vue({
  // 選項
})

在建構函式中傳入一個物件，並且在物件中宣告各種Vue需要的資料和方法，包括：

el
data
methods

等等

接下來我們一一介紹。

4.2.模板或元素

每個Vue例項都需要關聯一段Html模板，Vue會基於此模板進行檢視渲染。

我們可以通過el屬性來指定。

例如一段html模板：

<div id="app">
    
</div>

然後建立Vue例項，關聯這個div

var vm = new Vue({
	el:"#app"
})

這樣，Vue就可以基於id為app的div元素作為模板進行渲染了。在這個div範圍以外的部分是無法使用vue特性的。

4.3.資料

當Vue例項被建立時，它會嘗試獲取在data中定義的所有屬性，用於檢視的渲染，並且監視data中的屬性變化，當data發生改變，所有相關的檢視都將重新渲染，這就是“響應式“系統。

html：

<div id="app">
    <input type="text" v-model="name"/>
</div>

js:

var vm = new Vue({
    el:"#app",
    data:{
        name:"劉德華"
    }
})

name的變化會影響到input的值
input中輸入的值，也會導致vm中的name發生改變

4.4.方法

Vue例項中除了可以定義data屬性，也可以定義方法，並且在Vue的作用範圍內使用。

html:

<div id="app">
    {{num}}
    <button v-on:click="add">加</button>
</div>

js寫法一：

<div id="app">
    {{num}}
    <button v-on:click="add">加</button>
</div>
<script src="vue-2.5.17.js"></script>
<script>
    var vm = new Vue({
       el:"#app",
       data:{
           num:0
       },
       methods:{
           add:function(){
               this.num++;
           }
       }
    });
</script>

js寫法二：

<div id="app">
    {{num}}
    <button v-on:click="add">加</button>
</div>
<script src="vue-2.5.17.js"></script>
<script>
    var vm = new Vue({
       el:"#app",
       data:{
           num:0
       },
       methods:{
           add(){
               this.num++;
           }
       }
    });


</script>

4.5.生命週期鉤子

4.5.1.生命週期

每個 Vue 例項在被建立時都要經過一系列的初始化過程：建立例項，裝載模板，渲染模板等等。Vue為生命週期中的每個狀態都設定了鉤子函式（監聽函式）。每當Vue例項處於不同的生命週期時，對應的函式就會被觸發呼叫。

生命週期：

在這裡插入圖片描述

4.5.2.鉤子函式

例1：created代表在vue例項建立後；

我們可以在Vue中定義一個created函式，代表這個時期的建構函式：

html:

<div id="app">
    {{hello}}
</div>

js:

<script src="vue-2.5.17.js"></script>
<script>
    var vm = new Vue({
       el:"#app",
       data:{
           hello:''
       },
       created(){
           this.hello = 'czdx,一統江湖，千秋萬代'
       }
    });
</script>

結果：

在這裡插入圖片描述

例2：

<!DOCTYPE html>
<html>

   <head>
      <meta charset="utf-8" />
      <title>vuejs生命週期</title>
      <script src="vuejs-2.5.17.js"></script>
   </head>

   <body>
      <div id="app">
         {{message}}
      </div>
   </body>
   <script>
      var vm = new Vue({
         el: "#app",
         data: {
            message: 'hello world'
         },
         beforeCreate: function() {
            showData('建立vue例項前', this);
         },
         created: function() {
            showData('建立vue例項後', this);
         },
         beforeMount: function() {
            showData('掛載到dom前', this);
         },
         mounted: function() {
            showData('掛載到dom後', this);
         },
         beforeUpdate: function() {
            showData('資料變化更新前', this);
         },
         updated: function() {
            showData('資料變化更新後', this);
         },
         beforeDestroy: function() {
            showData('vue例項銷燬前', this);
         },
         destroyed: function() {
            showData('vue例項銷燬後', this);
         }
      });

      function realDom() {
         console.log('真實dom結構：' + document.getElementById('app').innerHTML);
      }

      function showData(process, obj) {
         console.log(process);
         console.log('data 資料：' + obj.message)
         console.log('掛載的物件：')
         console.log(obj.$el)
         realDom();
         console.log('------------------')
         console.log('------------------')
      }
      vm.message = "good...";
      vm.$destroy();
   </script>

</html>

4.5.3.this

我們可以看下在vue內部的this變數是誰，我們在created的時候，列印this

var vm = new Vue({
    el:"#app",
    data:{
        hello: '' // hello初始化為空
    },
    created(){
        this.hello = "czdx,一統江湖，千秋萬代";
        console.log(this);
    }
})

控制檯的輸出：

在這裡插入圖片描述

【必看】認識Vue，Vue快速入門，Vue如何建立一個例項？Vue的生命週期，什麼是鉤子函式？

認識Vue

3.快速入門

3.1.建立工程

3.2.安裝vue

3.2.1.下載安裝

3.2.2.使用CDN

3.3.vue入門案例

3.3.1.HTML模板

3.3.2.vue渲染

3.3.3.雙向繫結

3.3.4.事件處理

4.Vue例項

4.1.建立Vue例項

4.2.模板或元素

4.3.資料

4.4.方法

4.5.生命週期鉤子

4.5.1.生命週期

4.5.2.鉤子函式

4.5.3.this

相關推薦