史上最全Vue基礎

vue基礎

Vue基本簡介
Vue進階

---

(1).歷史介紹

• angular 09年，年份較早，一開始大家是拒絕
• react 2013年, 用戶體驗好，直接拉到一堆粉絲
• vue 2014年, 用戶體驗好

(2).前端框架與庫的區別?

• jquery 庫 -> DOM(操作DOM) + 請求

• art-template 庫 -> 模板引擎

• 框架 = 全方位功能齊全

  • 簡易的DOM體驗 + 發請求 + 模板引擎 + 路由功能

• KFC的世界裏,庫就是一個小套餐, 框架就是全家桶

• 代碼上的不同

  • 一般使用庫的代碼，是調用某個函數，我們自己把控庫的代碼
  • 一般使用框架，其框架在幫我們運行我們編寫好的代碼
    • 框架: 初始化自身的一些行爲
      • 執行你所編寫的代碼
      • 釋放一些資源

(3).vue起步

• 1:引包

• 2:啓動 new Vue({el:目的地,template:模板內容});

• options

  • 目的地 el

  • 內容 template

  • 數據 data 保存數據屬性

    數據驅動視圖

vue的文件介紹

(4).插值表達式

• {{ 表達式 }}

  • 對象 (不要連續3個{{ {name:‘jack’} }})
  • 字符串 {{ ‘xxx’ }}
  • 判斷後的布爾值 {{ true }}
  • 三元表達式 {{ true?‘是正確’:‘錯誤’ }}

• 可以用於頁面中簡單粗暴的調試

• 注意: 必須在data這個函數中返回的對象中聲明

(5).什麼是指令

• 在vue中提供了一些對於頁面 + 數據的更爲方便的輸出,這些操作就叫做指令, 以v-xxx表示

  • 比如html頁面中的屬性 <div v-xxx ></div>

• 比如在angular中 以ng-xxx開頭的就叫做指令

• 在vue中 以v-xxx開頭的就叫做指令

• 指令中封裝了一些DOM行爲, 結合屬性作爲一個暗號, 暗號有對應的值,根據不同的值，框架會進行相關DOM操作的綁定

(6).vue中常用的v-指令演示

• v-text:元素的InnerText屬性,必須是雙標籤 跟{{ }}效果是一樣的 使用較少
• v-html: 元素的innerHTML
• v-if : 判斷是否插入這個元素,相當於對元素的銷燬和創建
• v-else-if
• v-else
• v-show 隱藏元素 如果確定要隱藏, 會給元素的style加上display:none。是基於css樣式的切換

 v-text 只能用在雙標籤中
 v-text 其實就是給元素的innerText賦值
 v-html 其實就是給元素的innerHTML賦值
 v-if 如果值爲false,會留下一個<!---->作爲標記，萬一未來v-if的值是true了，就在這裏插入元素
 如果有if和else就不需要單獨留坑了
 如果全用上  v-if 相鄰v-else-if 相鄰 v-else 否則 v-else-if可以不用
 v-if和v-else-if都有等於對應的值，而v-else直接寫
 v-if家族都是對元素進行插入和移除的操作
 v-show是顯示與否的問題
 注意: 指令其實就是利用屬性作爲標識符,簡化DOM操作,
  看：v-model="xxx"
  v-model 代表要做什麼  xxx代表針對的js內存對象
  寫在那個元素上，就對哪個元素操作

(7).v-if和v-show的區別 (官網解釋)

v-if 是“真正”的條件渲染，因爲它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷燬和重建。

v-if 也是惰性的：如果在初始渲染時條件爲假，則什麼也不做——直到條件第一次變爲真時，纔會開始渲染條件塊。

相比之下，v-show 就簡單得多——不管初始條件是什麼，元素總是會被渲染，並且只是簡單地基於 CSS 進行切換。

一般來說，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運行時條件很少改變，則使用 v-if 較好。

(8).v-bind使用

• 給元素的屬性賦值

  • 可以給已經存在的屬性賦值 input value
  • 也可以給自定義屬性賦值 mydata

• 語法 在元素上 v-bind:屬性名="常量||變量名"

• 簡寫形式 :屬性名="變量名"

• <div v-bind:原屬性名="變量"></div>
  <div :屬性名="變量">
      
  </div>
  

(9).v-on的使用

• 處理自定義原生事件的,給按鈕添加click並讓使用變量的樣式改變
• 普通使用 v-on:事件名="表達式||函數名"
• 簡寫方式 @事件名="表達式"

1-9知識點階段總結

• 如何啓動vue : 1:引包 2:留坑 3:啓動(new Vue)
  • options: el/template/data函數
• 更便捷的操作DOM及數據 v-xxx指令
  • v-text/v-html/v-if/v-show/v-bind/v-on
  • v-bind綁定屬性值
  • v-on綁定事件

(10).v-model

• 雙向數據流（綁定）
  • 頁面改變影響內存(js)
  • 內存(js)改變影響頁面

(11).v-bind 和 v-model 的區別?

• input v-model="name"
  • 雙向數據綁定 頁面對於input的value改變，能影響內存中name變量
  • 內存js改變name的值，會影響頁面重新渲染最新值
• input :value="name"
  • 單向數據綁定 內存改變影響頁面改變
• v-model: 改變影響其他 v-bind: 改變不影響其他
• v-bind就是對屬性的簡單賦值,當內存中值改變，還是會觸發重新渲染

(12).v-for的使用

• 基本語法 v-for="item in arr"
• 對象的操作 v-for="item in obj"
• 如果是數組沒有id
  • v-for="(item,index) in arr" :class="index"
• 各中v-for的屬性順序(瞭解)
  • 數組 item,index
  • 對象 value,key,index

關於對象內的this

• vue已經把以前this是window或者事件對象的問題搞定了
• methods和data本身是在同一個對象中的,所以在該對象中可以通過this.隨意取
• this.xxx 取data中的值, this.xxxMethod調methods中的函數

(13).局部組件的使用

渲染組件-父使用子組件

• 1: 創建子組件(對象)
  • var Header = { template:'模板' , data是一個函數,methods:功能,components:子組件們 }
• 2: 在父組件中聲明,根屬性components:{ 組件名:組件對象 }
• 3: 在父組件要用的地方使用 <組件名></組件名>
  • 在不同框架中,有的不支持大寫字母，用的時候
    • 組件名 MyHeader
    • 使用 my-header
• 總結: 有父，聲子，掛子，用子

（14）組件深入

---

父子組件傳值(父傳子)

• 1:父用子的時候通過屬性Prop傳遞
• 2:子要聲明props:[‘屬性名’] 來接收
• 3:收到就是自己的了，隨便你用
  • 在template中 直接用
  • 在js中 this.屬性名 用
• 總結:父傳,子聲明,就是子的了
• 小補充: 常量傳遞直接用，變量傳遞加冒號

總結父傳子

• 父用子 先聲子,掛子,用子
• 父傳子 父傳子(屬性),子聲明(收),子直接用(就是自己的一樣)

子傳父

• 1.子要綁定原生事件，在原生事件函數中通過this.$emit(‘自定義的事件名’,arg1);觸發父組件中子組件自定義的事件名
• 2.父組件中的子組件v-bind:自定義事件的名字 = 'fn'綁定自定義的事件
• 3.父組件 就可以觸發fn的函數 數據就可以從子組件中傳過來了

註冊全局組件

• 應用場景: 多出使用的公共性功能組件，就可以註冊成全局組件,減少冗餘代碼
• 全局API Vue.component('組件名',組件對象);

附加功能:過濾器&監視改動

• filters

  • 將數據進行添油加醋的操作

  • 過濾器分爲兩種

    • 1:組件內的過濾器(組件內有效)

    • 2:全局過濾器(所有組件共享)

      局部過濾器的使用

      • 先註冊,後使用
      • 組件內 filters:{ 過濾器名:過濾器fn } 最終fn內通過return產出最終的數據
      • 使用方式是 {{ 原有數據 | 過濾器名 }}
      • 需求：
        • 頁面input框輸入錢數, 另一邊顯示其前面都加上¥
      • 過濾器fn:
        • 聲明function(data,argv1,argv2...){}
        • 使用{{ 數據 | 過濾器名(參數1,參數2) }}

    全局過濾器的使用

    語法：Vue.component('過濾器的名字',fn)

    調用：跟局部組件調用方式一樣

• watch 監視單個屬性

  watch:{
  
  	//監視複雜類型,無法監視的原因是因爲監視的是對象的地址 
  	// obj:function(newV,oldV) {
  	// 	console.log(newV,oldV);
  	// },
  	// key是屬於data屬性的屬性名，value是監視後的行爲 fn中的參數（新值，舊值）
  	msg:function (newV,oldV) {
  		console.log(newV,oldV);
  
  		if (newV==='alex') {
  			console.log('sb');
  		}
  	},
         // 深度監視 ：object ||array
  	stus:{
  		deep:true,//深度監視
  		handler:function (newV,oldV) {
  			console.log(newV[0].name)
  		}
  	}
  

  小結： 基本數據類型 簡單監視，複雜數據類型深度監視

• computed 同時監視多個屬性

    默認computed只有getter方法
  

生命週期

定義：

每個 Vue 實例在被創建時都要經過從創建倒掛載再到更新、卸載的一系列過程，同時在這個過程中也會運行一些叫做生命週期鉤子的函數，可以讓我們用自己註冊的js方法控制整個大局，在這些事件響應方法中的this直接指向的是vue的實例。

鉤子函數的執行時間

beforeCreate

在實例初始化之後，數據觀測(data observer) 和 event/watcher 事件配置之前被調用。

created

實例已經創建完成之後被調用。在這一步，實例已完成以下的配置：數據觀測(data observer)，屬性和方法的運算， watch/event 事件回調。然而，掛載階段還沒開始，$el 屬性目前不可見。

beforeMount

在掛載開始之前被調用：相關的 render 函數首次被調用。

mounted

el 被新創建的 vm.$el 替換，並掛載到實例上去之後調用該鉤子。

beforeUpdate

數據更新時調用，發生在虛擬 DOM 重新渲染和打補丁之前。

updated

由於數據更改導致的虛擬 DOM 重新渲染和打補丁，在這之後會調用該鉤子。

beforeDestroy

實例銷燬之前調用。在這一步，實例仍然完全可用。

destroyed

Vue 實例銷燬後調用。調用後，Vue 實例指示的所有東西都會解綁定，所有的事件監聽器會被移除，所有的子實例也會被銷燬。 該鉤子在服務器端渲染期間不被調用。

還有兩個特殊的（配合使用keep-alive）：activated、deactivated

activated

keep-alive組件被激活時調用

deactivated

keep-alive組件被停用時調用

鉤子函數中該做的事情

created

實例已經創建完成，因爲它是最早觸發的原因可以進行一些數據，資源的請求。

mounted

實例已經掛載完成，可以進行一些DOM操作

beforeUpdate

可以在這個鉤子中進一步地更改狀態，這不會觸發附加的重渲染過程。

updated

可以執行依賴於 DOM 的操作。然而在大多數情況下，你應該避免在此期間更改狀態，因爲這可能會導致更新無限循環。

該鉤子在服務器端渲染期間不被調用。

destroyed

可以執行一些優化操作

keep-alive

在使用vue-router時有時需要使用來緩存組件狀態，這個時候created鉤子就不會被重複調用了，如果我們的子組件需要在每次加載的時候進行某些操作，可以使用activated鉤子觸發。

模塊化

• webpack命令
  npm init -y
npm install [email protected] --save-dev --registry https://registry.npm.taobao.org
• package.json文件
  "scripts": { "test": "webpack ./main.js ./build.js" },
• 命令行運行 npm run test

ES6模塊

• 導入和導出只能存在頂級作用域
• require引入是代碼執行的時候才加載
• import 和export 都是提前加載 ，加載在代碼執行之前

箭頭函數和function

• 一方面箭頭函數是種簡寫形式
• 應用場景: 由於箭頭函數本身沒有this和arguments，通常用在事件類的回調函數上，讓其向上級function綁定this，而非事件對象
• 箭頭函數不可以作爲構造函數

ES6函數簡寫

• 用在對象的屬性中

fn3() { //幹掉了:function,用在對象的屬性中
				console.log(this);
},

key

• 使用子組件循環輸出一堆數據
• 不依賴子組件狀態或臨時 DOM 狀態 (例如：表單輸入值) 的列表渲染輸出。
• 建議v-for就寫，提升性能，避免vue運算,key就是記錄元素與dom間的位置關係

<son v-for="(item,index) in persons" :key="index" ></son>

slot

• slot就是子組件裏給DOM留下的坑
• <子組件>DOM</子組件>
• slot動態的DOM、props是動態的數據

組件生命週期

• 需要頻繁的創建和銷燬組件
  • 比如頁面中部分內容顯示與隱藏，但是用的是v-if
• 組件緩存
  • 內置組件中
  • 被其包裹的組件，在v-if=false的時候，不會銷燬，而是停用
  • v-if=“true” 不會創建,而是激活
  • 避免頻繁創建組件對象的性能損耗
• 成對比較
  • created 和 beforeCreate
    • A 可以操作數據 B 數據沒有初始化
  • mounted 和 beforeMount
    • A 可以操作DOM B 還未生成DOM
  • updated 和 beforeUpdate
    • A 可以獲取最終數據 B 可以二次修改
  • 頻繁銷燬創建的組件使用內置組件包裹

	activated(){  //激活的 keep-alive v-if="true"
		console.log('activated')
	},
	deactivated(){  //停用的 keep-alive v-if="false"
		console.log('deactivated')
	},
	beforeDestroy(){ //銷燬前 v-if="false"
		console.log('beforeDestroy')
	},
	destroyed(){//銷燬後 v-if="false"
		console.log('destroyed')
	},

獲取DOM元素

• 救命稻草, document.querySelector

• 1: 在template中標識元素 ref=“xxxx”

• 2: 在要獲取的時候, this.$refs.xxxx 獲取元素

  • 創建組件,裝載DOM,用戶點擊按鈕

• ref在DOM上獲取的是原生DOM對象

• ref在組件上獲取的是組件對象

  • $el 是拿其DOM
  • 這個對象就相當於我們平時玩的this,也可以直接調用函數