vue基礎知識總結

?指令

-?v-model??數據雙向綁定

-?v-for?????循環渲染

-?v-if??????渲染與銷毀

-?v-show????顯示與隱藏

-?v-bind????綁定屬性

-?v-on??????綁定事件

-?v-once?????讓渲染的值執行一次

-?v-html??????渲染dom片段

-?v-text??????渲染文本

-?v-slot?????插槽

?屬性

-?props:原生的標簽上分為自有屬性和自定義屬性。自定義組件上的屬性使用props接收，屬于父傳子的數據傳遞方式。

v-bind綁定，props接收

?事件

概念：?用戶操作程序交互頁面等一系列行為叫事件

?鼠標事件

click，dbclick，

?鍵盤事件

keyDown?，keyUp

?事件綁定

v-on綁定事件類型，給一個執行函數。

?自定義事件綁定

v-on：focus='focus'

讓程序控制自己的函數在特定情況下被使用

?修飾符

?指令修飾符

-?trim????去掉內容兩端的空格

-?number??嘗試轉換輸入內容為數字

-?lazy?讓元素失去焦點后更新數據

?屬性修飾符

-?sync?讓自定義屬性值可以被子組件直接修改

?事件修飾符

-?stop?禁止事件冒泡

-?prevent?禁止默認事件

-?native?綁定原生事件

?組件通信???`*`

?父傳子

-?父組件用v-bind傳遞數據?子組件用props接受

-?$children獲取頁面上所有子組件

-?$root?獲取根組件

-?父組件使用sync修飾符綁定的屬性，子組件用特定語法`$emit('update:prop')`

?子傳父

-?父組件用v-on傳遞函數，子組件用$emit調用函數進行通信

-?$parent獲取最近的父組件

?父子互相通信

-?sync?偽雙向綁定

-?v-model?父組件向子組件注入一個value數據和一個input方法

?內置組件?

-?component??動態加載組件

-?keep-alive????緩存組件狀態

-?slot????????插槽

-?template????模板

?插槽

-?匿名插槽

??使用slot?標簽接受即可

- 具名插槽

使用template包裹內容，使用v-slot屬性設置名稱

在slot組件上使用name屬性匹配名稱

-?插槽傳參

```js

//?插槽傳參

<slot?name='header'?:data="data"></slot>

子組件

<template?v-slot:header="data"></template>

```

?生命周期

?組件的生命周期

-?beforeCreate???創建前

-?created????????創建成功

-?beforeMount?????掛載前

-?mounted????????掛載成功（自動發起ajax）?

-?beforeUpdate??????更新前

-?updated????????????更新完成

-?beforeDestroy?????銷毀前?（銷毀常駐值）

-?destroyed?????????銷毀成功

?緩存組件狀態的生命周期

keep-alive?的生命周期

-?activated??激活

-?deactivated??停用緩存

?計算屬性和監聽

?compute

-?對一個值進行監聽并返回一個新值。有緩存回對比新舊值，如果一致則不會執行

?watch

只對值進行監聽，默認只在數據發生變化時執行

如果監聽的是對象或數組需要開啟深度監聽

deep:true?????深度監聽

immediate:true??自動執行一次

?

?自定義-過濾器-指令

?filter過濾器

分為全局組件過濾器和局部組件過濾器

對一個數據進行處理返會新數據。

語法：?值?管道符?過濾器

多個過濾器用管道符隔開

`vlaue?|?filter`

?directive指令

在某些情況下需要獲取dom元素比如在元素渲染到頁面上后獲取元素

例如??頁面打開后input自動獲取焦點

核心api：?inserted函數表示元素渲染完成后的生命周期，使用被注入的el對象進行操作。

?插件

用于更大化的重復使用代碼，將功能性的代碼封裝成插件

vue的插件核心是一個對象使用install方法，該方法被注入一個全局Vue，使用它去掛在添加公共的方法或組件

?

?

?

總結

以上是生活随笔為你收集整理的vue基础总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。