Vue.js高效前端開發源碼分析

這篇“Vue.js高效前端開發源碼分析”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“Vue.js高效前端開發源碼分析”文章吧。

一、Vue概述

1、Web前端框架介紹

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

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

2、MVC和MVVM

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

• Model：主要負責數據處理和運算。

• Controller：主要負責接收輸入的數據并控制選擇使用哪個View顯示。

• View：主要負責顯示數據和用戶交互。

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

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

3、Vue介紹

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

比如：

• 解耦視圖和數據。

• 可復用的組件。

• 數據綁定。

• 功能插件化。

• 虛擬DOM（Virtual DOM）。

4、安裝Vue

使用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使用

1、第一個Vue應用

使用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
});

 2、Vue的雙向綁定

在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 }}

中的內容也會被更新

3、實踐練習

三、Vue生命周期

1、Vue的實例和數據

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

語法：

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

通過構造函數Vue就可以創建一個Vue的根實例，并啟動Vue應用

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

示例： 通過Vue實例的data選項，可以聲明應用內需要雙向綁定的數據。

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

HTML代碼:

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

當掛載成功后，就可以通過vm.$el來訪問該元素

 JavaScript 代碼:

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實例對象來訪問

JavaScript代碼:

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);

在實例外部，使用實例對象的方式訪問

2、Vue生命周期鉤子函數

Vue實例有一個完整的生命周期，也就是從開始創建、初始化數據、編譯模板、掛載Dom、渲染、更新、渲染到銷毀等一系列過程，稱為Vue的生命周期。

通俗說Vue實例從創建到銷毀的過程，就是它的生命周期。

每個Vue實例創建時，都會經歷一些系列的初始化過程，同時也會調用相應的生命周期函數，這些生命周期函數稱為“鉤子函數”

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

• created()函數：實例建立完成后調用

• mounted()函數：el掛載到實例上后調用

• beforeDestroy()函數：實例銷毀之前調用

 示例： 下面示例中,在created()鉤子函數中對模型加載數據，而在mounted()函數中讀取el綁定的元素的信息。

HTML代碼:

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

JavaScript代碼:

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


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

3、實踐練習

四、過濾器

過濾器使用

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代碼：

以上就是關于“Vue.js高效前端開發源碼分析”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。