簡單指令介紹

本教程為入門教程，如有錯誤，請各位前端大佬指出。

1.為什么使用vue

業務越來越復雜，更多操作在前段進行。

漸進式

不需要操作dom

雙向綁定

環境構建方便

組件開發

社區活躍

2.vue入口

main.js為主入口

import Vue from 'vue' import App from './App' import router from './router' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, //指定進入app.vue template: '' }) 復制代碼

3.基本指令

1.{{}}與v-html

用于打印與輸出。

復制代碼

2.v-bind

v-bind就是用于綁定數據和元素屬性的。

復制代碼

3.class與style

class的綁定方式。

復制代碼

4.觀察指令method和computed

method和computed區別：

我們可以將同一函數定義為一個方法而不是一個計算屬性。兩種方式的最終結果確實是完全相同的。然而，不同的是計算屬性是基于它們的響應式依賴進行緩存的。只在相關響應式依賴發生改變時它們才會重新求值。這就意味著只要?msg還沒有發生改變，多次訪問?showMessage計算屬性會立即返回之前的計算結果，而不必再次執行函數。

函數執行需要?數據屬性里面的 message 值作為參數。

● 如果使用 methods 執行函數，vue 每次都要重新執行一次函數，不管msg的值是否有變化；

● 如果使用computed 執行函數，只有當msg這個最初的數據發生變化時，函數才會被執行。（依賴-監測數據變化）

復制代碼

5.條件渲染

v-if,v-else顧名思義，判斷是否可以顯示。

復制代碼

v-if：每次都會重新刪除或創建元素，具有較高的切換性能消耗；

v-show：每次切換元素的 display：none 樣式，具有較高的初始渲染消耗。

v-show只編譯一次，后面其實就是控制css，而v-if不停的銷毀和創建，故v-show性能更好一點。

復制代碼

6.列表輸出

v-for用于循環列表。

復制代碼

7.數組更新

注意：filter()、concat()?和?slice()不發生更新。

復制代碼

8.事件處理

v-on：當執行xx動作時執行xx函數。

復制代碼

9.事件修飾

10.鍵盤事件

復制代碼

其余鍵盤操作介紹：

.enter .tab .delete (捕獲“刪除”和“退格”鍵) .esc .space .up .down .left .right .ctrl .alt .shift .meta 等 請參考文檔 復制代碼

11.表單輸入

雙向數據綁定指令lazy，number，trim。

復制代碼

.lazy 在默認情況下，v-model 在每次 input 事件觸發后將輸入框的值與數據進行同步 (除了上述輸入法組合文字時)。你可以添加 lazy 修飾符，從而轉變為使用 change 事件進行同步： .number 如果想自動將用戶的輸入值轉為數值類型，可以給 v-model 添加 number 修飾符： 這通常很有用，因為即使在 type="number" 時，HTML 輸入元素的值也總會返回字符串。如果這個值無法被 parseFloat() 解析，則會返回原始的值。 .trim 如果要自動過濾用戶輸入的首尾空白字符，可以給 v-model 添加 trim 修飾符：

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。