vue學習筆記(三)

2022-06-08 10:45:09 字數 2153 閱讀 5406

1. 按鍵修飾符

1.1 vue定義的常用按鍵名:

@keyup.enter='add'>

1.2 直接使用按鍵碼:

1.3 自定義按鍵名:

vue.config.keycodes =

2. 自定義指令

vue的內建指令有v-on、v-bind、v-for等等,vue 也允許註冊自定義指令。呼叫的時候,一定要加 ' v- ' 字首。

使用 vue.directive(para1, para2) 定義全域性指令

para1:指令名稱,定義的時候不需要加 ' v- ' 字首

para2: 乙個物件,其中支援幾個鉤子函式:

示例:

vue.directive('focus', 

})

也可以在元件內部定義私有指令:

directives: 

}}

鉤子函式的引數:

el: 指令所繫結的元素,可以用來直接操作 dom。

binding: 乙個物件,包含以下 property:

vue.directive('color', 

})

v-color="'pink'">

簡寫:如果想在bindupdate時觸發相同行為,而不關心其它的鉤子。可以這樣寫:

directives: 

},color: (el, binding)}

3. 生命週期

生命週期流程圖:

3.1 new vue() :( var vm = new vue({}) )  建立乙個vue的例項物件

3.2 init events & lifestyle:剛初始化完乙個空vue的例項物件,這時候物件身上只有預設的生命週期函式和預設的事件,其他東西都未建立

3.3 beforecreated(): 執行該函式的時候,data和methods還沒有初始化

3.4 init data & methods

3.5 created():如果想呼叫 data 或 methods 中的資料,最早只能在created中操作

3.6 執行vue**中的指令,在記憶體中編譯、渲染模板

3.7 beforemount():記憶體中已經渲染好了模板,還沒有掛載到dom上,頁面沒有重新整理資料

3.8 正在將記憶體編譯好的模板,掛載到頁面上去

3.9 mounted():記憶體中的模板,已經掛載到了頁面上。是例項建立的最後乙個生命週期函式,當執行完 mounted 就表示,例項已經完全建立好了,此時元件已經脫離了建立階段,進入了執行階段。

如果要操作 dom 中的節點,最早在 mounted() 中執行

3.10 when data changes

3.11 beforeupdate():介面沒有更新,但是資料已經更新了

3.12 先在記憶體中生成最新的dom樹,然後再渲染到真實的頁面中。model -> view 的更新

3.13 updated():此時,model 和 view 都是最新的了,beforeupdate 和 updated 這兩個事件根據資料的改變,可以觸發0次到多次。

3.14 beforedestroy():此時元件中的data、methods、指令等等都是可用的,還沒有執行銷毀操作

3.15 destroy():執行完該函式,此時元件中所有的資料、方法已經完全銷毀了

4. ajax請求

除了 js 原生的 xmlhttprequest、jquery的 $.ajax 請求外,vue可以使用 vue-resource 和 axios 處理 ajax 請求。

vue-resource是vue外掛程式。主要用於vue裡面使用。而axios是乙個http請求庫。

不論是vue還是react裡面都能使用。而且axios相容後端在node服務端也可以使用。所以目前來看axios是首選。

vue學習筆記《三》

vue 高階,1.slot 插槽 內容分發 a.單個slot b.具名slot a 模板中呼叫 a 混合父元件的內容與子元件自己的模板 內容分發 父元件模板的內容在父元件作用域內編譯,子元件模板的內容在子元件作用域內編譯 2.transition 過渡 vue 在插入,更新或者移除dom 時,提供多...

Vue學習筆記(三)

在vue.js中可以通過watch來監聽資料的變化,比如通過watch實現的簡單計數器 點我增加 var vm new vue vm.watch count function newvalue,oldvalue 效果如下 watch有兩個引數,乙個是要監聽的變數,另乙個是 函式,函式接受兩個引數,第...

vue基礎學習筆記(三)

6.監視 watch computed 7.專案相關 引入物件 import vuerouter from vue router 安裝外掛程式 vue.use vuerouter 掛載屬性的行為 建立路由物件 let router newvuerouter 將路由物件放入到options中new v...