Vue使用小結

公司新項目使用Asp.Net Core+Vue組合來作，這裏總結下對於Vue的認識

爲何選擇Vue

主要基於如下幾點選擇Vue而不是jQuery、React等框架

• 雙向綁定
  相比於jQuery減小了許多DOM操做
• 文檔
  相比於React和Angular，Vue的文檔簡單易讀
• 上手快
• 輕量級

Debug

Chrome藉助於Vue Devtools插件能夠方便的查看Vue對象：

 

 

Vue實例

基本使用

頁面中至少有一個Vue實例

var vm = new Vue({
    el: '#app',
    data: {
        tag: "",
        codes: []
    },
    mounted: function () {
        this.init();
    },
    methods: {
        init() {
            this.getCodes();
        },
        getCodes() {
            if (this.tag === "") {
                // ...
            }
        }
    }
});

 

頁面中使用Vue實例：

<div id="app" v-cloak>
    <input type="text" v-model="tag">
    <ul>
        <li v-for="item in codes">item</li>
    </ul>
    <button v-on:click="getCodes()">刷新</button>
</div>

 

只有當Vue實例被建立時data中存在的屬性纔是響應式的，當這些數據改變時，視圖會進行重渲染；視圖接收用戶輸入時，data中相應的屬性值也會發生改變。

若是你在Vue實例建立完畢後，添加一個新的屬性，好比：

vm.attr="vue";

 

那麼對attr的改動將不會觸發任何視圖的更新。若是你須要在晚些時候操做一個屬性，那麼能夠在建立Vue實例時對該屬性賦予一個初始值。

計算屬性與偵聽器

項目中只用到了計算屬性，未用到偵聽器

組件

單文件組件相對複雜，且整個項目中只有極少處須要使用組件，因此這裏使用了全局組件。

模板語法

內容可參考官方文檔：模板語法。

項目中主要用到如下指令

• v-if...v-else
  條件渲染

• v-bind
  Class 與 Style 綁定

• v-for
  列表渲染

• v-model
  表單輸入綁定

• v-on
  事件處理

遇到的問題

• v-for 和 v-on:click 一塊兒使用 v-on:click無效，也不報錯
  網上多數是在Vue組件中出現這種狀況，使用v-on:click.native來替代v-on:click，我這裏不是，示例代碼以下：

<ul>
  <li v-for="item of products" v-on:click="redirectToDetail(item.id)">{{item.name}}</li>
</ul>

 

後來發現由於樣式問題，頁面上鼠標點擊時並未點擊到li標籤，於是未觸發redirectToDetail方法。

小結

這是第一次在項目中使用Vue。目前，僅僅體會了Vue的便利之處，對於背後的原理尚不清楚，這也是之後須要多研究的地方。

以上內容，不足之處但願各位網友多多指教。