vue.js的簡單總結

来源:http://www.cnblogs.com/akun-2017/archive/2017/11/15/7837483.html
-Advertisement-
Play Games

這篇文章主要對vue的理解進行總結: 參考來源:http://blog.csdn.net/generon/article/details/72482844 vue.js是一套構建用戶界面的漸進式框架,它的核心庫只關註視圖層。它相比之其它的框架來說要更加的輕便,易於上手,相對與大部分的框架在性能方面要 ...


這篇文章主要對vue的理解進行總結:

參考來源:http://blog.csdn.net/generon/article/details/72482844

vue.js是一套構建用戶界面的漸進式框架,它的核心庫只關註視圖層。它相比之其它的框架來說要更加的輕便,易於上手,相對與大部分的框架在性能方面要好一些。

不過也有不足的地方:比如不能支持IE8及以下的IE版本。

Vue.js的特性如下:

  1.輕量級的框架

  2.雙向數據綁定

  3.指令

  4.插件化

 

Vue目前的的開發模式主要有兩種:
1.直接頁面級的開發,script直接引入Vue
2.工程性開發,webpack+loader或者直接使用腳手架工具Vue-cli,裡面的文件都配置好了

webpack可以進行配置,配置多文件入口,進行多頁面開發

 

渲染流程大概分以下幾個步驟:

  1. new Vue,執行初始化
  2. 掛載$mount方法,通過自定義Render方法、template、el等生成Render函數
  3. 通過Watcher監聽數據的變化
  4. 當數據發生變化時,Render函數執行生成VNode對象
  5. 通過patch方法,對比新舊VNode對象,通過DOM Diff演算法,添加、修改、刪除真正的DOM元素

下麵說一說vue的渲染模式有三種:

1、自定義的render函數

1.Vue.component('anchored-heading', {
2.    render: function (createElement) {
3.        return createElement(
4.            'h' + this.level,   // tag name 標簽名稱
5.            this.$slots.default // 子組件中的陣列
6.        )
7.    },
8.    props: {
9.        level: {
10.            type: Number,
11.            required: true
12.        }
13.    }
14.})

  

2、 template寫法

1.var vm = new Vue({
2.    data: {
3.        // 以一個空值聲明 `msg`
4.        msg: ''
5.    },
6.    template: '<div>{{msg}}</div>'
7.})

  

3、el寫法

1.var app = new Vue({
2.    el: '#app',
3.    data: {
4.        message: 'Hello Vue!'
5.    }
6.})

這三種渲染模式最終都是要得到Render函數。只不過用戶自定義的Render函數省去了程式分析的過程,等同於處理過的Render函數,而普通的template或者el只是字元串,需要解析成AST,再將AST轉化為Render函數。

記住一點,無論哪種方法,都要得到Render函數。

我們在使用過程中具體要使用哪種調用方式,要根據具體的需求來。

  • 如果是比較簡單的邏輯,使用template和el比較好,因為這兩種都屬於聲明式渲染,對用戶理解比較容易,但靈活性比較差,因為最終生成的Render函數是由程式通過AST解析優化得到的;

  • 而使用自定義Render函數相當於人已經將邏輯翻譯給程式,能夠勝任複雜的邏輯,靈活性高,但對於用戶的理解相對差點。 

生命周期:

beforeCreate(創建前)

created(創建後)

beforeMount(載入前)

mounted(載入後)

beforeUpdate(更新前)

updated(更新後)

beforeDestroy(銷毀前)

destroyed(銷毀後)

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • package ty; abstract class A { public abstract void fun(); }; package ty; class B extends A { public void fun() { System.out.println("what is your nam... ...
  • 介紹 釘釘,阿裡巴巴出品,專為中國企業打造的免費智能移動辦公平臺,含PC版,Web版和手機版。智能辦公電話,消息已讀未讀,DING消息任務管理,讓溝通更高效;移動辦公考勤,簽到,審批,企業郵箱,企業網盤,企業通訊錄,讓工作更簡單;酷公司,用釘釘,隨時隨地移動辦公。 由於目前的版本郵件警報暫時走不通, ...
  • 負載均衡集群企業級應用實戰-LVS 實現基於LVS負載均衡集群的電商網站架構 隨著業務的發展,網站的訪問量越來越大,網站訪問量已經從原來的1000QPS,變為3000QPS,網站已經不堪重負,響應緩慢,面對此場景,單純靠單台LNMP的架構已經無法承載更多的用戶訪問,此時需要用負載均衡技術,對網站容量 ...
  • 恢復內容開始 設計模式(design patterns)是一套被反覆使用,多數人知曉的,經過分類編目的,使用設計模式是 為了可重用代碼,讓代碼更容易更容易被他人理解,保證代碼可靠性。 設計模式一共有23種: 1. 設計者模式分類 (三大類) 創建者模式: 一共分5種 工廠方法模式 , 抽象工廠模式, ...
  • CDN的全稱是Content Delivery Network,即內容分髮網絡。 其基本思路是儘可能避開互聯網上有可能影響數據傳輸速度和穩定性的瓶頸和環節,使內容傳輸的更快、更穩定。通過在網路各處放置節點伺服器所構成的在現有的互聯網基礎之上的一層智能虛擬網路,CDN系統能夠實時地根據網路流量和... ...
  • 題目1:通過代碼描述每一天的不同時間段的工作效率 分析: 首先確定,工作狀態指正在工作,或者以及下班這些情況,而這些情況所受影響的因素包括:當前時間以及任務是否已經完成。所以在Work中需要兩個屬性:hour和finish。然後根據這兩個屬性直接判斷當前的工作狀態即可。 實現: 1 class Pr ...
  • 1. 什麼是領域(Domain) 我們所做的軟體系統的目的都是來解決一系列問題,例如做一個電商系統來線上銷售自己企業的產品;做一個灰度發佈平臺來提升服務的質量和穩定性。任何一個系統都會屬於某個特定的領域,例如: 論壇是一個領域:要做一個論壇,那這個論壇的核心業務是確定的:比如用戶發帖、回帖等核心基本 ...
  • 複習一下: | 基礎模塊 | 作用 | | | | | fs | fs模塊用於對系統文件及目錄進行讀寫操作 | | http | 創建伺服器。e.g.http.createServer(); | | queryString | 把url帶的參數串轉化為數組對象 | | url | 直接解析URL中字 ...
一周排行
    -Advertisement-
    Play Games
  • 示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後,項目結構如下所示: MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread] 特性用於需要與 COM 組件交互的應用程式,尤其是依賴單線程模型(如 Windows Forms 應用程式)的組件。在 STA 模式下,線程擁有自己的消息迴圈,這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • 在WinForm中使用全局異常捕獲處理 在WinForm應用程式中,全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理,可以有效地捕獲並處理未預見的異常,從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • 前言 給大家推薦一款開源的 Winform 控制項庫,可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫,同時也提供了工具類庫、擴展 ...
  • 說明 該文章是屬於OverallAuth2.0系列文章,每周更新一篇該系列文章(從0到1完成系統開發)。 該系統文章,我會儘量說的非常詳細,做到不管新手、老手都能看懂。 說明:OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友,請關註我吧(*^▽^*) ...
  • 一、下載安裝 1.下載git 必須先下載並安裝git,再TortoiseGit下載安裝 git安裝參考教程:https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit,Git客戶端,32/6 ...
  • 前言 在項目開發過程中,理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼,還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程:Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 一:背景 1. 講故事 前段時間有位朋友找到我,說他的窗體程式在客戶這邊出現了卡死,讓我幫忙看下怎麼回事?dump也生成了,既然有dump了那就上 windbg 分析吧。 二:WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死,入口門檻很低,後續往下分析就不一定了,不管怎麼說先用 !clrsta ...
  • 前言 人工智慧時代,人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API,工具不僅易於集成,還具備高效處理能力。 本文將介紹一款如何利用這些API,為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...