Vue.js聲明式渲染

基礎概念理解：（*）

---

1. 什麼是Vue？

Vue是一套構建用戶界面的漸進式框架。

2. 如何理解漸進式

我對漸進式的理解其實就兩個字：自由。

當咱們要用Angular框架時要知道它是強主張的，必需要遵循如下三條規則：

• 必須使用它的模塊機制

• 必須使用它的依賴注入

• 必須使用它的特殊形式定義組件（這一點每一個視圖框架都有，難以免）

而React的主張主要是函數式編程的理念，好比說，你須要知道什麼是反作用，什麼是純函數，如何隔離反作用。它的侵入性看似沒有Angular那麼強，主要由於它是軟性侵入。

可是Vue就比較自由了你想把你的頁面分的更加具體，分紅更小的可控單元，那就用組件系統其餘能夠不用，固然聲明式渲染咱們仍是得用的，應爲咱們都但願DOM的更新是自動的，而非手動去更新的。

這也就是Vue如今這麼受歡迎的緣由之一吧！

如何理解自底向上的開發模式

個人理解就是好比咱們先寫一個基礎的頁面，把基礎的東西寫好，再逐一去添加功能和效果，由簡單到繁瑣的這麼一個過程。

聲明式渲染和命令式渲染

• 命令式渲染 ： 命令咱們的程序去作什麼，程序就會跟着你的命令去一步一步執行

• 聲明式渲染 ： 咱們只須要告訴程序咱們想要什麼效果，其餘的交給程序來作。

咱們來看個小例子，可能就更加理解聲明式和命令式

輸出的結果實際上是相同的

談談對生命週期的理解

咱們在官網會看到這麼一張圖，但根本就看不懂的人佔很大一部分，但對生命週期的理解仍是很重要的。

這張圖就能夠更好的詮釋生命週期了

Vue的Vue命令及簡單操做

簡單操做

首先咱們要進行一個Vue首先先下載並引入Vue.js，其次準備一個裝模板的HTNL標籤，全部Vue模板都在這個標籤裏寫。

而後是new一個Vue實例，寫入基本的Vue結構

固然這些只是一小部分，不太徹底，這個因項目而異，有時也沒必要寫這麼多，用哪一個寫那個就好。這就是Vue的基本結構，裏邊具體內容仍是要根據項目不一樣去添加。

Vue 命令簡介

v-on:事件 = "事件名稱" 或者 @事件 = "事件名稱" //綁定事件
例如：

<div v-on:click = "change"></div> // 這裏是個點擊事件，而change是事件名稱

v-bink:自定義屬性 = "屬性名稱" 或者 :自定義屬性 = "屬性名稱" // 動態綁定屬性
例如：

<div v-bink:title = "hello"></div>    //這裏就綁定了一個名叫hello的屬性

v-if = "判斷條件" // if判斷
例如：

<div v-if = "name === Vue"></div>   //判斷name是否是等於Vue

v-for = "(參數1，參數2) in 數組" // 遍歷數組
例如：

<div id="app">
        <ul>
            <li v-for="(text,index) in list">    //第一個參數是內容，第二個是序號
                {{index}}-{{text}}
            </li>
        </ul>
    </div>
    <script src="./vue.js"></script>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                list:[
                    "A","B","C"
                ]
            }
        })

固然Vue不止這些命令還有不少這裏就不一一說明了，你們能夠去官方查看更多https://cn.vuejs.org/v2/guide/