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,时间选择器),获取到里面的值并输入到页面上