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,時間選擇器)指郁,獲取到里面的值并輸入到頁面上