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
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...