Vue.js高效前端開發 • 【初識Vue.js】

全部章節 >>>>

文章目錄

一、Vue概述
- 1、Web前端架構介紹
- 2、MVC和MVVM
- 3、Vue介紹
- 4、安裝Vue
二、Vue使用
- 1、第一個Vue應用
- 2、Vue的雙向綁定
- 3、實踐練習
三、Vue生命周期
- 1、Vue的執行個體和資料
- 2、Vue生命周期鈎子函數
四、過濾器
- 1、過濾器使用
- 2、實踐練習
總結：

近幾年，網際網路前端行業發展得依舊迅猛，湧現出了很多優秀的JavaScript架構，同時這些JavaScript架構也正在逐漸改變統的前端開發方式。

在這些新出現的JavaScript架構中，最具代表性的架構有Angular.js、React.js和Vue.js。

MVC是著名的設計模式，基本思想是将軟體結構分解為Model（模型）、View（視圖）和Controller（控制器）三部分組成。

Model：主要負責資料處理和運算。
Controller：主要負責接收輸入的資料并控制選擇使用哪個View顯示。
View：主要負責顯示資料和使用者互動。

Vue.js高效前端開發 • 【初識Vue.js】

MVVM設計模式是由Model（模型）、View（視圖）和ViewModel（視圖模型）三部分組成，是MVC設計模式的進化版，即Controller轉變為ViewModel。

這種模式可以使View的變化自動化更新到ViewModel，而ViewModel的變化也會自動同步到View上顯示。

Vue是建構Web界面的JavaScript庫，原稱為Vue.js，它可以通過簡潔的API來提供高效的資料綁定和靈活的元件系統。它提供了現代Web開發中常用的進階功能，

比如：

解耦視圖和資料。

可複用的元件。

資料綁定。

功能插件化。

虛拟DOM（Virtual DOM）。

使用Vue之前先安裝vue.js，有兩種方式安裝Vue.js。

安裝獨立版本

<script src=“js/vue.min.js"></script>

使用CDN引入

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>

使用Vue的過程就是定義MVVM各個組成部分的過程，其過程步驟如下

定義View :

<!--這是View-->
<div id="app">
	{{ message }}
</div>

定義Model

// 這是Model
var exampleData = {
	message: "Hello World! "
};

建立一個Vue執行個體或ViewModel，它用于連接配接View和Model。

// 建立一個Vue執行個體或ViewModel，它連接配接View與 Model
var vm=new Vue({
	el: '#app',
	data: exampleData
});

在Vue.js中，ViewModel、View以及Model進行互動的方式，如下圖所示

在Vue.js中可以使用v-model指令在表單元素上建立雙向資料綁定

示例:

html代碼：

<!--這是View-->
<div id="app">
    <p>{{ message }}</p>
    <input type="text" v-model="message"/>    
</div>

JavaScript代碼：

// 這是Model
var exampleData = {
    message: "Hello World!"
};
// 建立一個Vue執行個體
var vm=new Vue({
    el: '#app',
    data: exampleData
});

v-model雙向綁定

當更改文本框的值時，

{{ message }}

中的内容也會被更新

Vue應用的建立很簡單，文法如下面代碼所示

文法:

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

通過構造函數Vue就可以建立一個Vue的根執行個體，并啟動Vue應用

常用的選項參數包含如下：

選項參數	說明
el	提供一個在頁面上已存在的DOM元素作為Vue執行個體的挂載目标
data	Vue執行個體的資料對象。Vue将會遞歸将data的屬性轉換為getter/setter，進而讓data的屬性能夠響應資料變化
methods	Vue執行個體的方法集合，可以在Vue直接調用或将方法綁定到DOM元素的事件上
computed	Vue執行個體的計算屬性集合
watch	觀察Vue執行個體變化的一個表達式或計算屬性函數
components	包含Vue執行個體可用元件的哈希表
filters	包含Vue執行個體可用過濾器的哈希表
template	定義字元串模闆作為Vue執行個體的辨別使用

示例：通過Vue執行個體的data選項，可以聲明應用内需要雙向綁定的資料。

也可以将所有會用到的資料都預先在data内聲明，這樣不至于将資料散落在業務邏輯中，難以維護

HTML代碼:

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

當挂載成功後，就可以通過vm.$el來通路該元素

JavaScriput 代碼:

var vm=new Vue({
    el:document.getElementById("app")  // 或者是#app
});

示例：通過Vue執行個體的data選項，可以聲明應用内需要雙向綁定的資料。也可以将所有會用到的資料都預先在data内聲明，這樣不至于将資料散落在業務邏輯中

HTML代碼:

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

所有會用到的資料預先在data内聲明

JavaScript代碼:

var vm=new Vue({
  el:"#app",
  data:{
      title:"",
      user:{
        name:"",
        age:0
      }
  }
});

示例：

在Vue執行個體内部通路data中的資料時一般使用“this.資料”的方式，如果在Vue執行個體外部通路data中的資料時，使用Vue執行個體對象來通路

var vm=new Vue({
//…data代碼同上例
 methods:{
    doSave:function(){
      console.log("姓名：",this.user.name)
    }
  }
});

var vm=new Vue({
//…data代碼同上例
});

// 在Vue執行個體外部通路data中的資料
console.log(vm.user.name);

在執行個體外部，使用執行個體對象的方式通路

Vue執行個體有一個完整的生命周期，也就是從開始建立、初始化資料、編譯模闆、挂載Dom、渲染、更新、渲染到銷毀等一系列過程，稱為Vue的生命周期。

通俗說Vue執行個體從建立到銷毀的過程，就是它的生命周期。

每個Vue執行個體建立時，都會經曆一些系列的初始化過程，同時也會調用相應的生命周期函數，這些生命周期函數稱為“鈎子函數”

開發者可以利用這些鈎子函數，在合适的時機執行相關業務邏輯代碼。在Vue執行個體的生命周期，鈎子比較常用的函數有：

created()函數：執行個體建立完成後調用

mounted()函數：el挂載到執行個體上後調用

beforeDestroy()函數：執行個體銷毀之前調用

示例：下面示例中,在created()鈎子函數中對模型加載資料，而在mounted()函數中讀取el綁定的元素的資訊。

<div id="app">
  <h1>{{ title }}</h1>
</div>

...
created:function() {
  this.title="生命周期鈎子函數";
  console.log("created()鈎子函數執行...");
}
...

...
mounted:function() {
  console.log(this.$el);
  console.log("模型title的值:",this.title);
  console.log("mounted()鈎子函數執行...");
}
...

Vue.js支援在{{}}的插值的尾部添加一個管道符（“|”）對資料進行過濾

建立過濾器有兩種方式：

全局建立過濾器
局部建立過濾器

文法:

//建立全局過濾器
Vue.filter("過濾器名",function(val){
  過濾語句
});

//建立局部過濾器
var vm = new Vue({
  el: "#app",
  filters:{
    過濾器名:function(val){
      過濾語句
    }
  }
});

<div id="app">
    {{ 模型資料 | 過濾器 }}
</div>

示例：使用過濾器實作将英文單詞轉換為首字母大寫顯示。

HTML代碼：

<div id="app">
  <div class="banner">
    {{ text | tranformFilter }}
  </div>
</div>

JavaScript代碼：

//…
filters: {
    tranformFilter: function (val) {
      var strs = val.split(' ');
      var result = "";
      for (var i = 0; i < strs.length; i++) {
        result += strs[i].charAt(0).toUpperCase() + strs[i].substring(1) + ' ';
      }
      return result;
    }
  }
//…

Vue是建構Web界面的JavaScript庫。使用Vue的過程就是定義MVVM各個組成部分的過程，其過程步驟如下定義View。

定義Model。建立一個Vue執行個體或ViewModel，它用于連接配接View和Model。

Vue執行個體有一個完整的生命周期，也就是從開始建立、初始化資料、編譯模闆、挂載Dom、渲染、更新、渲染到銷毀等一系列過程，稱為Vue的生命周期

Vue.js支援在{{}}的插值的尾部添加一個管道符（“|”）對資料進行過濾，經常用于格式化文本，比如字母全部大寫、貨币千位使用逗号分隔等。

本文來自部落格園，作者：明金同學，轉載請注明原文連結：https://www.cnblogs.com/vmuu/p/15663284.html

公衆号：【明金同學】