2020-08-08

1. v-show 與 v-if 區(qū)別

v-if 是“真正”的條件渲染忽肛，因為它會確保在切換過程中條件塊內的事件監(jiān)聽器和子組件適當地被銷毀和重建熄阻。它是惰性的：如果在初始渲染時條件為假年局，則什么也不做——直到條件第一次變?yōu)檎鏁r凄贩，才會開始渲染條件塊舵变。
v-show只是簡單的css屬性切換，無論條件真與否,都會被編譯豫领。
v-if更適合條件不經常改變的場景，因為它切換開銷相對較大舔琅，而v-show適用于頻繁切換條件等恐。

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

1.對象語法

? 給v-bind:class 設置一個對象，可以動態(tài)地切換class，如下

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

對象中可以傳入多個屬性课蔬，動態(tài)切換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 的區(qū)別

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 監(jiān)聽的是已經在 data 中定義的變量铺遂，當該變量變化時，會觸發(fā) watch 中的方法茎刚。

4. ?命周期的鉤子函數有哪些襟锐，分別可以在什么場景下使用

1. beforeCreate(創(chuàng)建前)

在數據觀測和初始化事件還未開始。

2. created(創(chuàng)建后)

完成數據觀測膛锭，屬性和方法的運算粮坞，初始化事件，$el屬性還沒有顯示出來

3. beforeMount(載入前)

在掛載開始之前被調用初狰，相關的render函數首次被調用莫杈。實例已完成以下的配置：編譯模板，把data里面的數據和模板生成html奢入。注意此時還沒有掛載html到頁面上筝闹。

4. mounted（載入后）

在el 被新創(chuàng)建的 vm.$el 替換，并掛載到實例上去之后調用腥光。實例已完成以下的配置：用上面編譯好的html內容替換el屬性指向的DOM對象关顷。完成模板中的html渲染到html頁面中。此過程中進行ajax交互武福。

5. beforeUpdate（更新前）

在數據更新之前調用议双，發(fā)生在虛擬DOM重新渲染和打補丁之前。

6. updated（更新后）

在由于數據更改導致的虛擬DOM重新渲染和打補丁之后調用捉片。調用時平痰，組件DOM已經更新，所以可以執(zhí)行依賴于DOM的操作伍纫。然而在大多數情況下觉增，應該避免在此期間更改狀態(tài)，因為這可能會導致更新無限循環(huán)翻斟。該鉤子在服務器端渲染期間不被調用逾礁。

7. beforeDestroy（銷毀前）

在實例銷毀之前調用。實例仍然完全可用。

8. destroyed（銷毀后）

在實例銷毀之后調用嘹履。調用后腻扇，所有的事件監(jiān)聽器會被移除，所有的子實例也會被銷毀砾嫉。該鉤子在服務器端渲染期間不被調用幼苛。

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>
                <!-- 把三個空的內容傳遞進去 -->
                <!-- 當子組件中歐協(xié)標簽需要父組件自定義的時候可以使用插槽 -->
            <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() { // 生命周期
        // 獲取到動態(tài)路由傳遞的值
        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',   // 動態(tài)的路由
    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('此操作將永久刪除該數據,        是否繼續(xù)?', '提示', { 
                 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>