Vue做為當今三大流行框架，如果不懂點，似乎沒辦法跟別人說做過前端，好吧，三個月的時間內斷斷續續的把基礎內容熟悉并基本上敲了一遍，簡單的做下筆記，方便記憶和查詢:
MVVM模式是由經典的軟體架構MVC衍生來的，當View(視圖層)變化時，會自動更新到ViewModel(視圖模型)，反之亦然，View和ViewModel之間通過雙向系結(data-binding)建立聯系，
：el用戶指定一個頁面中已存在的DOM元素來掛載Vue實體，它可以是HTMLElement,也可以是CSS選擇器；
：Vue提供了許多常用的實體屬性與方法，都以$ 開頭，比如$el.
：Vue的生命周期鉤子，比較常用的有:
- created：實體創建完成后呼叫，此階段完成了資料的觀測等，但尚未掛載，$el還不可用，需要初始化處理一些資料時會比較有用，
- mounted：el掛載到實體上后呼叫，一般我們的第一個業務邏輯會在這里開始，
- beforeDestroy 實體銷毀之前呼叫，主要解綁一些使用addEventListener監聽的事件等，
：使用雙大括號{{}}是最基本的文本插值方法；
：如果有時候就是想輸出html，而不是將資料決議后的純文本，可以使用v-html;
：如果想顯示{{}},而不進行替換，使用v-pre即可跳過這個元素和它的子元素的編譯程序，例如:<span v-pre>{{這里的內容是不會被編譯的}}</span>
：在{{}}中，除了簡單的系結屬性值外，還可以使用JavaScript運算式進行簡單的運算，還可以使用JavaScript運算式進行簡單的運算、三元運算等；
: Vue.js只支持單個運算式，不支持陳述句和流控制，另外，在運算式中，不能使用用戶自定義的全域變數，只能使用Vue白名單內的全域變數，例如Math和Date;
: Vue.js支持在{{}}插值的尾部添加一個管道符“（|）”對資料進行過濾，經常用于格式化文本，比如字母全部大寫、貨幣千位使用逗號分割等，過濾器應當用于處理簡 單的文本轉換，如果要實作更為復雜的資料變換，應該使用計算屬性，
：指令是Vue.js模版中最常用的一項功能，它帶有前綴v-，比如v-if、v-html、v-pre等，指令的主要職責就是當其運算式的值改變時，相應地將某些行為應用到DOM 上
：資料驅動DOM是Vue.js的核心理念，所以不到萬不得已時不要主動操作DOM，你只需要維護好資料，DOM的事Vue會幫你優雅的處理，
：v-bind的基本用途是動態更新html元素上的屬性，比如id、class等，
：另一個非常重要的指令是v-on，它用來系結事件監聽器，這樣我們就可以做一些互動了；運算式除了方法名，也可以直接是一個行內陳述句；Vue.js將methods里的 方法也代理了，所以也可以像訪問Vue資料那樣來呼叫方法;
: Vue.js的v-bind和v-on指令都提供了語法糖，也可以說是縮寫，比如v-bind,也可以省略v-bind,直接寫一個冒號":",v-on可以直接用“@”來縮寫；
：所有的計算屬性都以函式的形式寫在Vue實體內的computer選項內，最侄訓傳計算后的結果, 每一個計算屬性都包含一個getter和一個setter；
：計算屬性還有兩個很實用的小技巧容易被忽略：一是計算屬性可以依賴其他計算屬性；二是計算屬性不僅可以依賴當前Vue實體的資料，還可以依賴其他實體的資料；
：使用計算屬性還是methods取決你是否需要快取，當遍歷大陣列和做大量計算時，應當使用計算屬性，除非你不希望得到快取，
：當:class的運算式過長或邏輯復雜時，還可以系結一個計算屬性，這是一種很友好和常見的用法，一般當條件多于兩個時，都可以使用data或computed;
: 當需要應用多個class時，可以使用陣列語法，給:class系結一個陣列，應用一個class串列；
：使用v-bind:style可以給元素系結行內樣式，方法與:class類似，也有物件語法和陣列語法，看起來很像直接在元素上寫CSS；
：[v-clock]{display:none;}:是一個解決初始化慢導致頁面閃動的最佳實踐；
：v-once也是一個不需要運算式的指令，作用是定義它的元素或組件只渲染一次，包括元素或組件的所有子節點，首次渲染后，不再隨資料的變化重新渲染，將被視 為靜態內容，
：v-show的用法與v-if基本一致，只不過v-show是改變元素的CSS屬性display.當v-show運算式的值為false時，元素會隱藏，查看DOM結構會看到元素上加載了行內樣式display:none;
: 當你不想改變陣列，想通過一個陣列的副本來做過濾或排序的顯示時，可以使用計算屬性來回傳過濾或排序后的陣列，
：Vue提供了一個特殊變數$event,用于訪問原生DOM事件;
: Vue.js提供了v-model指令，用于在表單類元素上雙向系結資料，例如在輸入框上使用時，輸入的內容會實時映射到系結的資料上；使用v-model時，如果是用中文輸入法輸入中文，一般在沒有選定詞組前，也就是在拼音階段，Vue是不會更新資料的，當敲下漢子時才會觸發更新，如果希望總是實時更新，可以用@input來代替v-model，事實上，v-model也是一個特殊的語法糖，只不過它會在不同的表單上智能處理，
：單選按鈕在單獨使用時，不需要v-model，直接使用v-bind系結一個布爾型別的值,為真時選中，為否時不選；
：組件在使用data時，和實體稍有區別， data必須是函式，然后將資料return出去；
：在組件中，使用props來宣告需要從父級接收的資料，props的值可以是兩種，一種是字串陣列，一種是物件；
：由于HTML特性不區分大小寫，當使用DOM模版時，駝峰命名（cameCase）的props名稱要轉為短橫分割命名，
：有時候，使用props傳遞資料，傳遞的資料并不是直接寫死的，而是來自父級的動態資料，這時可以使用指令v-bind來動態系結props的值，當父組件的資料變化時，也會傳遞給子組件，
：父組件模版的內容是在父組件作用域內編譯，子組件模版的內容是在子組件作用域內編譯；
：具名Slot：給slot元素指定name后可以分發多個內容，具名slot可以與單個slot共存；
：Vue.js提供了一個特殊的元素<component>用來動態地掛載不同的組件，使用is特性來選擇掛載的組件；
：Vue提供了另一種定義模版的方式，在<script>標簽里使用text/x-template型別，并且指定一個ID，將這個ID賦給tempalate,在<script>標簽里，你可以愉快地寫HTML代碼，不用考慮換行問題；
：在一些特殊的情況下，我們需要動態的去創建Vue.js 實體，Vue.js提供了Vue.extend和$mount兩個方法來手動掛載一個實體；
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/230963.html
標籤：其他