過濾器 boolean func spa 2.4 有一個 jar包 字符串數組 input

一、學習資料參考

1.1、Vue.js

官網：Vue.js https://cn.vuejs.org/

官方文檔：介紹 — Vue.js https://cn.vuejs.org/v2/guide/

API 參考：API — Vue.js https://cn.vuejs.org/v2/api/

附：vue.js（1.0版本） https://v1-cn.vuejs.org/ （教程和API自行尋找）

1.2、Vue Router 學習和理解：

官方文檔：介紹 | Vue Router https://router.vuejs.org/zh/

API 參考：API 參考 | Vue Router https://router.vuejs.org/zh/api/

1.3、菜鳥教程：

Vue.js 教程 | 菜鳥教程 http://www.runoob.com/vue2/vue-tutorial.html

二、主要筆記理解和整理

註：此部分僅用於自己整理理解。對其他人可能不適用。請知悉~~

使用：具體可參考菜鳥教程實例：

大致就是

• 每個 Vue 應用都需要通過實例化 Vue 來實現。當一個 Vue 實例被創建時，它向 Vue 的響應式系統中加入了其 data 對象中能找到的所有的屬性。當屬性值發生改變，html 視圖也會產生相應的變化。
  • 實例化的時候，需要綁定對應的資源（el 參數）；
  • 還有data數據：（data 用於定義屬性。{{ }} 用於輸出對象屬性和函數返回值。）
  • 以及methods方法：（ methods用於定義的函數，可以通過 return 來返回函數值。{{ }} 用於輸出對象屬性和函數返回值。）

除了數據屬性，Vue 實例還提供了一些有用的實例屬性與方法。它們都有前綴 $，以便與用戶定義的屬性區分開來。（這些就相當於Vue內置的方法了，和一些框架，jar包呀什麽的，其他什麽的區別不大）

2.1 Vue.js 模板語法

就是說：

• 如果直接以{{ }} 調用，那麽數據相當於實際是以字符串的形式展示。
  • 對於{{ }} ：裏面可直接放入js表達式，也可放入VUE中聲明的屬性和方法。如果沒有被聲明，大概會報錯
  • 對於v-的一些指令，裏面也可以直接放入表達式。同時，裏面的變量名如果已被聲明，那麽會展示對應的值；如果未被聲明，以字符串展示。
• 如果要，以html的方式展示，需使用 v-html 指令；

2.1.1 修飾符

修飾符是以半角句號.指明的特殊後綴，用於指出一個指定應該以特殊方式綁定。

例如，.prevent修飾符告訴 v-on 指令對於觸發的事件調用 event.preventDefault()：

2.2.2 指令和語句：

指令後的字符串必須是VUE中聲明的屬性或方法。

v-on 指令，它用於監聽 DOM 事件。縮寫：@

v-bind 指令被用來響應地更新 HTML 屬性。縮寫：：

v-model 指令來實現雙向數據綁定：

---

v-if 指令將根據表達式 seen 的值(true 或 false )來決定是否插入 p 元素。

v-else 指令：給 v-if 添加一個 "else" 塊；

v-else-if： 在 2.1.0 新增，顧名思義，用作 v-if 的 else-if 塊。可以鏈式的多次使用。

---

v-show：根據條件展示元素

v-for 指令：要以 (value, key, index) in sites [key和index可選]形式的特殊語法， sites 是源數據數組並且 site 是數組元素叠代的別名。（）

• 可以叠代數組
• 也可以叠代對象
• 叠代整數

2.2.3 過濾器

Vue.js 允許你自定義過濾器，被用作一些常見的文本格式化。由"管道符" |指示。

過濾器函數接受表達式的值作為第一個參數，第二個過濾器實際是自定義的方法（ JavaScript 函數），用於對第一個參數進行處理。過濾器可以有多個。

2.2 Vue.js 計算屬性

相當於可以根據要擴展get和set方法，並且性能好一點，不然你就只能取到原值了。

計算屬性關鍵詞: computed。（實際和一個method差不多，不過這個可以理解為默認是對應對象的get方法，在取值時自動調用。另外你也可以提供一個 setter方法，在賦值時自動調用。對應的實際代碼可以見：Vue.js 計算屬性 | 菜鳥教程 http://www.runoob.com/vue2/vue-computed.html ）

computed vs methods：效果一樣，但 computed 是基於它的依賴緩存，只有相關依賴發生改變時才會重新取值。而使用 methods ，在重新渲染的時候，函數總會重新調用執行。

2.3 Vue.js 監聽屬性

Vue.js 監聽屬性 watch，可以通過 watch 來響應數據的變化

總結：

對於vue的屬性，可以理解為是Vue封裝的一些最佳實踐，通過這些屬性，你可以簡單方便，高性能的實現想要的功能。大致就是這樣

2.4 Vue.js 樣式綁定優化：v-bind

2.4.1 v-bind 處理 class 和 style

v-bind 在處理 class 和 style 時， 專門增強了它。表達式的結果類型除了字符串之外，還可以是對象或數組。

• 直接綁定字符串（有簡單的true和false的功能）；
• 直接綁定對象（對象裏和實際的字符串沒區別，只是把字符串直接寫出來還是放在對象裏...）還可以結合對象的計算屬性實現更強大的功能具體參考教程
• 直接綁定數組：其實數組裏還是一個一個對象...（不過一個數組中可包含多個對象，防止一個對象過大，同時對象也可以互相組合，更加簡單）

2.4.2 Vue.js style(內聯樣式)

在 v-bind:style 裏直接設置樣式

內聯樣式的實現和樣式差不多，可以使用：字符串，對象，或者數組（一個數組裏可以包含多個對象）。

2.5 Vue.js 事件處理器： v-on

2.5.1 v-on 指令

事件監聽可以使用 v-on 指令：

on後面可以跟：

• js表達式
• 一個定義的method
• 也可以用內聯 JavaScript 語句（是給方法傳參的意思麽）

2.5.2 事件修飾符

v-on 提供了事件修飾符來處理 DOM 事件細節（修飾符可以串聯）

• .stop
• .prevent
• .capture
• .self
• .once

不過修飾符的作用是什麽？需看下官方文檔。

2.5.3 按鍵修飾符

具體見文檔吧..畢竟很多

2.6 Vue.js 表單

2.6.1 表單控件：見原文。

v-model 指令在表單控件元素上創建雙向數據綁定。

v-model 會根據控件類型自動選取正確的方法來更新元素。

意思即使：表單通過v-model 綁定了一個VUE裏面的數據，如果表單上的數據變了，VUE裏面的數據同步改變。而vue裏面數據的改變，會導致html頁面立即刷新的感覺麽。如果多個表單使用v-model綁定同一個VUE裏面的數據，那麽任何一個改變，其他所有都會同步改變。好神奇呀。

不過v-model 綁定的對應事件，好像是對應的表單已經定義好的選中事件，並不是自己可以隨便定義的那些。

2.6.2 修飾符

• .lazy：在默認情況下， v-model 在 input 事件中同步輸入框的值與數據，但你可以添加一個修飾符 lazy ，從而轉變為在 change 事件中同步：
• .number：如果想自動將用戶的輸入值轉為 Number 類型（如果原值的轉換結果為 NaN 則返回原值），可以添加一個修飾符 number 給 v-model 來處理輸入值
• .trim：如果要自動過濾用戶輸入的首尾空格，可以添加 trim 修飾符到 v-model 上過濾輸入

2.7 Vue.js 組件

組件可以擴展 HTML 元素，封裝可重用的代碼。

2.7.1 基本使用：

註冊一個全局組件語法格式如下：

Vue.component(tagName, options)

tagName 為組件名，options 為配置選項。註冊後，我們可以使用以下方式來調用組件：

<tagName></tagName>

組件的template屬性是組件的內容。組件是可以復用代碼的意思。

2.7.2 全局組件

所有地方都可以用。

2.7.3 局部組件

需在一個Vue對象裏聲明，則只會在Vue對象綁定的html元素裏使用

// 創建根實例
new Vue({
  el: ‘#app‘,
  components: {
    // <runoob> 將只在父模板可用
    ‘runoob‘: Child
  }
})

2.7.4 Prop

prop 是父組件用來傳遞數據的一個自定義屬性。

父組件的數據需要通過 props 把數據傳給子組件，子組件需要顯式地用 props 選項聲明 "prop"。

意思就是：使用組件時，可以傳入一個參數，或者賦值給對象等。然後在組件的template內，使用傳入的數據（不過使用前需要先用prop屬性獲取對應的數據）。大概是這個意思。

2.7.5 動態 Prop

（prop 單向綁定：父組件屬性變化將傳導給子組件，但不會反過來。）

類似於用 v-bind 綁定 HTML 特性到一個表達式，也可以用 v-bind 動態綁定 props 的值到父組件的數據中。每當父組件的數據變化時，該變化也會傳導給子組件。

大概就是：在組件中可以使用 v-bind指令來傳入對應的值，如果 v-bind 指令綁定的對象值發生了改變，那麽對應的組件裏的值也會發生改變

2.7.6 Prop 驗證

組件可以為 props 指定驗證要求。

當 prop 是一個對象而不是字符串數組時，它包含驗證要求。

即：當prop是字符串數組，他就是簡單的獲取值的意思。如果prop 是一個對象，那麽對於獲取到的值，自動包含驗證功能，實現可以參考：{prop:{ }}。裏面的中括號可以包含驗證（即驗證方法）的基本要求。比如數據類型驗證，是否必須，默認值，以及方法實現等，還可以有。

type 可以是下面原生構造器

• String
• Number
• Boolean
• Function
• Object
• Array

type 也可以是一個自定義構造器，使用 instanceof 檢測。

2.7.7 自定義事件

父組件是使用 props 傳遞數據給子組件，但如果子組件要把數據傳遞回去，就需要使用自定義事件！

我們可以使用 v-on 綁定自定義事件, 每個 Vue 實例都實現了事件接口(Events interface)，即：

• 使用 $on(eventName) 監聽事件
• 使用 $emit(eventName) 觸發事件

另外，父組件可以在使用子組件的地方直接用 v-on 來監聽子組件觸發的事件。

大概的意思就是：在父組件上用 v-on 綁定一個自定義事件，事件有自己的執行方法邏輯。當子組件改變時，可以在自己的方法裏，手動調用$emit(eventName)來觸發事件，調用父組件對應的方法邏輯，實現功能。

為什麽要叫自定義事件恩，因為就是單純實現這種功能而實現的一個自定義事件。

2.8 Vue.js 自定義指令

除了默認設置的核心指令( v-model 和 v-show ), Vue 也允許註冊自定義指令。

2.8.1 全局指令

Vue.directive() 方法：

2.8.2 局部指令

和局部組件很類似。在Vue實例內部註冊。使用directives屬性。

2.8.3 鉤子

2.8.3.1 鉤子函數

指令定義函數提供了幾個鉤子函數（可選）

• bind: 只調用一次，指令第一次綁定到元素時調用，用這個鉤子函數可以定義一個在綁定時執行一次的初始化動作。
• inserted: 被綁定元素插入父節點時調用（父節點存在即可調用，不必存在於 document 中）。
• update: 被綁定元素所在的模板更新時調用，而不論綁定值是否變化。通過比較更新前後的綁定值，可以忽略不必要的模板更新（詳細的鉤子函數參數見下）。
• componentUpdated: 被綁定元素所在模板完成一次更新周期時調用。
• unbind: 只調用一次， 指令與元素解綁時調用。

2.8.3.2 鉤子函數的參數（每個鉤子函數都有且自動獲取的參數）

鉤子函數的參數有：

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

註意：有時候我們不需要其他鉤子函數（即只有一個時），我們可以簡寫函數。即當鉤子函數只有一個時，可以用簡化的預發。

2.9 Vue.js 路由

Vue.js 路由允許我們通過不同的 URL 訪問不同的內容。

通過 Vue.js 可以實現多視圖的單頁Web應用（single page web application，SPA）。

vuejs/vue-router: ?? The official router for Vue.js. https://github.com/vuejs/vue-router （源碼相關的git項目）

介紹 | Vue Router https://router.vuejs.org/zh/ （中文的官方文檔奧）

2.10 Vue.js 過渡 & 動畫

2.10.1 過渡

Vue 在插入、更新或者移除 DOM 時，提供多種不同方式的應用過渡效果。

Vue 提供了內置的過渡封裝組件，該組件用於包裹要實現過渡效果的組件。

2.10.2 語法格式

<transition name = "nameoftransition">
   <div></div>
</transition>

大致理解為，使用transition標簽，用name制定前綴，然後以name開頭定義一些特定的CSS，實現過渡效果。

過渡其實就是一個淡入淡出的效果。Vue在元素顯示與隱藏的過渡中，提供了 6 個 class 來切換：

• v-enter：定義進入過渡的開始狀態。在元素被插入之前生效，在元素被插入之後的下一幀移除。
• v-enter-active：定義進入過渡生效時的狀態。在整個進入過渡的階段中應用，在元素被插入之前生效，在過渡/動畫完成之後移除。這個類可以被用來定義進入過渡的過程時間，延遲和曲線函數。
• v-enter-to: 2.1.8版及以上 定義進入過渡的結束狀態。在元素被插入之後下一幀生效 (與此同時 v-enter 被移除)，在過渡/動畫完成之後移除。
• v-leave: 定義離開過渡的開始狀態。在離開過渡被觸發時立刻生效，下一幀被移除。
• v-leave-active：定義離開過渡生效時的狀態。在整個離開過渡的階段中應用，在離開過渡被觸發時立刻生效，在過渡/動畫完成之後移除。這個類可以被用來定義離開過渡的過程時間，延遲和曲線函數。
• v-leave-to: 2.1.8版及以上 定義離開過渡的結束狀態。在離開過渡被觸發之後下一幀生效 (與此同時 v-leave 被刪除)，在過渡/動畫完成之後移除。

2.10.3 CSS 過渡

通常我們都使用 CSS 過渡來實現效果。

2.10.4 CSS 動畫

CSS 動畫用法類似 CSS 過渡，但是在動畫中 v-enter 類名在節點插入 DOM 後不會立即刪除，而是在 animationend 事件觸發時刪除。

2.10.5 自定義過渡的類名

我們可以通過以下特性來自定義過渡類名：

• enter-class
• enter-active-class
• enter-to-class (2.1.8+)
• leave-class
• leave-active-class
• leave-to-class (2.1.8+)

自定義過渡的類名優先級高於普通的類名，這樣就能很好的與第三方（如：animate.css）的動畫庫結合使用。

自定義過渡類名的語法：標準格式在前，name名在後。

2.10.6 JavaScript 鉤子

這些鉤子函數可以結合 CSS transitions/animations 使用，也可以單獨使用。

當只用 JavaScript 過渡的時候，在 enter 和 leave 中必須使用 done 進行回調。否則，它們將被同步調用，過渡會立即完成。

推薦對於僅使用 JavaScript 過渡的元素添加 v-bind:css="false"，Vue 會跳過 CSS 的檢測。這也可以避免過渡過程中 CSS 的影響。

所謂的JavaScript 鉤子是指：不使用制定的CSS格式，而是使用v-on調用函數方法，然後在JS函數方法中，通過對象給Dom賦值CSS樣式，實現過渡效果。

2.10.7 初始渲染的過渡

可以通過 appear 特性設置節點在初始渲染的過渡。和其他的enter，leave等很類似。

這裏默認和進入/離開過渡一樣，同樣也可以自定義 CSS 類名。

自定義 JavaScript 鉤子：

2.10.8 多個元素的過渡

當有相同標簽名的元素切換時，需要通過 key 特性設置唯一的值來標記以讓 Vue 區分它們，否則 Vue 為了效率只會替換相同標簽內部的內容。

三、結束

【VUE】VUE相關學習和知識備份