vue零碎記憶

Vue 零碎總結

1：什麼事Vue?

Vue是一個漸進式的框架（能夠一步一步的，有階段性的使用vue,js，沒必要在開始就使用全部的設備）

2：Vue的特色？

* 解耦數據與視圖
* 組件複用
* 前端路由
* 狀態管理
* 虛擬DOM

3：比較傳統？

萬金油操做： jQuery + RequireJS(SeaJS) + artTemplate(doT) + Gulp(Grunt)
如今： 出現了React、 Angular 目的是爲了知足使用心得開發需求，像單頁面富應用， 提高開發效率，下降維護成本，組件解耦。

4： Vue的實例數據？

存儲在實例方然data選項中，全部應用到的數據都會預先在data內生命，用來保證不至於將數據散落在業務邏輯中。

5：Vue的生命週期?

created: 在實例建立完成後調用，此階段主要是完成數據的觀測，可是尚未掛載，$el還不能使用，須要初始化處理一些數據時會比較有用。
mounted： el已經掛載到實例上使用了，通常咱們的第一個業務邏輯會在這裏使用。
beforeDestory： 實例銷燬以前調用， 主要解綁一些使用addEventListener監聽的事件等。

<div id="app">

{{date}}

</div>
<script>

var app = new Vue({
    el:"#app",
    data: {
        data: new Date();
    },
    mounted： function () {
        var _this = this;
        _this.timer = setInterVal(() {
            _this.date = new Date();   
        }, 1000);
    },
    brforeDestory: () {
        if (this.timer) {
            clearInterVal(this.timer); // 當Vue實例銷燬前，清除咱們的定時器。
        }
    } 
});

</script>
注意： link的內容會被渲染成一個具體的點擊功能的a標籤，而不是一個純文本， 若是將用戶產生的內容使用v-html直接輸出，有可能出現XSS攻擊（跨站腳本攻擊）

在vue中只支持{{}}插值或者尾部添加一個管道符號| 不支持語句和流程控制，在表達式中，不能使用用戶自定義的全局變量， 只能使用Vue白名單內的全局變               量，例如Math,Date

6：關鍵字
v-pre [若是想顯示{{}}標籤， 而不進行替換， 使用v-pre便可跳過這個元素和它的子元素的編譯過程】

實例：<span v-pre>{{ 這裏的內容是不會被編譯的 }}</span>
v-cloak[解決初始化慢致使頁面閃動的最佳實踐]
            [它不須要表達式， 它會在Vue實例結束編譯的時候從綁定的HTML元素上面移除，常常與CSS的display:none聯合使用。]
v-once [做用是定義它的元素或者組件值渲染一次， 包括元素或者組件的全部子集]
            [首次渲染後，再也不隨着數據的變化而從新渲染，將被視爲靜態內容，不隨數據的變化從新渲染被視爲靜態數據]
v-if  v-else-if  v-else  [主要用於條件渲染]
v-show [主要用於條件渲染][簡單的CSS屬性切換]
            注意: v-show只是簡單地CSS屬性切換， 不管條件是不是真與否， 都會被編譯， 相比之下， v-if更適合條件不常常改變的場景，由於它的切換開銷相對
             較大， 而v-show適應於頻繁切換條件。 
v-for [數據遍歷【迭代數組、迭代對象、迭代一個整數等】]

<div id="app" v-cloak>

{{message}}

</div>
[v-cloak] {

display: none

}

7： 過濾器
用法： 支持在{{}}插值的尾部添加一個管道符 " | "
<div>

{{ date | formDate }}

</div>
<script>

var app = new Vue({
    el:"#app",
    data: {
        data: new Date();
    },
filters: {
        formDtate: function (value) {
            var date = new Date(value);
            var year = date.getFullUYear();
            var month = date.getMonth() + 1;
            var day = date.getDate();
            var hours = date.getHours();
            var minutes = date.getMinutes();
            var seconds = date.getSeconds();
            return year + '-' + month + '-' + day + '' + hours + ':' + minute + ':' + seconds;  
        }
}
});

</script>
過濾器還能夠串聯， 並且能夠接收參數，例如：
{{message | filterA | filterB}}
過濾器還能夠接受參數【這裏的字符串arg1和arg2將分別傳給過濾器的第二個和第三個參數，由於第一個參數是數據自己】
{{message | filterA('arg1', 'arg2')}}
8： 計算屬性

每個計算屬性都包含一個getter和setter一般狀況下，咱們只會用默認的getter方法來讀取一個計算屬性。

<div id="app1"></div>
<div id="app2">

{{reversedText}}

</div>
<script>

var app1 = new Vue({
    el:"#app1",
    data: {
        text: 123.456
    }
});
var app2 = new Vue({
    el:"#app2",
    computed:  {
        reversedText () {
            return app1.text.aplit(',').reverse().join(',');
        }
    }
});

</script>
計算屬性是給予它的依賴緩存的，一個計算屬性所依賴的數據發生的時候他會從新取值。
9：數據綁定

9.1： class綁定【對象綁定,數組綁定】

<div :class="{ 'active': isActive }"><div>
<div :class="{ 'active': isActive, 'error': isError }"><div>

<div :class="[ activeCls, errorCls ]"></div>

<div :class="[{ 'active': isActive }, errorCls]"></div>
注意： 若是直接在定義的組件上使用class或者：class,樣式規則會直接應用到這個組件的根元素上面
10： 數據監測？

數組監測：
        Vue監測數組的變化的時候，，並非直接從新渲染整個列表，而是最大化的複用DOM元素，替換的數組中，含有相同元素的項是不會被從新渲染， 所以
        能夠大膽的用新數組替換舊數組。

app.books = app.books.filter((item) => {

return item.name.match(/javascript/);

})
11: 事件與修飾符？

* .stop
* .prevent
* .capture
* .self
* .once

阻止事件冒泡

<form @submit.prevent="handle"></form> 提交事件再也不重複加載

修飾符串聯

添加事件監聽器使用事件捕獲模式

<div @click.self="handle">...</div> 只有事件在元素自己（而不是子元素）觸發時出發回調

<div @click.once="helf">...</div> 只是觸發一次，組件一樣適用

事件修飾符【可使用按鍵修飾符】

<input @keyup.13="submit"/>
@keyup.enter
@keyup.tab
...
@keyup. delete/esc/space/up/down/left/right

能夠本身配置具體按鍵
Vue.config.keyCodes.f1 = f12
能夠配合鼠標按鍵

@click.ctrl alt/shift/meta......
12: v-model雙向數據綁定

v-mode綁定的數據，用中文輸入法輸入中文，通常在沒有選定詞前也就是在拼音階段Vue是不會數據更新的，在敲下漢字的時候纔會更新
             [若是是實時更新可使用@input]
v-model可使用一些修飾符：
              1： v-model.lazy  [.lazy會轉換爲在change事件中同步]
              2： v-model.number [.number會將輸入轉換爲Number類型，不然雖然你輸入的是數字，但它的數據類型是String]
              3： v-model.trim [.trim能夠自動過濾輸入的首位空格]

單選【v-model與value配合使用】
<div id="app">

<input type="radio" v-model="picked" value="html" id="html"/>
<label for="html">HTML</label>
<br/>
<input type="radio" v-model="picked" value="js" id="js"/>
    <label for="js">Javascript</label>
    <br/>
 <input type="radio" v-model="picked" value="css" id="css"/>
     <label for="css">CSS</label>
    <br/>
     <p>當前選擇的項是： {{[picked}}</p>

</div>
<script>

var app = new Vue({
    el: "#app",
    data: {
        picked: 'js'
    }
})

</script>

注意： 數據picked的值與value值是同樣的時候纔會被選中。

多選[v-mode與value配合使用]
<div id="app">

<input type="checkbox" v-model="checked" value="html" id="html"/>
<label for="html">HTML</label>
<br/>
<input type="checkbox " v-model="checked " value="js" id="js"/>
    <label for="js">Javascript</label>
    <br/>
 <input type="checkbox " v-model="checked " value="css" id="css"/>
     <label for="css">CSS</label>
    <br/>
     <p>當前選擇的項是： {{[checked }}</p>

</div>
<script>

var app = new Vue({
    el: "#app",
    data: {
       checked : ['html', 'css']
    }
})

</script>
下拉菜單 [v-model與value配合使用]
<div id="app">

<select v-model="selected">
    <option v-for="（option, index) in options" key="index" :value="option.text">{{option.text}}</option>
</select>
<p>選擇的項是：{{ selected }}</p>

</div>
<script>

var app = new Vue({
    el: "#app",
    data: {
        selected: 'html',
        options: [
            {
                text: 'HTML',
                value: 'html'
            }, 
            {
                text: 'Javascript',
                value: 'js'
            },
            {
                text: 'CSS',
                value: 'css'
            }
        ]
    }
})

</script