1. 程式人生 > >【必看】認識Vue,Vue快速入門,Vue如何建立一個例項?Vue的生命週期,什麼是鉤子函式?

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

認識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-modelnum進行繫結。
  • 同時通過{{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);
    }
})

控制檯的輸出:

在這裡插入圖片描述