本章要給大家?guī)淼膬?nèi)容是相關(guān)Vue中的組件以及一系列常用屬性，適用人群囊括了除已有開發(fā)經(jīng)驗(yàn)人員以外的小白新手，從how、why、what三個(gè)角度來讓大家理解并使用該技術(shù)。
前端框架與庫的區(qū)別?
jquery 庫 -> DOM(操作DOM) + 請求
art-template 庫 -> 模板引擎
框架 = 全方位功能齊全
簡易的DOM體驗(yàn) + 發(fā)請求 + 模板引擎 + 路由功能
KFC的世界里,庫就是一個(gè)小套餐, 框架就是全家桶
代碼上的不同
一般使用庫的代碼，是調(diào)用某個(gè)函數(shù)，我們自己把控庫的代碼
一般使用框架，其框架在幫我們運(yùn)行我們編寫好的代碼
框架: 初始化自身的一些行為
執(zhí)行你所編寫的代碼
施放一些資源
vue起步
1:引包
2:啟動(dòng) new Vue({el:目的地,template:模板內(nèi)容});
options
目的地 el
內(nèi)容 template
數(shù)據(jù) data
vue的文件介紹
目錄介紹
插值表達(dá)式
{{ 表達(dá)式 }}
對象 (不要連續(xù)3個(gè){{ {name:‘jack’} }})
字符串 {{ ‘xxx’ }}
判斷后的布爾值 {{ true }}
三元表達(dá)式 {{ true?‘是正確’:‘錯(cuò)誤’ }}
可以用于頁面中簡單粗暴的調(diào)試
注意: 必須在data這個(gè)函數(shù)中返回的對象中聲明
什么是指令
在vue中提供了一些對于頁面 + 數(shù)據(jù)的更為方便的輸出,這些操作就叫做指令, 以v-xxx表示
類似于html頁面中的屬性 ```
比如在angular中 以ng-xxx開頭的就叫做指令
在vue中 以v-xxx開頭的就叫做指令
指令中封裝了一些DOM行為, 結(jié)合屬性作為一個(gè)暗號, 暗號有對應(yīng)的值,根據(jù)不同的值，框架會進(jìn)行相關(guān)DOM操作的綁定
vue中常用的v-指令演示
v-text 元素的InnerText屬性,必須是雙標(biāo)簽
v-html 元素的innerHTML
v-if 判斷是否插入這個(gè)元素
v-else-if
v-else
v-show 隱藏元素 如果確定要隱藏, 會給元素的style加上display:none
v-text 只能用在雙標(biāo)簽中 v-text 其實(shí)就是給元素的innerText賦值 v-html 其實(shí)就是給元素的innerHTML賦值 v-if 如果值為false,會留下一個(gè)<!---->作為標(biāo)記，萬一未來v-if的值是true了，就在這里插入元素 如果有if和else就不需要單獨(dú)留坑了 如果全用上 v-if 相鄰v-else-if 相鄰 v-else 否則 v-else-if可以不用 v-if和v-else-if都有等于對應(yīng)的值，而v-else直接寫 v-if家族都是對元素進(jìn)行插入和移除的操作 v-show是顯示與否的問題 注意: 指令其實(shí)就是利用屬性作為標(biāo)識符,簡化DOM操作, 看：v-model="xxx" v-model 代表要做什么 xxx代表針對的js內(nèi)存對象 寫在那個(gè)元素上，就對哪個(gè)元素操作
v-bind使用
給元素的屬性賦值
可以給已經(jīng)存在的屬性賦值 input value
也可以給自定義屬性賦值 mydata
語法 在元素上 v-bind:屬性名="常量||變量名"
簡寫形式 :屬性名="變量名"
<div v-bind:原屬性名="變量"></div><div :屬性名="變量"> </div>
v-on的使用
處理自定義原生事件的,給按鈕添加click并讓使用變量的樣式改變
普通使用 v-on:事件名="表達(dá)式||函數(shù)名"
簡寫方式 @事件名="表達(dá)式"
階段總結(jié)
如何啟動(dòng)vue : 1:引包 2:留坑 3:啟動(dòng)(new Vue)
options: el/template/data函數(shù)
更便捷的操作DOM及數(shù)據(jù) v-xxx指令
v-text/v-html/v-if/v-show/v-bind/v-on
v-bind綁定屬性值
v-on綁定事件
v-model
雙向數(shù)據(jù)流（綁定）
頁面改變影響內(nèi)存(js)
內(nèi)存(js)改變影響頁面
v-bind 和 v-model 的區(qū)別?
input v-model="name"
雙向數(shù)據(jù)綁定 頁面對于input的value改變，能影響內(nèi)存中name變量
內(nèi)存js改變name的值，會影響頁面重新渲染最新值
input :value="name"
單向數(shù)據(jù)綁定 內(nèi)存改變影響頁面改變
v-model: 其的改變影響其他 v-bind: 其的改變不影響其他
v-bind就是對屬性的簡單賦值,當(dāng)內(nèi)存中值改變，還是會觸發(fā)重新渲染
v-for的使用
基本語法 v-for="item in arr"
對象的操作 v-for="item in obj"
如果是數(shù)組沒有id
v-for="(item,index) in arr" :class="index"
各中v-for的屬性順序(了解)
數(shù)組 item,index
對象 value,key,index
漂亮的列表
class 是可變的
.red { background-color:red;}.big { font-size:50px;}
<div :class="{'red':true,'big':true}">又大又紅</div>
效果是字體大背景色是紅色的div
關(guān)于對象內(nèi)的this
vue已經(jīng)把以前this是window或者事件對象的問題搞定了
methods和data本身是在同一個(gè)對象中的,所以在該對象中可以通過this.隨意取
this.xxx 取data中的值, this.xxxMethod調(diào)methods中的函數(shù)
渲染組件-父使用子組件
1: 創(chuàng)建子組件(對象)
var Header = { template:'模板' , data是一個(gè)函數(shù),methods:功能,components:子組件們 }
2: 在父組件中聲明,根屬性components:{ 組件名:組件對象 }
3: 在父組件要用的地方使用 <組件名></組件名>
在不同框架中,有的不支持大寫字母，用的時(shí)候
組件名 MyHeader
使用 my-header
總結(jié): 有父，生子，聲明，使用
父子組件傳值(父傳子)
1:父用子的時(shí)候通過屬性傳遞
2:子要聲明props:[‘屬性名’] 來接收
3:收到就是自己的了，隨便你用
在template中 直接用
在js中 this.屬性名 用
總結(jié):父傳,子聲明,就是子的了
小補(bǔ)充: 常量傳遞直接用，變量傳遞加冒號
總結(jié)父傳子
父用子 先有子,聲明子,使用子
父傳子 父傳子(屬性),子聲明(收),子直接用(就是自己的一樣)
注冊全局組件
應(yīng)用場景: 多出使用的公共性功能組件，就可以注冊成全局組件,減少冗余代碼
全局API Vue.component('組件名',組件對象);
附加功能:過濾器&監(jiān)視改動(dòng)
filter
將數(shù)據(jù)進(jìn)行添油加醋的操作
過濾器分為兩種
1:組件內(nèi)的過濾器(組件內(nèi)有效)
2:全局過濾器(所有組件共享)
先注冊,后使用
組件內(nèi) filters:{ 過濾器名:過濾器fn } 最終fn內(nèi)通過return產(chǎn)出最終的數(shù)據(jù)
使用方式是 {{ 原有數(shù)據(jù) | 過濾器名 }}
需求
頁面input框輸入字符串, 另一邊顯示其反轉(zhuǎn)的內(nèi)容
過濾器fn:
聲明function(data,argv1,argv2...){}
使用{{ 數(shù)據(jù) | 過濾器名(參數(shù)1,參數(shù)2) }}
watch 監(jiān)視單個(gè)
cumputed 監(jiān)視多個(gè)
key
使用子組件循環(huán)輸出一堆數(shù)據(jù)
不依賴子組件狀態(tài)或臨時(shí) DOM 狀態(tài) (例如：表單輸入值) 的列表渲染輸出。
建議v-for就寫，提升性能，避免vue運(yùn)算,key就是記錄元素與dom間的位置關(guān)系
<son v-for="(item,index) in persons" :key="index" ></son>
slot
slot就是子組件里給DOM留下的坑
<子組件>DOM</子組件>
slot動(dòng)態(tài)的DOM、props是動(dòng)態(tài)的數(shù)據(jù)
組件生命周期
需要頻繁的創(chuàng)建和銷毀組件
比如頁面中部分內(nèi)容顯示與隱藏，但是用的是v-if
組件緩存
內(nèi)置組件中
被其包裹的組件，在v-if=false的時(shí)候，不會銷毀，而是停用
v-if=“true” 不會創(chuàng)建,而是激活
避免頻繁創(chuàng)建組件對象的性能損耗
成對比較
created 和 beforeCreate
A 可以操作數(shù)據(jù) B 數(shù)據(jù)沒有初始化
mounted 和 beforeMount
A 可以操作DOM B 還未生成DOM
updated 和 beforeUpdate
A 可以獲取最終數(shù)據(jù) B 可以二次修改
頻繁銷毀創(chuàng)建的組件使用內(nèi)置組件包裹
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中標(biāo)識元素 ref=“xxxx”
2: 在要獲取的時(shí)候, this.$refs.xxxx 獲取元素
創(chuàng)建組件,裝載DOM,用戶點(diǎn)擊按鈕
ref在DOM上獲取的是原生DOM對象
ref在組件上獲取的是組件對象
$el 是拿其DOM
這個(gè)對象就相當(dāng)于我們平時(shí)玩的this,也可以直接調(diào)用函數(shù)
最后喜歡的同學(xué)點(diǎn)個(gè)關(guān)注、收藏、轉(zhuǎn)發(fā)哦！
