常見(jiàn)標(biāo)簽:

<div='box'></div>表示盒子框

<li></li>表示列表

<h1>表示一級(jí)標(biāo)題

<u1>表示正文

<button>按鈕

<span>大列表容器

<a>標(biāo)簽

<tr><td>表格類(lèi)

class:表示引入的類(lèi)

href:表示可以超鏈接---><a href='#'>表示鏈接默認(rèn)頁(yè)面

p12

this含義:表示掛載的名稱,這里是表示app(app=this),methods方法中調(diào)用data中的數(shù)據(jù),要用this.'數(shù)據(jù)名'

v-on事件綁定,可以簡(jiǎn)寫(xiě)成@:

如 v-on:click="fn"-->@click="fn"

v-bind動(dòng)態(tài)渲染,可以簡(jiǎn)寫(xiě)成:'屬性名'

如 v-bink:src=' '-->:src=' ' -->:class

v-bind動(dòng)態(tài)設(shè)置路徑、插入值

☆☆☆

class方法不想寫(xiě)實(shí),動(dòng)態(tài)調(diào)用方法active,可將方法寫(xiě)成對(duì)象:class='{ active:index===id}'

p16

v-for遍歷

格式:v-for="(item,index) in list":key="item.id"

給列表遍歷key不要少

刪除方法的定義:

用filter過(guò)濾,從數(shù)組獲取刪除的對(duì)象id,將不是本id的保留,是本id的過(guò)濾掉,再賦值覆蓋到原來(lái)數(shù)組filter(item => item.id !== id)

給<li>列表里面加語(yǔ)句:key="item.id"表示給列表加id,則刪除是刪除列表所有內(nèi)容及列表本身,不加則是只刪除里面的文字和最后一個(gè)列表

v-model數(shù)據(jù)雙相綁定

①u(mài)nshift在原數(shù)組上添加

②v-model.trim 前后空格祛除

③v-model.number 數(shù)字字符裝換成數(shù)字

@keyup.enter=" " 鍵盤(pán)監(jiān)聽(tīng) fatkun

操作class對(duì)象調(diào)用方法:

鏈接點(diǎn)擊后高亮

表格個(gè)人信息填寫(xiě)

1.單選框--性別

<input type="radio" name="gender">男

<input type="radio" name="gender">女

name字段表示只能有一個(gè),兩個(gè)gender都給name故只能二選一.還應(yīng)該要寫(xiě)value,相互關(guān)聯(lián)寫(xiě)v-model

2.選擇框--興趣愛(ài)好等

<input type="checkbox" v-model="is">

3.下拉菜單

<select>

4.自我輸入框

<textarea>

5.計(jì)算屬性---根據(jù)多筆數(shù)據(jù)計(jì)算出總量

數(shù)據(jù)及邏輯,同時(shí)要有返回return放在computed中,不再是data

this.list.reduce((sum,item)=>sum+item.num,0)

①reduce表示疊加,

②其中參數(shù)一(sum,item)=>sum+item.num是表示計(jì)算規(guī)則,sum是每階段的值,item是遍歷的每個(gè)對(duì)象

③參數(shù)二0是表示計(jì)算起始值

注:接收參數(shù)let total=this.list.reduce()

6.字符串截取

slice(0,1) : 0索引開(kāi)始到1索引結(jié)束且不包含1

7.<a @click.prevent="del(item.id)" href="#">

prevent阻止默認(rèn)行為

沒(méi)加prevent時(shí),點(diǎn)擊超鏈接會(huì)跳離當(dāng)前頁(yè)面,去其他頁(yè)面.

8.對(duì)輸入的類(lèi)型判斷

if(typeof this.score !=='number'){ }

9.輸入框清空

在add()方法后加上

• this.subject = ' '
• this.score = ' '

10.對(duì)小數(shù)保留兩位小數(shù)

.toFixed(2)

computed計(jì)算屬性和methods方法區(qū)別

computed計(jì)算出的結(jié)果就放緩存,多次使用后更加節(jié)約效能

computed完整方法:有g(shù)et()和set()

watch:監(jiān)聽(tīng)變化

1.可監(jiān)聽(tīng)data里面的值,獲取變化前后的值

2.若值是存在data里面的方法,在與data同級(jí)別的watch中要寫(xiě)方法.要的值,并且加上單引號(hào)

完整寫(xiě)法:

1.對(duì)多個(gè)條件進(jìn)行檢測(cè),并獲得newValue

可以定義多個(gè)對(duì)象,將多個(gè)值都定義進(jìn)去

2.檢測(cè)多個(gè)對(duì)象,就必須開(kāi)啟深度檢測(cè)deep:true handler(){}

3.調(diào)動(dòng)接口,或者向后端發(fā)送請(qǐng)求用axios ,async+await 是緩沖讓程序等一下全部數(shù)據(jù)都接收好了再運(yùn)行

完整寫(xiě)法:

4.細(xì)說(shuō)async+await:

①await只能放在async函數(shù)里面，如果不放在里面，代碼會(huì)直接報(bào)錯(cuò)，不能運(yùn)行

②await后面的函數(shù)要寫(xiě)()

5.let,const,var都是變量類(lèi)型分別作用:

" const聲明一個(gè)只讀的常量。一旦聲明，常量的值就不能改變，但對(duì)于對(duì)象和數(shù)據(jù)這種引用類(lèi)型，內(nèi)存地址不能修改，可以修改里面的值。"

Day4

1、樣式避免沖突

在style標(biāo)簽上加scoped，只作用在本組件，其他導(dǎo)入的組件不影響（組件也包含全局組件、局部組件，每個(gè)頁(yè)面都含有的頭部或者尾部都可以做成組件）

——組件 ：組件中，data是個(gè)函數(shù)寫(xiě)發(fā)data（），要帶上return；不再是data：

這樣的好處是保證每個(gè)組件拿到的都是獨(dú)立的data

2、組件通信

父與子通信：在父的data中把值定義,在子中用props接收

子與父通信:子中用$emit賦值,

通過(guò)事件監(jiān)聽(tīng),調(diào)用方法改變父主件中子的渲染

prop可以傳多個(gè)數(shù)據(jù),使子主件多次復(fù)用渲染

注:

1三元運(yùn)算: istrue ? '是' : '不是'

2將數(shù)組['1','2','3']變成字符串 用.join(' '),如下圖興趣愛(ài)好處

3. props的傳參類(lèi)型校驗(yàn),避免傳參過(guò)去都會(huì)渲染,書(shū)寫(xiě)形式:由數(shù)組[ ]改成對(duì)象的寫(xiě)法{ }的形式

3.1 props非空校驗(yàn)、默認(rèn)值、自定義校驗(yàn)方法書(shū)寫(xiě)

`null` 和 `undefined` 會(huì)通過(guò)任何類(lèi)型驗(yàn)證

實(shí)例展示:

// 自定義驗(yàn)證函數(shù)
    propF: {
      validator: function (value) {
        // 這個(gè)值必須匹配下列字符串中的一個(gè)
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }

data數(shù)據(jù)改動(dòng):

監(jiān)聽(tīng)事件:

1回車(chē)監(jiān)聽(tīng):@keyup.enter

非空判斷:

if(this.name.trim() === ' '){

alert('不能為空')

return

}

給list添加值:

unshift:用于在數(shù)組的開(kāi)頭添加一個(gè)或多個(gè)元素，并返回新的數(shù)組

原 list:[

{id:1,name:"打籃球"},

{id:2,name:"游泳"}

]

添加:this.list.unshift({

id:+new Date(),

name:跑步

})

刪除:filter

Del(id){

this.list.filter(item =>item.id != id)

}

語(yǔ)句:v-開(kāi)頭,v-bind動(dòng)態(tài)賦值其簡(jiǎn)寫(xiě) : ,v-click簡(jiǎn)寫(xiě) @ ,還有v-model 是和data里面的值雙向綁定同步更改,v-for遍歷(item,index) in list key=index;v-if ===為true則展示, v-show =為true則展示

事件監(jiān)聽(tīng):

watch : {

kilometers:function(val) {

this.kilometers = val;

this.meters = this.kilometers * 1000

},

meters : function (val) {

this.kilometers = val/ 1000;

this.meters = val;

}

}

vm.$watch('kilometers', function (newValue, oldValue) {

// 這個(gè)回調(diào)將在 vm.kilometers 改變后調(diào)用

??document.getElementById ("info").innerHTML = "修改前值為: " + oldValue + "，修改后值為: " + newValue;

})

行內(nèi)樣式:

逗號(hào)前面的errorClass 樣式是始終存在的，第二個(gè)樣式用三元運(yùn)算符判斷isActive 是否添加,當(dāng)為 true 時(shí)添加 activeClass 類(lèi)：

<div v-bind:class="[errorClass ,isActive ? activeClass : ' ']"></div>

為true則與下面同義:

<div v-bind:class="[activeClass, errorClass]"></div>

或

<div class="active text-danger"></div>

輸入框input:

--默認(rèn)顯示提示文字

?<input v-model="message" placeholder="編輯我……">

文本輸入框textarea:

--默認(rèn)顯示提示文字

<textarea v-model="message2" placeholder="多行文本輸入……"></textarea>

兩個(gè)輸入框的區(qū)別:input大小設(shè)定就固定,textarea可以根據(jù)文本多少任意變換

復(fù)選框:

?<p>多個(gè)復(fù)選框：</p>

?<input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">

?<label for="這是選runoob">Runoob</label>

?<input type="checkbox" id="google" value="Google" v-model="checkedNames">

?<label for="這是選google">Google</label>

?<input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">

?<label for="這是選taobao">taobao</label>

?<br>:等于回車(chē)、換行

下拉選擇框:

<select v-model="selected" name="fruit">

??<option value="">選擇一個(gè)網(wǎng)站</option>

??<option value="www.runoob.com">Runoob</option>

??<option value="www.google.com">Google</option>

?</select>

注:如果要自動(dòng)過(guò)濾用戶輸入的首尾空格，可以添加 trim修飾符到 v-model 上過(guò)濾輸入

--------<input v-model.trim="msg">

只能輸入數(shù)字

-------<input v-model.number="age" type="number">

輸入框自動(dòng)聚焦:

input.focus()

自定義v- 類(lèi)的指令:

①設(shè)置div的顏色及內(nèi)容,定義的一個(gè)v-runoob

-------------?<div v-runoob="{ color: 'green', text: '菜鳥(niǎo)教程!' }"></div>

②注冊(cè)指令,并用方法賦予它含義

----------------Vue.directive('runoob', function (el, binding) {

// 簡(jiǎn)寫(xiě)方式設(shè)置文本及背景顏色

el.innerHTML = binding.value.text

el.style.backgroundColor = binding.value.color

})

數(shù)據(jù)持久化（存儲(chǔ)在本地）：

頁(yè)面進(jìn)入時(shí)，也優(yōu)先調(diào)用本地?cái)?shù)據(jù)list

具體代碼--->

list:JSON.parse(localStorage.getItem('list')) || 寫(xiě)好的數(shù)組數(shù)據(jù)

開(kāi)啟深度監(jiān)聽(tīng),儲(chǔ)存每個(gè)變化的list數(shù)值-->

watch:{

list:{

deep:true,

handler(newValue){

localStorage.setItem('list',JSON.stringify(newValue))

}}}

非父子通信:

①event bus

②爺孫通信--跨級(jí)通信

爺中數(shù)據(jù)放在provide,孫在inject中直取; userInfo復(fù)雜類(lèi)型寫(xiě)成對(duì)象{ }的方式,則可以在類(lèi)似注冊(cè)點(diǎn)擊事件后,數(shù)據(jù)進(jìn)行更新傳遞下去

v-model原理(如何作用于組件通信)

:value和@input=$event.target.value (數(shù)據(jù)變化就傳過(guò)來(lái)) 等價(jià)于v-model(監(jiān)聽(tīng)數(shù)據(jù)變化,視圖變)

表單類(lèi)組件封裝(v-model的拆解):

表單改變了就觸發(fā)方法用@change

表單中觸發(fā)的方法提醒父組件用this.$emit('事件名' , e.target.value) ; e是形參 , 只要不是在元素行內(nèi)都用e不需要用$event接收數(shù)據(jù)的變化

注:子組件獲取變化的數(shù)據(jù)是e.target.value; 父組件獲取到子傳遞過(guò)來(lái)的是直接$event

用v-model簡(jiǎn)化代碼:

v-model就相當(dāng)于:value和@input

子傳父this.$emit('input',....) 子監(jiān)聽(tīng)是:value='value',props:{接收的值名稱也是value}

.sync修飾符:

注:

子中事件名是 'update:visible' 是固定的, 如this.$emit('update:visible',....)

父中.sync前面的是visible則子中props中的接收數(shù)據(jù)名也是visible

注:

若props接收的是value還是推薦用v-model

ref和$refs:

使用原因--->

例如,查找dom中表數(shù)據(jù)用echarts.init(domcument.querySelector('.box'))

而,querySelector查找范圍是整個(gè)頁(yè)面,不夠精準(zhǔn)

主要用法:調(diào)用組件,拿到其中的方法

給div定義ref名字,在其他的地方用this.$ref.名字

~this.$nextTick():頁(yè)面dom渲染完畢再執(zhí)行的代碼

~寫(xiě)在運(yùn)行完的方法后---- setTimeout( ( )=>{實(shí)現(xiàn)功能},1000)

要想實(shí)現(xiàn)點(diǎn)擊按鍵后,頁(yè)面輸入框出現(xiàn)后就自動(dòng)聚焦-->

在@click方法中后面加上this.$nextTick(() =>this.$ref.fangfa.focus);

有ref的綁定才能使精確要需要的地方實(shí)現(xiàn)功能.

全局注冊(cè)

---在main.js中注冊(cè)

局部注冊(cè)

---在對(duì)應(yīng).vue文件中注冊(cè)

el是指令所綁定的元素,

inserted(el){ el.focus( ) } :生命周期鉤子

表示: 當(dāng)令所綁定的元素添加到頁(yè)面之后,會(huì)調(diào)用下面的方法

動(dòng)態(tài)變化取值:binding.value就是v-' '=...的值

update(el,binding) 鉤子函數(shù):

binding中的value變,則會(huì)調(diào)用update下面的方法

自定義指令v-loading:

(內(nèi)有重點(diǎn)概念內(nèi)容)

頁(yè)面在加載過(guò)程中出現(xiàn)動(dòng)畫(huà)--->

1.偽元素:在樣式后面加 :before ,則可以直接控制邏輯添加或直接移除

.add為添加 .remove為移除

el.classList( ' ' )是把當(dāng)前類(lèi)的所有樣式都加上這個(gè)新的樣式

2.background:背景樣式,可以在里面添加顏色、圖片地址、no-repeat不重復(fù)拼圖、center居中位置

3.div中class是可以添加多種如-->class="box box2 box3"

4.父元素相對(duì)定位relative,子元素絕對(duì)定位position:absolute

請(qǐng)求axios步驟:

1.安裝axios:yarn add axios

2.async created(){

const res = await axios.get(' 地址') //get請(qǐng)求方式

}

默認(rèn)插槽:

在組件中有內(nèi)容需要自定義,其他都是復(fù)用組件用到插槽

在組件中--->

要變化的地方用<slot></slot>占位,

若在<slot>中輸入內(nèi)容則當(dāng)成默認(rèn)內(nèi)容

在引入組件的頁(yè)面中--->

直接寫(xiě)上: <組件> 要輸?shù)膬?nèi)容</組件>

具名插槽:

默認(rèn)插槽只能定制一個(gè)位置,而升級(jí)版就可以多個(gè)位置同時(shí)定制

使用方法:

每個(gè)slot定義名字 ,應(yīng)用處<template>包裹v-slot 簡(jiǎn)寫(xiě)成 #名字

實(shí)例代碼:

作用域插槽: