Vue特性介紹

漸進(jìn)式框架

什么是漸進(jìn)式框架

1. 聲明式渲染： 核心庫，只當(dāng)作模版引擎使用，將數(shù)據(jù)渲染到視圖中
2. 組件系統(tǒng)：將界面劃分n個(gè)小模塊
3. 客戶端路由： 做移動(dòng)端SPA單頁應(yīng)用
4. 大規(guī)模狀態(tài)管理： 組件過多，共享數(shù)據(jù)
5. 構(gòu)建工具 ： 模塊化，打包

Vue中的兩個(gè)核心點(diǎn)

1. 響應(yīng)的數(shù)據(jù)綁定

• 當(dāng)數(shù)據(jù)發(fā)生改變====>自動(dòng)更新視圖。(雙向綁定)
• 核心機(jī)制: 主要是利用Object.defineProperty()方法中的setter和getter來代理數(shù)據(jù)，并且監(jiān)控對(duì)數(shù)據(jù)的操作。

get
一個(gè)給屬性提供 getter 的方法，如果沒有 getter 則為 undefined。該方法返回值被用作屬性值。默認(rèn)為 undefined。

set
一個(gè)給屬性提供 setter 的方法，如果沒有 getter 則為 undefined。該方法將接受唯一參數(shù)，并將該參數(shù)的新值分配給該屬性。默認(rèn)為 undefined。

2.組合的視圖組件

• UI 頁面映射為組件樹

• 劃分組件可維護(hù)、可重用、可調(diào)試

  
  
  視圖組件

虛擬DOM

• 運(yùn)行js的速度很快，但是大量操作DOM的效率就相對(duì)很慢。時(shí)常在更新數(shù)據(jù)后會(huì)重新渲染頁面，這樣造成沒有改變數(shù)據(jù)的地方也重新渲染DOM節(jié)點(diǎn)，這樣就會(huì)造成了很大程度上的資源浪費(fèi)和性能降低。
• 利用在內(nèi)存中生成與真實(shí)環(huán)境DOM與之相對(duì)應(yīng)的數(shù)據(jù)結(jié)構(gòu)，這個(gè)在內(nèi)存中生成的結(jié)構(gòu)稱之為虛擬DOm。

虛擬DOM渲染過程

• 當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，能夠以最小代價(jià)按規(guī)則計(jì)算出重新渲染組件并應(yīng)用到DOM操作上。

  
  
  只修改有數(shù)據(jù)更改的地方

MVVM模式

• M： Model 數(shù)據(jù)類型
• V ：View 視圖模版
• VM ： view-Model 視圖模型,也就是new Vue()

M層和V層是相對(duì)獨(dú)立的，通過VM層做聯(lián)系

聲明式渲染

        var arr = [1, 2, 3, 4, 5];
        // 命令式渲染
        //**需要以具體代碼表達(dá)在哪里做什么，以及如何實(shí)現(xiàn)
        var newArr1 = [];
        for (var i = 0; i < arr.length; i++) {
            newArr1.push(arr[i] * 2);
        }

        // 聲明式渲染
        //**只需聲明在哪里做什么，無需關(guān)心如何實(shí)現(xiàn)
        var newArr2 = arr.map(function(i) {
            return i * 2;
        })
        console.clear();
        console.log(newArr1);
        console.log(newArr2);

Vue實(shí)例

1. Vue實(shí)例

每一個(gè)應(yīng)用都是通過Vue這個(gè)構(gòu)造函數(shù)創(chuàng)建根實(shí)例來啟動(dòng)new Vue（選項(xiàng)對(duì)象）

需要傳入的選項(xiàng)對(duì)象包含掛在元素、模版、方法等。

2. Vue代理data數(shù)據(jù)

每個(gè)Vue實(shí)例都會(huì)代理其data對(duì)象里所有的屬性，這些被代理的屬性是響應(yīng)的。新添加的屬性不具備相應(yīng)功能，改變后不會(huì)更新視圖。

3. Vue實(shí)例自身屬性及方法

暴露自身的屬性和方法，以&開頭，例如:&el,&data....

vue實(shí)例的自身屬性和方法

指令

什么是指令?

• 指令是一種特殊的自定義行間屬性;
• 指令的職責(zé)是當(dāng)其表達(dá)式的值發(fā)生改變時(shí)，相應(yīng)的將某些行為應(yīng)用到DOM上;
• 在Vue中，指令以v-開頭

Vue的內(nèi)置指令

模版

html模版

插值

 <div id="demo" :custom="abc">
        <!--簡單的表達(dá)式-->
        {{ true? 123:456}} {{1+2+3+46+5}}
        <div v-html="html"> </div>
 </div>

  <script>
        let obj = {
            html: "<h1>這里是H1標(biāo)簽</h1>",//避免惡意攻擊，此處必須是可信的html結(jié)構(gòu)
            abc: 1
        }
        var vm = new Vue({
            el: '#demo',
            data: obj
        })
   </script>

渲染結(jié)果

字符串模版

template字符串

• template選項(xiàng)對(duì)象的屬性。
• 模版會(huì)替換掛在的元素，掛載元素的內(nèi)容都將被忽略。
• 根節(jié)點(diǎn)只能有一個(gè),允許嵌套，禁止并列。因?yàn)槭怯成涞氖且粋€(gè)對(duì)象嵌套對(duì)象的形式。
• 將html結(jié)構(gòu)寫在一對(duì)script標(biāo)簽中，并設(shè)置type="x-template"屬性。

1. 使用字符串:

//錯(cuò)誤寫法=>根節(jié)點(diǎn)僅能有一個(gè)，不允許有兄弟節(jié)點(diǎn)
 var errorStr = `<div>hello ,Vue!{{abc}}</div><div>test text</div>`;

 <div id="demo" v-html="html" :data-id="abc"> </div>

    <script>
        let obj = {
            abc: 1
        }

        // 正確寫法
        var str = `<div>hello ,Vue!{{abc}} <div>Test text</div>  </div>`;
        var vm = new Vue({
            el: '#demo',
            data: obj,
            template: str // template權(quán)限更高會(huì)沖掉靜態(tài)Dom
        })
    </script>

渲染結(jié)果

2. 使用x-template:

缺點(diǎn)：不能跨文件使用，同樣只能允許有一個(gè)根節(jié)點(diǎn),類似于<style>標(biāo)簽。

    <div id="demo">
        <span>測試文字</span>
    </div>

    <script type="x-template" id="temp">
        <div>
            hello,{{abc}}
            <span>{{message}}</span>
            <div v-html="html">
            </div>
        </div>
    </script>

    <script>
        let obj = {
            message: "我是個(gè)message",
            html: "<p>這里是一個(gè)段落</p>",
            abc: "test"
        }
        var vm = new Vue({
            el: "#demo",
            data: obj,
            template: "#temp"
        });
    </script>

渲染結(jié)果

render函數(shù)

render() 屬于選項(xiàng)對(duì)象的屬性，”最接近編譯器的“方法。

數(shù)據(jù)對(duì)象屬性

render里的class

render里的class是使用v-bind來通過數(shù)據(jù)驅(qū)動(dòng)添加或者移除的，它與原生的class能夠共存。

<style>
   .bg { background: #9f0;}
   .fontSize {font-size: 50px;}
</style>
<div id="demo" class="fontSize" :class="{bg:addClass}">測試文字</div>
<script>
    let obj = {
      addClass: true
    }
    var vm = new Vue({
      el: "#demo",
      data: obj,
    });
</script>

渲染結(jié)果

render里的creatElement

語法: createElement(tagName,data,childElement)

參數(shù)說明:

參1 tagName ：標(biāo)簽名

參2 data ：數(shù)據(jù)對(duì)象{}

參3 childElement:子元素（文本或數(shù)組）

 <div id="demo"> </div>
    <script>
        var vm = new Vue({
            el: "#demo",
           
            render(creatElement) {
               // creatElement(標(biāo)簽名，{數(shù)據(jù)對(duì)象},子元素)
              
              
              //此處return的就是VNode對(duì)象(虛擬DOM)
                return creatElement(
                    "ul",
                    //自定義屬性 
                    {
                        class: {
                            bg: true,
                                fontSize: true
                        },
                        // 添加行內(nèi)樣式
                        style: {
                            padding: "10px",
                            margin: "0",
                            listStyle: "none"
                        },
                        // 添加自定義屬性
                        attrs: {
                            abc: "xyz"
                        },
                        // domProps的innerHTML權(quán)重比createElement高
                        domProps: {
                            innerHTML: "<li class='bg2'>我的權(quán)重更高</li>"
                        }
                    }, [
                        creatElement("li", 1),
                        creatElement("li", 2),
                        creatElement("li", 3)
                    ]
                )
            }
        });
    </script>

輸出DOM結(jié)果以及控制臺(tái)打印return creatElement