Vue.js高效前端開發(fā)源碼分析

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

一、Vue概述

1、Web前端框架介紹

近幾年，互聯(lián)網(wǎng)前端行業(yè)發(fā)展得依舊迅猛，涌現(xiàn)出了很多優(yōu)秀的JavaScript框架，同時(shí)這些JavaScript框架也正在逐漸改變統(tǒng)的前端開發(fā)方式。

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

2、MVC和MVVM

MVC是著名的設(shè)計(jì)模式，基本思想是將軟件結(jié)構(gòu)分解為Model（模型）、View（視圖）和Controller（控制器）三部分組成。

• Model：主要負(fù)責(zé)數(shù)據(jù)處理和運(yùn)算。

• Controller：主要負(fù)責(zé)接收輸入的數(shù)據(jù)并控制選擇使用哪個(gè)View顯示。

• View：主要負(fù)責(zé)顯示數(shù)據(jù)和用戶交互。

MVVM設(shè)計(jì)模式是由Model（模型）、View（視圖）和ViewModel（視圖模型）三部分組成，是MVC設(shè)計(jì)模式的進(jìn)化版，即Controller轉(zhuǎn)變?yōu)閂iewModel。

這種模式可以使View的變化自動(dòng)化更新到ViewModel，而ViewModel的變化也會(huì)自動(dòng)同步到View上顯示。

3、Vue介紹

Vue是構(gòu)建Web界面的JavaScript庫(kù)，原稱為Vue.js，它可以通過(guò)簡(jiǎn)潔的API來(lái)提供高效的數(shù)據(jù)綁定和靈活的組件系統(tǒng)。它提供了現(xiàn)代Web開發(fā)中常用的高級(jí)功能，

比如：

• 解耦視圖和數(shù)據(jù)。

• 可復(fù)用的組件。

• 數(shù)據(jù)綁定。

• 功能插件化。

• 虛擬DOM（Virtual DOM）。

4、安裝Vue

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

安裝獨(dú)立版本

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

使用CDN引入

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

二、Vue使用

1、第一個(gè)Vue應(yīng)用

使用Vue的過(guò)程就是定義MVVM各個(gè)組成部分的過(guò)程，其過(guò)程步驟如下

定義View :

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

定義Model

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

創(chuàng)建一個(gè)Vue實(shí)例或ViewModel，它用于連接View和Model。

// 創(chuàng)建一個(gè)Vue實(shí)例或ViewModel，它連接View與 Model
var vm=new Vue({
	el: '#app',
	data: exampleData
});

 2、Vue的雙向綁定

在Vue.js中，ViewModel、View以及Model進(jìn)行交互的方式，如下圖所示

 在Vue.js中可以使用v-model指令在表單元素上創(chuàng)建雙向數(shù)據(jù)綁定

示例:

html代碼：

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

JavaScript代碼：

// 這是Model
var exampleData = {
    message: "Hello World!"
};
// 創(chuàng)建一個(gè)Vue實(shí)例
var vm=new Vue({
    el: '#app',
    data: exampleData
});

v-model雙向綁定

當(dāng)更改文本框的值時(shí)，

{{ message }}

中的內(nèi)容也會(huì)被更新

3、實(shí)踐練習(xí)

三、Vue生命周期

1、Vue的實(shí)例和數(shù)據(jù)

Vue應(yīng)用的創(chuàng)建很簡(jiǎn)單，語(yǔ)法如下面代碼所示

語(yǔ)法：

var vm=new Vue({
	// 選項(xiàng)參數(shù)
});

通過(guò)構(gòu)造函數(shù)Vue就可以創(chuàng)建一個(gè)Vue的根實(shí)例，并啟動(dòng)Vue應(yīng)用

常用的選項(xiàng)參數(shù)包含如下：

示例： 通過(guò)Vue實(shí)例的data選項(xiàng)，可以聲明應(yīng)用內(nèi)需要雙向綁定的數(shù)據(jù)。

也可以將所有會(huì)用到的數(shù)據(jù)都預(yù)先在data內(nèi)聲明，這樣不至于將數(shù)據(jù)散落在業(yè)務(wù)邏輯中，難以維護(hù)

HTML代碼:

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

當(dāng)掛載成功后，就可以通過(guò)vm.$el來(lái)訪問(wèn)該元素

 JavaScript 代碼:

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

示例： 通過(guò)Vue實(shí)例的data選項(xiàng)，可以聲明應(yīng)用內(nèi)需要雙向綁定的數(shù)據(jù)。也可以將所有會(huì)用到的數(shù)據(jù)都預(yù)先在data內(nèi)聲明，這樣不至于將數(shù)據(jù)散落在業(yè)務(wù)邏輯中

HTML代碼:

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

所有會(huì)用到的數(shù)據(jù)預(yù)先在data內(nèi)聲明

 JavaScript代碼:

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

示例：

在Vue實(shí)例內(nèi)部訪問(wèn)data中的數(shù)據(jù)時(shí)一般使用“this.數(shù)據(jù)”的方式，如果在Vue實(shí)例外部訪問(wèn)data中的數(shù)據(jù)時(shí)，使用Vue實(shí)例對(duì)象來(lái)訪問(wèn)

JavaScript代碼:

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

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

// 在Vue實(shí)例外部訪問(wèn)data中的數(shù)據(jù)
console.log(vm.user.name);

在實(shí)例外部，使用實(shí)例對(duì)象的方式訪問(wèn)

2、Vue生命周期鉤子函數(shù)

Vue實(shí)例有一個(gè)完整的生命周期，也就是從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載Dom、渲染、更新、渲染到銷毀等一系列過(guò)程，稱為Vue的生命周期。

通俗說(shuō)Vue實(shí)例從創(chuàng)建到銷毀的過(guò)程，就是它的生命周期。

每個(gè)Vue實(shí)例創(chuàng)建時(shí)，都會(huì)經(jīng)歷一些系列的初始化過(guò)程，同時(shí)也會(huì)調(diào)用相應(yīng)的生命周期函數(shù)，這些生命周期函數(shù)稱為“鉤子函數(shù)”

開發(fā)者可以利用這些鉤子函數(shù)，在合適的時(shí)機(jī)執(zhí)行相關(guān)業(yè)務(wù)邏輯代碼。在Vue實(shí)例的生命周期，鉤子比較常用的函數(shù)有：

• created()函數(shù)：實(shí)例建立完成后調(diào)用

• mounted()函數(shù)：el掛載到實(shí)例上后調(diào)用

• beforeDestroy()函數(shù)：實(shí)例銷毀之前調(diào)用

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

HTML代碼:

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

JavaScript代碼:

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


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

3、實(shí)踐練習(xí)

四、過(guò)濾器

過(guò)濾器使用

Vue.js支持在{{}}的插值的尾部添加一個(gè)管道符（“|”）對(duì)數(shù)據(jù)進(jìn)行過(guò)濾

創(chuàng)建過(guò)濾器有兩種方式：

• 全局創(chuàng)建過(guò)濾器

• 局部創(chuàng)建過(guò)濾器

 語(yǔ)法：

//創(chuàng)建全局過(guò)濾器
Vue.filter("過(guò)濾器名",function(val){
  過(guò)濾語(yǔ)句
});

//創(chuàng)建局部過(guò)濾器
var vm = new Vue({
  el: "#app",
  filters:{
    過(guò)濾器名:function(val){
      過(guò)濾語(yǔ)句
    }
  }
});

<div id="app">
    {{ 模型數(shù)據(jù) | 過(guò)濾器 }}
</div>

示例： 使用過(guò)濾器實(shí)現(xiàn)將英文單詞轉(zhuǎn)換為首字母大寫顯示。

HTML代碼：

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

JavaScript代碼：

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