在Vue中,使用事件綁定機制,為元素指定處理函數的時候,如果加了小括號,說明可以傳參.
常用方法介紹:
some(callback[, thisObject]) 只要數組中有一項在callback上被返回true，就返回true。
在數組的some方法中,如果return ture,就會立即終止這個數組的后續(xù)循環(huán).
findIndex(callback), 查找目標元素燕垃，只要在數組中找到滿足的記錄,就會return true,findIndex方法會返回當前這個索引.
注意: forEach some filter findIndex 都是屬于數組的新方法,都會對數組執(zhí)行遍歷,并執(zhí)行相應的操作.
在ES6中,提供字符串新方法,String.prototype.includes("要包含的字符串"),如果包含,則返回true,否則返回false.
過濾器:
可以被用作一些常見文本格式化,過濾器可以用在兩個地方,mustache插值和v-bind表達式,過濾器應該被添加在JavaScript表達式的尾部,由"管道符"標識.
全局過濾器:
過濾器中的function,第一個參數,默認是 過濾器 管道符 前端傳遞過來的數據
過濾器中返回的數據,會返回到插值表達式的位置,然后渲染展示給用戶.
私有過濾器:
和全局過濾器區(qū)別:
所謂全局過濾器,就是所有的VM實例都共享的.
定義位置:
過濾器調用的時候,采用的是就近原則,如果私有過濾器和全局過濾器名稱一致,會優(yōu)先使用私有過濾器.
按鍵修飾符:
內置的按鍵修飾符:
.enter
.tab
.delete(捕獲"刪除"和"退格"鍵)
.esc
.space
.up
.down
.left
.right
自定義按鍵修飾符:
可以通過鍵碼來進行事件修飾.
也可以通過自定義全局按鍵修飾符
自定義全局指令:
注意:Vue中所有的指令,在調用的時候,都會以 v- 開頭
使用Vue.directive() 定義全局的指令,v-focus
其中: 參數1 指令的名稱, 注意 在定義的時候,指令的名稱前面, 不需要加 v- 前綴. 但是 在調用的時候, 必須在指令名稱前 加上 v- 前綴來進行調用.
參數2: 是一個對象,這個對象身上,有一些指令相關的函數,這些函數可以在特點的階段,執(zhí)行相關的操作.
bind: 每當指令綁定到元素上的時候,會立即執(zhí)行這個bind函數,只執(zhí)行一次.
inserted: inserted 表示元素 插入到DOM中的時候,會執(zhí)行inserted函數[觸發(fā)一次].
updated: 當VNode更新的時候,回執(zhí)行updated,可能會觸發(fā)多次.
在每個函數中,第一個參數,永遠是 el ,表示綁定了指令的那個元素,這個 el 參數,是一個原生的JS對象(也就是一個DOM對象,可以直接操作DOM對象的方法).
注意: 在元素 剛綁定了指令的時候,還沒有插入到DOM中去,這時候調用 focus方法沒有作用,因為 一個元素,只有插入到DOM之后,才能獲取焦點.(上述方法不會產生獲取焦點效果)
調用時機的區(qū)別:
bind調用時機:是元素加載到內存之后,只要一綁定focus這個指令,就會立即在內存中調用bind對應的操作.此時執(zhí)行相應的動作,但只是在內存中,樣式, 只要通過指令綁定給了元素,不管這個元素有沒有被插入到頁面中去,這個元素肯定有了一個內聯(lián)樣式.將來元素肯定會顯示到頁面中,這時候,瀏覽器的渲染引擎必然會解析樣式,應用給這個元素.
inserted調用時機:是元素從內存渲染到頁面的過程,就是inserted,這時說明該元素已經在本頁面的DOM樹中存在了,可以執(zhí)行相應的動作,并且會顯示出來.
與樣式相關的操作,一般都可以在bind中執(zhí)行
與JS行為相關的操作,最好在inserted中去執(zhí)行,防止JS行為不生效.
鉤子函數參數:
el:指令所綁定的元素,可以用來直接操作DOM
binding:一個對象,常用屬性:
name: 指令名,不包括 v- 前綴.
value: 指令的綁定值,如果是表達式,那么會返回計算后的值.
expression: 綁定值的字符串形式,如果是表達式,那么也會原樣返回.
自定義私有指令:
函數簡寫:
大多數情況下,我們可能只想在bind和update鉤子上做重復動作,并且不想關心其他的鉤子函數(他會把代碼寫到了bind 和 update 中去)
Vue實例的生命周期:
從Vue實例創(chuàng)建、運行净捅、到銷毀期間，總是伴隨著各種各樣的事件辩块，這些事件蛔六，統(tǒng)稱為生命周期。
生命周期鉤子 = 生命周期函數 = 生命周期事件
狀態(tài)：
Init Events&Lifecycle：
表示剛初始化了一個Vue空的實例對象庆捺，這時候古今，這個對象身上屁魏，只有默認的一些生命周期函數和默認的事件滔以，其余的東西未創(chuàng)建。
Init Injections&reactivity
表示開始加載data和methods中的數據
這里表示Vue開始編譯模板氓拼，把Vue代碼中的那些指令進行執(zhí)行你画，最終，在內存中生成一個編譯好的最終模板字符串桃漾，然后把這個模板字符串坏匪，渲染為內存中的DOM，此時撬统，只是在內存中适滓，渲染好了模板，并沒有把模板掛載到真正的頁面中去恋追。
Create vm.$el and replace 'el' with it:
這一步將內存中編譯好的模板,真實的替換到瀏覽器的頁面中去.
這是組件運行期間的生命周期函數,當data改變時觸發(fā)
Virtual DOM re-render and patch:
這一步執(zhí)行的是,先根據data中最新的數據,在內存中重新渲染出一份最新的 內存DOM樹,
當最新的內存DOM樹 被更新后,會把最新的內存DOM樹,重新渲染到真實的頁面中去,這時候就完成了數據 從data(Model層)-->view(視圖層)的更新.
分類：
創(chuàng)建期間的生命周期函數：
beforeCreate：表示實例完全被創(chuàng)建出來之前凭迹，會執(zhí)行它
注意：在beforeCreate 生命周期函數執(zhí)行的時候罚屋，data和methods中的數據都還沒有被初始化。
created：在created中嗅绸，data和methods都已經被初始化好了脾猛，如果要操作data或methods中的數據，最早只能在created中進行鱼鸠。
beforeMount:表示模板已經在內存中編譯完成了,但是尚未把模板渲染到頁面中
在beforeMount 執(zhí)行的時候,頁面中的元素 還沒有被真正的替換過來,只是之前寫的一些模板字符串.
mounted:實例創(chuàng)建期間的最后一個生命周期函數,當執(zhí)行完mounted就表示,實例已經被完全創(chuàng)建好了.
運行期間的生命周期函數:
beforeUpdate:表示data數據被更新了,但是頁面還沒有被更新,頁面尚未和最新的數據保持同步.
updated:表示頁面和data數據已經保持同步了,都是最新的.
銷毀期間的生命周期函數:
beforeDestroy: 當執(zhí)行 beforeDestroy鉤子函數的時候,Vue實例就已經從運行階段,進入到了銷毀階段.
當執(zhí)行beforeDestroy 的時候,實例身上所有的data和所有的methods,以及過濾器猛拴、指令...都是可用狀態(tài),此時,還沒有真正執(zhí)行銷毀的過程.
destroyed:定執(zhí)行到destroyed函數的時候,組件已經被完全銷毀了,筆試,組件中的所有數據、方法蚀狰、指令愉昆、過濾器...都已經不可用了.
Vue中實現發(fā)送ajax請求:
使用vue-resource 他給Vue實例掛載了一個屬性(this.$http.get())
注意:vue-resource依賴vue,導包要注意先后順序.
當發(fā)起get請求之后,通過 .then 來設置成功的回調函數.
手動發(fā)起的POST提交沒有表單格式(application/x-www-form-urlencoded),所以 有的服務器處理不了.
解決方法:設置提交的參數 { emulateJSON: true },他會將請求頭設置為表單格式.
JSONP實現原理:
由于瀏覽器存在安全限制,不允許ajax進行跨域請求,(協(xié)議不同,域名不同,端口號不同)的數據接口,瀏覽器認為這種訪問不安全.
可以通過動態(tài)創(chuàng)建script標簽的形式,把script標簽的src屬性,指向數據接口的地址,因為script標簽不存在跨域限制,這種數據獲取方式,叫做JSONP(注意:根據JSONP實現原理,知道只支持GET請求)
具體實現過程:
先在客戶端定義一個回調方法,預定義對數據的操作.
再把這個回調方法的名稱,通過url傳參的形式,提交到服務器的數據接口.
服務器數據接口組織好要發(fā)送給客戶端的數據,再拿著客戶端傳遞過來的回調方法名稱,拼接出一個調用這個方法的字符串,發(fā)送給客戶端去解析執(zhí)行.
客戶端拿到服務器返回的字符串之后,當做script腳本去解析執(zhí)行,這樣就能夠拿到JSONP的數據了.
