周考

v-show只是简单地切换元素的 CSS property display。如果需要非常

频繁地切换,则使用v-show 较好;如果在运行时条件很少改变,则使用v-if较好。

2. 动态绑定 class的方法

可以传给v-bind:class 一个对象,以动态地切换 class,也可以把一个数组传

给v-bind:class,以应用一个 class 列表。

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

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

3.计算属性和 watch 的区别

计算量比较小、可以同步执行的时候可以用计算属性。

当需要在数据变化时执行异步或开销较大的操作时,可以用侦听器。

4.生命周期的钩子函数有哪些,分别可以在什么场景下使用

beforeCreate、created(创建)、brforeMount、mounted(挂载)、beforeDestroy、

destroyed(销毁)

在生命周期的不同阶段会回调钩子函数

在数据观测,属性和方法的运算,以及发送接收请求的时候可以用到钩子函数。

例如:created() (

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

)

5.父组件和子组件之间传值, 写一个案列

父组件可以通过prop向子组件传值,而子组件可以通过回调函数向父组件传值。

父组件给子组件传:

6.写一个插槽使用的案列

子组件关键代码:

<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>

父组件关键代码:

<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 封装一个网络请求

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.嵌套路由的配置

通过在组件中设置 children 就可以实现路由的嵌套

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组件如果调用某个YueX的方法过程中需要向后端请求时或者说出现异步操作时,

需要dispatch VueX中actions的方法,以保证数据的同步。可以说,action的存在就是

为了让mutations中的方法能在异步操作中起作用

12. 使用element_ui 写一个表单(包含输入框,单选框,复选框,

select,时间选择器),获取到里面的值并输入到页面上

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。