周考

v-show只是簡單地切換元素的 CSS property display。如果需要非常

頻繁地切換恬吕,則使用v-show 較好签则;如果在運行時條件很少改變,則使用v-if較好铐料。

2. 動態(tài)綁定 class的方法

可以傳給v-bind:class 一個對象渐裂,以動態(tài)地切換 class,也可以把一個數(shù)組傳

給v-bind:class,以應(yīng)用一個 class 列表钠惩。

<div :class="(box1:true,size:tag)">1234</div>

<div :class="[box1,(size:tag)]">1234</div>

3.計算屬性和 watch 的區(qū)別

計算量比較小柒凉、可以同步執(zhí)行的時候可以用計算屬性。

當(dāng)需要在數(shù)據(jù)變化時執(zhí)行異步或開銷較大的操作時篓跛,可以用偵聽器膝捞。

4.生命周期的鉤子函數(shù)有哪些,分別可以在什么場景下使用

beforeCreate愧沟、created(創(chuàng)建)绑警、brforeMount求泰、mounted(掛載)、beforeDestroy计盒、

destroyed(銷毀)

在生命周期的不同階段會回調(diào)鉤子函數(shù)

在數(shù)據(jù)觀測渴频,屬性和方法的運算,以及發(fā)送接收請求的時候可以用到鉤子函數(shù)北启。

例如:created() (

console.log(this.Sroute.params.id)

)

5.父組件和子組件之間傳值卜朗, 寫一個案列

父組件可以通過prop向子組件傳值,而子組件可以通過回調(diào)函數(shù)向父組件傳值咕村。

父組件給子組件傳:

6.寫一個插槽使用的案列

子組件關(guān)鍵代碼:

<template>

<div>

<slot name="top"> </slot>

用戶名:<input type="text"/>

<slot name="middle"></slot>

密碼:<input type="text"/>

密碼:<input type="text"/>

<slot name=“buttom"> </slot>

e/div>

</template>

父組件關(guān)鍵代碼:

<template v-slot:top>

sh2>找回密碼</h2>

</template>

<template v-slot.middle>

問題;sinput tvpe="text"/>

答案:<input type="text" />

</template>

ctemplate v-slot.buttom>

kinput type="submit" value="點擊找回"/>

</template>

7. 聲明式路由和編程式路由场钉,寫個案列

聲明式路由:

<template>

<div>

<div>注冊</div>

<router-link to="/telregister">通過手機進行注冊</router-link>

<router-link to="/emailreqister">通過郵箱進行注冊</router-link>

<router-view> </router-viewx

</div>

</template>

<script>

export defaulti

name:'Register'

</script>

編程式路出:

<template>

<div>

<div>登錄</div>

<button @click="telloain">通過電話登錄</buttons

<button @click="emaillogin">通過郵箱登錄</button>

<router-view></router-view>

e/div>

</template>

<script>

export default(

name:'Login',

methods:(

tellogino(

this.Srouter.push((

name:'tellogin

).catch(err=> ()

1.

emaillogin0(

this.$router.push((

name: emaillogin'params;fusername:lisi),query:(age:12,gender;'男)

1).catch(err=>()

1

1.

created() [

console.log(this.Sroute.params,id)

)

</script>

8. 利用 axios.和 Promise 封裝一個網(wǎng)絡(luò)請求

export default function request(ur!,method -"get",data =(1),header= (I) (

return new Promise((resolve, reject)=>(

if (urd == null) reject("urd_不能為空%

axios((

method: method,

urt url,

data: gs.stringify(data).

headers: header,

1).then(data=>(

resolve(data.data);

1).catch(err=>[

reject(err)

)

)

9.路由之間傳值

emaillogin((

this.$router push((

name:'emaillogin' params(username:lisi],query:(age:12,gender.'男

1).catch(err=>(1)

10.嵌套路由的配置

通過在組件中設(shè)置 children 就可以實現(xiàn)路由的嵌套

path: '/login/id',

name: 'login',

component: Login,

children:[

t

path: /tellogin'

name: 'tellogin';

component Tellogin

path:'/emaillogin/username',

name: ‘emaillogin'.

component: EmailLogin

11.寫個yuex的使用案列

sonst store = new Vuex Store(f

state: [

count: 0.

carts:]

).

mutations: (

increment (state,number) (

state count += number

1.

addcartistate,goods)(

let tag = false;

for(let i = 0; i < state.carts.length; i++)[

let itern = state.cartsi;

if(item.id = goods.id)[

state.carts[i].number +=1;

tag = true;

return;

)

1

if(tag)(

Vue.set(goods,"number",1);

Yue set(goods,"checked",true);

state.carts.push(goods);

1

setTimeout(0=>

console.log(goods)

1,1000)

4

).

actions: (

increment (context.number) (

context.commit('increment',number)

addcart(context,goods)(

context.commit( addcart,goods)

1.

addcart(context,goods)(

context.commit("addcart',goods)

1

getters:(

shopcount(state )(

let j = 0;

for(let i = O; i < state.carts.length; i++)(

let item = state.carts[i;

j += item.number;

return j;

)

)

Yue組件如果調(diào)用某個YueX的方法過程中需要向后端請求時或者說出現(xiàn)異步操作時,

需要dispatch VueX中actions的方法懈涛,以保證數(shù)據(jù)的同步逛万。可以說批钠,action的存在就是

為了讓mutations中的方法能在異步操作中起作用

12. 使用element_ui 寫一個表單(包含輸入框宇植,單選框,復(fù)選框埋心,

select,時間選擇器)指郁,獲取到里面的值并輸入到頁面上

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市拷呆,隨后出現(xiàn)的幾起案子闲坎,更是在濱河造成了極大的恐慌,老刑警劉巖茬斧,帶你破解...
    沈念sama閱讀 217,734評論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件腰懂,死亡現(xiàn)場離奇詭異,居然都是意外死亡项秉,警方通過查閱死者的電腦和手機绣溜,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,931評論 3 394
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來伙狐,“玉大人涮毫,你說我怎么就攤上這事瞬欧〈海” “怎么了?”我有些...
    開封第一講書人閱讀 164,133評論 0 354
  • 文/不壞的土叔 我叫張陵艘虎,是天一觀的道長唉侄。 經(jīng)常有香客問我,道長野建,這世上最難降的妖魔是什么属划? 我笑而不...
    開封第一講書人閱讀 58,532評論 1 293
  • 正文 為了忘掉前任恬叹,我火速辦了婚禮,結(jié)果婚禮上同眯,老公的妹妹穿的比我還像新娘绽昼。我一直安慰自己,他們只是感情好须蜗,可當(dāng)我...
    茶點故事閱讀 67,585評論 6 392
  • 文/花漫 我一把揭開白布硅确。 她就那樣靜靜地躺著,像睡著了一般明肮。 火紅的嫁衣襯著肌膚如雪菱农。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,462評論 1 302
  • 那天柿估,我揣著相機與錄音循未,去河邊找鬼。 笑死秫舌,一個胖子當(dāng)著我的面吹牛的妖,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播舅巷,決...
    沈念sama閱讀 40,262評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼羔味,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了钠右?” 一聲冷哼從身側(cè)響起赋元,我...
    開封第一講書人閱讀 39,153評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎飒房,沒想到半個月后搁凸,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,587評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡狠毯,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,792評論 3 336
  • 正文 我和宋清朗相戀三年护糖,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片嚼松。...
    茶點故事閱讀 39,919評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡嫡良,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出献酗,到底是詐尸還是另有隱情寝受,我是刑警寧澤,帶...
    沈念sama閱讀 35,635評論 5 345
  • 正文 年R本政府宣布罕偎,位于F島的核電站很澄,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜甩苛,卻給世界環(huán)境...
    茶點故事閱讀 41,237評論 3 329
  • 文/蒙蒙 一蹂楣、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧讯蒲,春花似錦痊土、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,855評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至萌丈,卻和暖如春赞哗,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背辆雾。 一陣腳步聲響...
    開封第一講書人閱讀 32,983評論 1 269
  • 我被黑心中介騙來泰國打工肪笋, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人度迂。 一個月前我還...
    沈念sama閱讀 48,048評論 3 370
  • 正文 我出身青樓藤乙,卻偏偏與公主長得像,于是被迫代替她去往敵國和親惭墓。 傳聞我的和親對象是個殘疾皇子坛梁,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,864評論 2 354