vue知識點歸納與總結 筆記

2022-08-20 02:06:17 字數 1101 閱讀 3396

前言

當前總結是本人在業餘學習與實踐過程後的總結與歸納,旨在檢驗自己的積累,也方便忘記時查閱,同時也希望能幫助那些這方面知識匱乏的同行門,總結是基於vue2.x,vue-cli3.x,主要記錄些,vue常用的指令、事件,監聽、資料繫結、過濾器、元件、動畫、vuex,vue-router等日常工作中時常用到的東西,也有些常用的外掛程式和開發工具的介紹與使用,以及部分效能優化的建議與實踐,如有不對,或不足的地方,也請各位大神,指出來,學習學習。

1.基礎

1. 理解mvvm

m 是vue例項中的data,自定義的資料或後端返回的陣列

不是後端mvc裡的model概念不同。

vm 是vue的例項 m和v之間的排程者 是mvvm的核心思想

v是 html 要渲染的。

2. 常用指令

v-cloak 解決}插值閃爍問題

v-text 會先執行 覆蓋 元素中原本的內容 但是插值表示式只會覆蓋自己的佔位符,預設不會閃爍

v-html 渲染 html標籤 覆蓋元素中原有元素內容

v-bind: 簡寫為: 用來繫結資料 可以寫合法的js表示式

v-on: 簡寫為 @ 用來點選事件

3.常用事件修飾符

stop 阻止冒泡 :外層和裡層都有方法 點選裡層會產生冒泡,也會觸發外層的事件。

順序 從裡到外產生事件

prevent 阻止瀏覽器預設行為 :

a標籤有瀏覽器預設行為。

capture 捕獲事件 :點選裡層先觸發外層再觸發裡層 順序從外到裡產生事件

self 只觸發自己本身的事件 不會產生冒泡和捕獲事件 類似於阻止冒泡 但只針對自己那一層 最外層還是會被最裡層冒泡冒到 stop 是阻止所有層次

once 事件只執行一次

4.資料的繫結

v-bind: 資料的單向繫結

v-modle :資料的雙向繫結 這個只能用於表單元素中

tips: 表單元素 radio text address email select checkbox textarea

5.class 繫結

1.陣列帶物件

data()

} tips:可以在類中的陣列中寫三元表示式,但推薦使用物件來代替它控制是否渲染

Vue 知識點總結

1.mvvm?對比mvc mvvm model view viewmodel model 資料模型,可以定義資料修改和操作的業務邏輯 view ui元件,將資料元件轉換成ui展示 viewmodel 同步view和model的物件 view和model沒有直接的聯絡,通過viewmodel進行互動,...

Vue知識點總結

框架與庫的區別 jquery庫 dom操作 http請求 全家桶 如何起步 插值表示式 常用指令 全域性元件 場景 公共性功能元件,減少冗餘 全域性api vue.component 元件名 元件物件 過濾器 給資料的顯示進行操作,如反轉,改變屬性等 filter 全域性過濾器,vue.filter...

Vue知識點總結

近期幾天學習了vue,所以在這裡把零碎的知識點稍微總結一下 一.vue開發步驟 1.匯入vue.js檔案 2.編寫html 3.建立vue示例,傳入乙個json物件.二.vuejs特點 angular特點 基於mvvm,資料繫結,依賴注入 三.此json物件的屬性 el 選擇器 表示vue的控制範圍...