1. v-show 与 v-if 区别

• v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。它是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
• v-show只是简单的css属性切换，无论条件真与否,都会被编译。
• v-if更适合条件不经常改变的场景，因为它切换开销相对较大，而v-show适用于频繁切换条件。

2. 动态绑定class的⽅法

1.对象语法

• ​ 给v-bind:class 设置一个对象，可以动态地切换class，如下

        <div class="body">
            <div class="left">
                <Left v-bind:value="left"></Left>
            </div>
            <div class="right">
                    <Right :value="right">          
                    </Right>
            </div>
        </div>
    

• 对象中可以传入多个属性，动态切换class; :class可以与普通class共存

<div class="row">
            
            <div class="col-lg-3">          
            <button class="btn btn-default btn-block" :class="{'btn-success': typeIndex == 0,
            'btn-default':typeIndex != 0}" @click="typeClick(0)">全部</button>
            <button v-for="(item,index) in typelst" class="btn btn-default btn-block"
             :class="{'btn-success': typeIndex == index+1,'btn-default':typeIndex != index+1}"
              @click="typeClick(index+1)">{{item}}</button>
            <!-- <button class="btn btn-info btn-block">水果零食</button>
            <button class="btn btn-info btn-block">生活用品</button> -->
            </div>

• 当class的表达式过长或者逻辑复杂时候，可以绑定一个计算属性
• 也可以直接绑定一个Object类型的数据，或者使用类似计算属性的methods

2.数组语法

• 当需要应用多个class，可以使用数组语法，给:class 绑定一个数组，应用一个class列表

3. 计算属性和 watch 的区别

computed计算属性是用来声明式的描述一个值依赖了其它的值，当所依赖的值或者变量改变时，计算属性也会跟着改变；

<div> 选中商品的数量: {{selectedCount}}</div>
<div> 选中商品的总价: {{selectedTotalPrice}} </div>

computed:{
                selectedCount: function() {
                    let result = 0;
                    for (let i = 0; i < this.lst.length; i++) {
                        if (this.lst[i].checked) {
                            result+=this.lst[i].number;
                        }
                    }
                    return result;
                },
                selectedTotalPrice:function() {
                    let result = 0;
                    for (let i = 0; i < this.lst.length; i++) {
                        if (this.lst[i].checked) {
                            result+=this.lst[i].number*this.lst[i].price;
                        }
                    }
                    return result;
                }
        }

watch 监听的是已经在 data 中定义的变量，当该变量变化时，会触发 watch 中的方法。

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

1. beforeCreate(创建前)

在数据观测和初始化事件还未开始。

2. created(创建后)

完成数据观测，属性和方法的运算，初始化事件，$el属性还没有显示出来

3. beforeMount(载入前)

在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。

4. mounted（载入后）

在el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。

5. beforeUpdate（更新前）

在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。

6. updated（更新后）

在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。

7. beforeDestroy（销毁前）

在实例销毁之前调用。实例仍然完全可用。

8. destroyed（销毁后）

在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

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

export default {
  name: 'App',
  data:function(){
      return {
          left:["left1","left2"],
          right:["right1","right2","right3"],
          name:"",
          vv:"", 
      }
  },
  /* 声明一个组件的名称,不重复就行*/
  methods:{
      getValue(value){
          //获取子组件传递值的回调函数
          this.name=value;
      }
  },
  components: { 
      /* 当键和值一样可以只写一个*/
    HelloWorld:HelloWorld,
    Header,
    Left,
    Right,
    BBB
    /* 注册组件  注册完组件就可以开始使用 */
  }
}
</script>

<template>
    <div>
        <Item :aa="value[0]"></Item>
        <Item :aa="value[1]"></Item>
        <Item :aa="value[2]"></Item>
        
        
    </div>
</template>

<script>
    import Item from './Item.vue'
    export default {
      name: 'Right', /* 声明一个组件的名称,不重复就行*/
      props:{
          value:Array
      },
      components:{
               Item
          },
      created() {
            console.log(this.value)
          }
    }
</script>

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

<template>
    <div>
        
        <slot name="top" ></slot>
        用户名:<input type="text" name="username" />
        <slot name="middle"></slot>
        密码:<input type="text" name="password" />
        密码:<input type="text" name="password" />
         <slot name="bottom"></slot>
    </div>
</template>

<script>
    export default{
        name:"BBB"
    }
</script>

<div class="bb">
            <BBB>
                <!-- 把三个空的内容传递进去 -->
                <!-- 当子组件中欧协标签需要父组件自定义的时候可以使用插槽 -->
            <template v-slot:top>
                <h1>忘记密码</h1>
            </template>
            <template v-slot:middle>
                    <!-- <h1>忘记密码</h1> -->
                问题<input type="text"/>
                回答<input type="text"/>      
            </template>
            <template v-slot:bottom>
                <input type="submit" value="找回密码" />
            </template>
            </BBB>
        </div>

7. 声明式路由和编程式路由，写个案列

编程式路由：

<script>
export default {
    name:"login",
    methods:{
        telLogin() {
            this.$router.replace( // 编程式路由
                { name: 'tellogin'}
            ).catch(err=>{})
        },
        emailLogin() { 
            this.$router.replace( //编程式路由
                { name: 'emaillogin', params:{username:'zhangsan'},query:{age:12,gender:"男"}}
             ).catch(err=>{})
        }
    },
    created() { // 生命周期
        // 获取到动态路由传递的值
        let route = this.$route;
        console.log(route.params.id) // 获取到路由链接上传递的值
    }
}
</script>

8. 利用axios和Promise封装一个网络请求

import axios from 'axios';
import qs from "qs";

axios.interceptors.request.use(function (config) {
    config.headers.auth = "aaa";
  return config;
  }, function (error) {
    return Promise.reject(error);
  });

export default function request(url,method="get",data={},header={}) {
  // if (url.indexOf("res") == -1) {
  //   header['auth'] = "auth..."
  // }
  return new Promise((resolve, reject)=> {
    if (url == null) reject("url不能为空");
    axios({
      method: method,
      url: url,
      data: qs.stringify(data),
      headers: header,
    }).then(data=>{
      resolve(data.data);
    }).catch(err=>{
      reject(err)
    });
  })
}

9. 路由之间传值

<template>
  <div id="app">
    <div id="nav">
      <router-link :to="loginpath">登录</router-link> |
      <router-link to="/register" class="register" active-class="registeract" tag="button">注册</router-link>
    </div>
    <router-view/>
  </div>
</template>
<script>
  export default{
    name:'App',
    data:function(){
      return{
        id:4
      }
    },
    computed:{
      loginpath:function(){
        return "/login/" + this.id
      }
    }
  }

10. 嵌套路由的配置

const routes = [
    {
        path: '/',   // 默认的页面
        name: 'index',
        redirect: { name: 'login',params:{"id":10}}
    },
  {
    path: '/login/:id',   // 动态的路由
    name: 'login',
    component: Login,
    alias: '/dl/:id', // 起别名
    children: [
        {
          path: '/tellogin',  
          name: 'tellogin',
          component: TelLogin
        },
        {
          path: '/emaillogin/:username',  
          name: 'emaillogin',
          component: EmailLogin
        },
    ]
  },

11. 写个vuex的使用案列

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
    count: 10,
    carts:[]
  },
  mutations: {
    increment (state,number) {
      state.count+=number;
    },
    addCart(state,goods){
        let tag = false;
        for (let i = 0; i < state.carts.length; i++) {
            let item = state.carts[i];
            if(item.id == goods){
                this.carts[i].number += 1;
                tag = true;
                return;
            }
        }
        if(!tag){
            goods.number = 1;
            goods.checked = true;
        }
        state.carts.push(goods);
    }
  },
  actions: {
      increment (context,number) {
        context.commit('increment',number)
      },
      addCart(context,goods){
          context.commit()
      }
    }
})
export default store;

12. 使用element_ui 写一个表单（包含 输入框，单选框，复选框， select, 时间选择器），获取到里面的值并输入到页面上

<template> 
    <div style="width: 500px;height: 250px; margin: 100px auto;"> 
        <el-form ref="form" :model="form" label-width="80px"> 
          <el-form-item label="输⼊框"> 
            <el-input v-model="form.name"></el-input> 
          </el-form-item> 
          <el-form-item label="地点"> 
            <el-select v-model="form.region" placeholder="请选择"> 
              <el-option label="上海" value="shanghai"></el-option> 
              <el-option label="北京" value="beijing"></el-option> 
            </el-select> 
          </el-form-item> 
          <el-form-item label="时间"> 
            <el-col :span="11"> 
              <el-date-picker type="date" placeholder="选择⽇期" v-
model="form.date1" style="width: 100%;"></el-date-picker> 
            </el-col> 
            <el-col class="line" :span="2">-</el-col> 
            <el-col :span="11"> 
              <el-time-picker placeholder="选择时间" v-model="form.date2" 
style="width: 100%;"></el-time-picker> 
            </el-col> 
          </el-form-item> 
          <el-form-item label="复选框"> 
            <el-checkbox-group v-model="form.type"> 
              <el-checkbox label="复选⼀" name="type"></el-checkbox> 
              <el-checkbox label="复选⼆" name="type"></el-checkbox> 
              <el-checkbox label="复选三" name="type"></el-checkbox> 
              <el-checkbox label="复选四" name="type"></el-checkbox> 
            </el-checkbox-group> 
          </el-form-item> 
          <el-form-item label="单选框"> 
            <el-radio-group v-model="form.resource"> 
              <el-radio label="单选框⼀"></el-radio> 
              <el-radio label="单选框⼆"></el-radio> 
            </el-radio-group> 
          </el-form-item> 
          <el-form-item> 
            <el-button type="primary" @click="onSubmit">提交</el-button> 
          </el-form-item> 
        </el-form> 
        <h1>信息显示</h1> 
        <h4>输⼊框：{{form.name}}</h4> 
        <h4>地点：{{form.region}}</h4> 
        <h4>⽇期：{{form.date1}}</h4> 
        <h4>时间：{{form.date2}}</h4> 
        <h4>复选框：{{form.type}}</h4> 
        <h4>单选框：{{form.resource}}</h4> 
    </div> 
     
</template> 
 
<script> 
   export default { 
        data() { 
             return { 
               form: { 
                 name: '', 
                 region: '', 
                 date1: '', 
                 date2: '', 
                 type: [], 
                 resource: '' 
               } 
             } 
           }, 
       methods: { 
          onSubmit() { 
              this.$router.push({ 
                 name: "Menu" 
              }) 
          } 
       } 
   } 
</script> 

13. 使用element_ui 写一个table, 包含姓名，年龄，操作(删除，更新)

<template> 
   <el-table :data="tableData" border style="width: 18%;margin: 100px auto;"> 
       <el-table-column prop="name" label="姓名" width="120"></el-table-
column> 
       <el-table-column prop="age" label="年龄" width="120"></el-table-column> 
       <el-table-column fixed="right" label="操作" width="100"> 
          <template slot-scope="scope"> 
              <el-button @click="handleClick(scope.row)" type="text" 
size="small">更新</el-button> 
              <el-button type="text" size="small" @click="open">删除</el-
button> 
          </template> 
       </el-table-column> 
   </el-table> 
</template> 
 
<script> 
   export default { 
       methods: { 
          handleClick(row) { 
              console.log(row); 
          }, 
          open() { 
              this.$confirm('此操作将永久删除该数据,        是否继续?', '提示', { 
                 confirmButtonText: '确定', 
                 cancelButtonText: '取消', 
                 type: 'warning' 
              }).then(() => { 
                 this.$message({ 
                     type: 'success', 
                     message: '删除成功!' 
                 }); 
              }).catch(() => { 
                 this.$message({ 
                     type: 'info', 
                     message: '已取消删除' 
                 }); 
              }); 
          } 
       }, 
       data() { 
          return { 
              tableData: [{ 
                 name: '学生 1', 
                 age: 11 
              }, { 
                 name: '学生 2', 
                 age: 12 
              }, { 
                 name: '学生 3', 
                 age: 13 
              }, { 
                 name: '学生 4', 
                 age: 14, 
              }] 
          } 
       } 
   } 
</script> 
 
<style> 
   .el-header { 
       background-color: #B3C0D1; 
       color: #333; 
       line-height: 60px; 
   } 
 
   .el-aside { 
       color: #333; 
   } 
</style>