Vue基礎認識

時間 2019-12-12

標籤 vue 基礎認識简体版

原文原文鏈接

一：什麼是Vue？html

vue是一個漸進式的JavaScript框架，採用的是MVVM模式。Vue 被設計爲能夠自底向上逐層應用。Vue 的核心庫只關注視圖層，不只易於上手，還便於與第三方庫或既有項目整合。另外一方面，當與現代化的工具鏈以及各類支持類庫結合使用時，Vue 也徹底可以爲複雜的單頁應用提供驅動。vue

二：vue的安裝html5

1：官網下載安裝包 https://cn.vuejs.org/v2/guide/installation.htmlnode

　　直接用 <script> 標籤引入，Vue 會被註冊爲一個全局變量。webpack

2：CDN連接到一個你能夠手動更新的指定版本號web

　　<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
express

　　你能夠在 cdn.jsdelivr.net/npm/vue 瀏覽 NPM 包的源代碼。npm

3：在用 Vue 構建大型應用時推薦使用 NPM 安裝。NPM 能很好地和諸如webpack或browserify模塊打包器配合使用。數組

  $ npm install vue

4：使用官方提供的CLI工具，爲單頁面應用 (SPA) 快速搭建繁雜的腳手架app

　　npm install -g @vue/cli

三：MVVM模式

四：建立一個Vue實例

1：每一個 Vue 應用都是經過用 Vue 函數建立一個新的 Vue 實例開始的，當一個 Vue 實例被建立時，它向 Vue 的響應式系統中加入了其 data 對象中能找到的全部的屬性。當這些屬性的值發生改變時，視圖將會產生「響應」，即匹配更新爲新的值。

:2：除了數據屬性，Vue 實例還暴露了一些有用的實例屬性與方法。它們都有前綴 $，以便與用戶定義的屬性區分開來，例如：

vm.$data === data // => true
vm.$el === document.getElementById('example') // => true

五：v-text和v-html

1：數據綁定最多見的形式就是使用「Mustache」語法 (雙大括號) 的文本插值；Mustache 標籤將會被替代爲對應數據對象上 msg 屬性的值。不管什麼時候，綁定的數據對象上 msg 屬性發生了改變，插值處的內容都會更新。

2：v-text更新元素的 textContent。若是要更新部分的 textContent ，請使用 {{ Mustache }} 插值。

3：雙大括號會將數據解釋爲普通文本，而非 HTML 代碼。爲了輸出真正的 HTML，你須要使用 v-html 指令，你的站點上動態渲染的任意 HTML 可能會很是危險，由於它很容易致使 XSS攻擊。請只對可信內容使用 HTML 插值，毫不要對用戶提供的內容使用插值。

4：經過使用v-once指令，你也能執行一次性地插值，當數據改變時，插值處的內容不會更新。但請留心這會影響到該節點上的其它數據綁定；

<span v-once>這個將不會改變: {{ msg }}</span>

六：v-bind綁定屬性和v-on綁定事件

1：v-bind 指令能夠用於接收一個「參數」，在指令名稱以後以冒號表示，響應式地更新 HTML 特性，能夠寫js表達式。

2：v-on 指令，它用於監聽 DOM 事件

七：小練習—跑馬燈

實現前一個字走到頭後跳轉到最後一個字後面接着向左走，運用了事件綁定，數據獲取和更改

八：事件修飾符

修飾符 (Modifiers) 是以半角句號 . 指明的特殊後綴，用於指出一個指令應該以特殊方式綁定。例如，.prevent 修飾符告訴 v-on 指令對於觸發的事件調用 event.preventDefault()。

提示：

事件冒泡，即事件開始時由最具體的元素接收，而後逐級向上傳播到較爲不具體的節點

事件捕獲：思想是不太具體的DOM節點應該更早接收到事件，而最具體的節點應該最後接收到事件

九：v-model雙向數據綁定

原理是：

自從html5開始input每次輸入都會觸發oninput事件，因此輸入時input的內容會綁定到sth中，因而sth的值就被改變

<input v-model="message" placeholder="edit me"> 文本框

<textarea v-model="message" placeholder="add multiple lines"></textarea> 多行文本

<input type="checkbox" id="checkbox" v-model="checked"> 複選框

<input type="radio" id="one" value="One" v-model="picked"> 單選框

<select v-model="selected"> 
 <option disabled value="">請選擇</option> 選擇框
 <option>A</option>
</select>

十：類class和樣式style使用

1：咱們能夠把一個數組傳給 v-bind:class，以應用一個 class 列表

2：能夠傳給 v-bind:class 一個對象，以動態地切換 class

十一：for循環和key屬性

1：咱們用 v-for 指令根據一組數組的選項列表進行渲染。v-for 指令須要使用 item in items 形式的特殊語法，items 是源數據數組而且 item 是數組元素迭代的別名；

2：在 v-for 塊中，咱們擁有對父做用域屬性的徹底訪問權限。v-for 還支持一個可選的第二個參數爲當前項的索引；

3：你也能夠用 of 替代 in 做爲分隔符，由於它是最接近 JavaScript 迭代器的語法；

4：能夠用 v-for 經過一個對象的屬性來迭代，注意，第一個參數是指值，第二個參數是鍵值，第三個是索引；

5：當 Vue.js 用 v-for 正在更新已渲染過的元素列表時，它默認用「就地複用」策略。若是數據項的順序被改變，Vue 將不會移動 DOM 元素來匹配數據項的順序，而是簡單複用此處每一個元素，而且確保它在特定索引下顯示已被渲染過的每一個元素。爲了給 Vue 一個提示，以便它能跟蹤每一個節點的身份，從而重用和從新排序現有元素，你須要爲每項提供一個惟一 key 屬性

6：vue中數組數據操做注意事項

支持方法：push() pop() shift() unshift() reverse() sort() aplice() filter() concat() slice()

特別注意：vue數組不支持以下操做：

當你利用索引直接設置一個項時，例如：vm.items[indexOfItem] = newValue
當你修改數組的長度時，例如：vm.items.length = newLength

解決辦法：

　　 1：Vue.set(vm.items, indexOfItem, newValue) （數組，索引，新值）　　　

　　 vm.items.splice(indexOfItem, 1, newValue) （從第幾位截取那一個元素替換新值）

　　 2： vm.items.splice(newLength)

7：vue中對象操做注意事項

特別注意：vue數組不支持以下操做：

　　 1：直接添加對象元素 vm.name='tom'

　　 2：合併兩個對象 Object.assign(vm.userProfile, {age: 27, favoriteColor: 'Vue Green'})

解決辦法：

　　 1：Vue.set(vm.userProfile, 'age', 27) （對象，鍵值，值）

　　 2：vm.userProfile = Object.assign({}, vm.userProfile, {age: 27,favoriteColor: 'Vue Green'}) （返回一個新對象=（空對象，對象1，對象2））

8：相似於 v-if，你也能夠利用帶有 v-for 的 <template> 渲染多個元素

9：v-for 的優先級比 v-if 更高，這意味着 v-if 將分別重複運行於每一個 v-for 循環中。當你想爲僅有的一些項渲染節點時，這種優先級的機制會十分有用。而若是你的目的是有條件地跳過循環的執行，那麼能夠將 v-if 置於外層元素 (或 <template>)上

十二：v-if和v-show

注意：

1：<template> 元素能夠當作不可見的包裹元素在上面使用v-if，而v-show不可用；

2：相似於 v-else，v-else-if 也必須緊跟在帶 v-if 或者 v-else-if 的元素以後；

3：若是你容許用戶在不一樣的登陸方式之間切換：　

<template v-if="loginType === 'username'">
 <label>Username</label>
 <input placeholder="Enter your username">
</template>
<template v-else>
 <label>Email</label>
 <input placeholder="Enter your email address">
</template>
問題：那麼在上面的代碼中切換  將不會清除用戶已經輸入的內容。由於兩個模板使用了相同的元素， 不會被替換掉——僅僅是替換了它的 。
解決：給input加key屬性肯定惟一性loginType<input>placeholder

十三：過濾器

1：Vue.js 容許你自定義過濾器，可被用於一些常見的文本格式化。過濾器能夠用在兩個地方：雙花括號插值和 v-bind 表達式 (後者從 2.1.0+ 開始支持)。過濾器應該被添加在 JavaScript 表達式的尾部，由「管道」符號指示:

2：過濾器能夠串聯：{{ message | filterA | filterB }}

filterA 被定義爲接收單個參數的過濾器函數，表達式 message 的值將做爲參數傳入到函數中。而後繼續調用一樣被定義爲接收單個參數的過濾器函數 filterB，將 filterA 的結果傳遞到 filterB 中；

3：過濾器是 JavaScript 函數，所以能夠接收參數：{{ message | filterA('arg1', arg2) }}

filterA 被定義爲接收三個參數的過濾器函數。其中 message 的值做爲第一個參數，普通字符串 'arg1' 做爲第二個參數，表達式 arg2 的值做爲第三個參數。

十四：字符串模擬數據增刪查思想

十五：鍵盤修飾符

所有的按鍵別名：.enter .tab .delete .esc .space .up .down .left .right

新增：ctrl .alt .shif .meta

十六：自定義指令

一個指令定義對象能夠提供以下幾個鉤子函數 (均爲可選)：

bind：只調用一次，指令第一次綁定到元素時調用。在這裏能夠進行一次性的初始化設置。
inserted：被綁定元素插入父節點時調用 (僅保證父節點存在，但不必定已被插入文檔中)。
update：所在組件的 VNode 更新時調用，可是可能發生在其子 VNode 更新以前。指令的值可能發生了改變，也可能沒有。可是你能夠經過比較更新先後的值來忽略沒必要要的模板更新。
componentUpdated：指令所在組件的 VNode 及其子 VNode 所有更新後調用。
unbind：只調用一次，指令與元素解綁時調用。

指令鉤子函數會被傳入如下參數：

el：指令所綁定的元素，能夠用來直接操做 DOM 。
binding：一個對象，包含如下屬性：
- name：指令名，不包括 v- 前綴。
- value：指令的綁定值，例如：v-my-directive="1 + 1" 中，綁定值爲 2。
- oldValue：指令綁定的前一個值，僅在 update 和 componentUpdated 鉤子中可用。不管值是否改變均可用。
- expression：字符串形式的指令表達式。例如 v-my-directive="1 + 1"中，表達式爲 "1 + 1"。
- arg：傳給指令的參數，可選。例如 v-my-directive:foo 中，參數爲 "foo"。
- modifiers：一個包含修飾符的對象。例如：v-my-directive.foo.bar 中，修飾符對象爲 { foo: true, bar: true }。
vnode：Vue 編譯生成的虛擬節點。
oldVnode：上一個虛擬節點，僅在 update 和 componentUpdated 鉤子中可用。