Vue.js-開篇

學習筆記： Vue.js基礎知識

基礎知識

構造函數Vue的根實例new Vue({})，並啓動Vue應用。

var app = Vue({
    el: "#app",
    data: {},
    methods: {}
});

變量app表明這個Vue實例。

其中，必不可少的選項是el，用於指定一個頁面中已存在的DOM元素來掛載Vue實例，能夠是HTMLElement，也能夠是CSS選擇器。

var app = Vue({
    el: document.getElementById('app')
});

掛載成功後，能夠經過app.$el訪問該元素。Vue提供了不少經常使用的實例屬性和方法，都以$開頭。

data選項用於聲明應用內須要雙向綁定的數據。建議全部會用到的數據都預先在data內聲明，提高業務的可維護性。

Vue實例new Vue({})，這裏可使用app代理了data對象裏的全部屬性，能夠這樣訪問data中的數據：

console.log(app.name);

除了顯式地聲明數據外，還能夠指向一個已有的變量，而且它們之間默認創建了雙向綁定，當修改其中任意一個時，另外一個也會跟着變化。

var myData = {
    a: 1
};

var app = Vue({
    el: "#app",
    data: myData
});

app.a = 2;
console.log(myData.a);//2
myData.a = 3;
console.log(app.a);//3

生命週期

Vue的生命週期鉤子：

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

這些鉤子與el和data相似，也是做爲選項寫入Vue實例中，而且鉤子的this指向的是調用它的Vue實例。

插值與表達式

使用（Mustache語法）{{}}是最基本的文本插值方法，它會自動將咱們雙向綁定的數據實時顯示出來。

v-html直接輸出HTML，而不是將數據解析後的純文本。

<div id="app">
<span v-html="link"></span>
</div>

new Vue({
    el: "#app",
    data: {
        link: '<a href="#">this is a link.</a>'
    }
});

link的內容將會被渲染成一個a標籤，而不是純文本。

若是將用戶產生的內容使用v-html輸出後，有可能致使XSS攻擊，因此要在服務端對用戶提交的內容進行處理，通常可將<>轉義。

若是想要顯示{{}}標籤，不進行替換，使用v-pre便可跳過這個元素和它的子元素的編譯過程。

• 在{{}}中除了簡單的綁定屬性值外，還可使用JavaScript表達式進行簡單的運算、三元運算等。
• Vue只支持單個表達式，不支持語句和流程控制。
• 在表達式中不能使用用戶自定義的全局變量，只能使用Vue白名單內的全局變量，例如Math和Date。

過濾器

Vue.js支持在{{}}插值的尾部添加一個管道符(|)對數據進行過濾，常常用戶格式化文本，好比字母所有大寫、貨幣千位使用逗號分隔等。過濾的規則是自定義的，經過給Vue實例添加選項filter來設置。

<div id="app">
    {{date | formatDate}}
</div>

過濾器也能夠串聯，並且能夠接收參數：

<!--串聯-->
{{message | filterA | filterB}}

<!--接收參數-->
{{message | filterA('arg1','arg2')}}

過濾器應當用於處理簡單的文本轉換，若是要實現更爲複雜的數據轉換，應該使用計算屬性。

指令事件

指令（Directives）是Vue.js模板中最經常使用的一項功能，它帶有前綴v-。指令的主要職責就是當其表達式的值改變時，相應地將某些行爲應用到DOM上。

v-bind的基本用途是動態更新HTML元素上的屬性，好比id、class等。

另外一個很是重要的指令就是v-on，用來綁定事件監聽器。

在普通元素上，v-on能夠監聽原生的DOM事件，除了click外還有dbclick、keyup、mousemove等。表達式能夠是一個方法名，這些方法都寫在Vue市裏的methods屬性內，而且是函數的形式，這些函數的this指向的是當前Vue實例自己，所以能夠直接使用this.xxx的形式訪問或修改數據。

Vue.js將methods裏的方法進行代理，能夠像訪問Vue數據同樣調用方法：

<div id="app">
    <p v-if="show">這是一段爲本</p>
    <button @click="handleClose">點擊隱藏</button>
</div>

new Vue({
    el: "#app",
    data: {
        show: true
    },
    methods: {
        handleClose: function () {
            this.close()
        },
        close: function () {
            this.show = false
        }
    }
});

在handleClose方法中直接經過this.close()調用了close()函數。

var app = new Vue({
    el: "#app",
    data: {
        show: true
    },
    methods: {
        init: function (text) {
            console.log(text);
        },
    },
    mounted: function () {
        this.init('在初始化時調用');
    }
});
app.init('經過外部調用');

語法糖

語法糖是指在不影響功能的狀況下，添加某種方法實現一樣的效果，從而方便程序開發。

Vue.js的v-bind和v-on指令都提供了語法糖，也能夠說是縮寫，好比v-bind縮寫成:，多用於a、img標籤；v-on縮寫成@，所用於input、button標籤。