Vue -- 总结 05

vue生命周期

含义：Vue 实例从 创建 到 销毁 的整个过程就是生命周期

钩子函数

Vue 框架内置函数，随着组件的生命周期阶段，自动执行

作用: 特定的时间点，执行特定的操作

场景: 组件创建完毕后，可以在created 生命周期函数中发起Ajax 请求，从而初始化 data 数据

分类: 4大阶段8个方法

阶段	方法名	方法名
创建	beforeCreate	created
挂载	beforeMount	mounted
更新	beforeUpdate	updated
销毁	beforeDestroy	destroyed

生命周期钩子函数

<template>
  <div id="app">
    <h1>生命周期钩子函数--每个钩子函数都代表人生的每个阶段</h1>
    <LifeCyCle v-if="flag"></LifeCyCle>
    <button @click="destroyedFun">销毁组件</button>
  </div>
</template>

<script>

import LifeCyCle from '@/components/LifeCyCle.vue'
export default {
  name: 'App',
  data(){
    return {
      flag:true
    }
  },
  methods:{
    destroyedFun(){
      this.flag =false
    }
  },
  components:{
    LifeCyCle
  }
 
 
}
</script>

<style>

</style>

 LifeCyCle.vue

<template>
    <div id="app">
      <h1>生命周期钩子函数--每个钩子函数都代表人生的每个阶段</h1>
      <div id="box">{{ msg }}</div>
      <button @click="changeMsg">修改数据</button>
     
    </div>
  </template>
  
  <script>
 
  export default {
    name: 'LifeCyCle',
    data(){
      return {
        msg:"hello wrold",
        timer:""
      }
    },
    methods:{
      changeMsg(){
        let that =this;
        that.msg = '小明'
      },  
    },
    components:{
      
    },

    // 生命周期钩子函数
    // 创建之前
    beforeCreate(){
      console.log('beforeCreate创建之前');
      console.log('this.msg',this.msg);
    },

    // 创建之后
    created(){
      console.log('created创建之后');
      console.log('this.msg',this.msg);
    this.timer = setInterval(()=>{
        console.log('定时器')
    },1000)
    },

    // 挂载之前
    beforeMount(){
      console.log('beforeMount挂载之前');
     console.log("document.getElementById('box')",document.getElementById('box')) 
  
    },

    // 挂载之后
    mounted(){
      console.log('mounted挂载之后');
      console.log("document.getElementById('box')",document.getElementById('box')) 
    },

    // 更新前
    beforeUpdate(){
      console.log('beforeUpdate更新前');
      console.log('this.msg',this.msg);
     console.log('更新之前',document.getElementById('box').innerText) 
    },

    // 更新后
    updated(){
      console.log('updated更新后');
      console.log('this.msg',this.msg);
     console.log('更新之后',document.getElementById('box').innerText) 
    },

    // 销毁前
    beforeDestroy(){
      console.log('beforeDestroy销毁前');
      clearInterval(this.timer)
    },

    // 销毁后
    destroyed(){
      console.log('destroyed销毁后');
      clearInterval(this.timer)
    }
   
  }
  </script>
  
  <style>
  
  </style>
  

增删改

<template>
   <div id="app">
        <div class="container">
          <button class="unshift" @click="addAll">添加</button>
          <button class="shift" @click="deleAll" style="width: 80px;">批量删除</button>
            <table class="take" border="1" cellspacing="0">

                <tr class="nav">
                  <td>
                    <input type="checkbox" id="selectAll" :checked="isChecked" @click="selectAll(isChecked)">
                    <label for="selectAll">全选</label>
                  </td>
                  <td v-for="(item) in look" :key="item.id">
                    {{ item.title }}
                  </td>
                  <td>操作</td>
                </tr>
                <tr v-for="(item,index) in book" :key="item.index">
                  <td>
                    <input type="checkbox" @change="selectOne(index,isChecked)" :checked="item.select">
                  </td>
                  <td>{{ item.id }}</td>
                  <td>{{ item.username }}</td>
                  <td>{{ item.age }}</td>
                  <td>
                    <button class="btn unshift" @click="ediText(index)">修改</button>
                    <button class="btn shift" @click="del(index)">删除</button>
                  </td>
                </tr>
            </table>
              
            <form action="" v-if="showAdd">
              <h2>添加用户</h2>
              <div class="form-group">
                <label for="">学号</label>
                <input type="text" class="form-control" v-model="addUser.id">
              </div>
              <div class="form-group">
                <label for="">姓名</label>
                <input type="text" class="form-control" v-model="addUser.username">
              </div>
              <div class="form-group">
                <label for="">年龄</label>
                <input type="text" class="form-control" v-model="addUser.age">
              </div>
              <div class="form-group">
                <button class="btn btn-success btn-block" type="button" @click="sureAdd">确认添加</button>
              </div>
            </form>

            <form action="" v-if="showEdit">
              <h2>添加用户</h2>
              <div class="form-group">
                    <label for="">学号</label>
                    <input type="text" v-model="editUser.id" class="form-control">
                </div>
                <div class="form-group">
                    <label for="">姓名</label>
                    <input type="text" v-model="editUser.username" class="form-control">
                </div>
                <div class="form-group">
                    <label for="">年龄</label>
                    <input type="text" v-model="editUser.age" class="form-control">
                </div>
                <div class="form-group">
                    <button class="btn btn-success btn-block" @click="editAdd" type="button">确定修改</button>
                </div>
            </form>
        </div>

        
    </div>
</template>

<script>

export default {
  name: 'App',
  data(){
    return {
      showAdd:false,
      showEdit:false,
      look:[
        {
          id:1,
          title:'学号',
          sortStr:'id'
        },
        {
          id:2,
          title:'姓名',
          sortStr:"username"
        },
        {
          id:3,
          title:"age",
          sortStr:"age"
        }
      ],
      book:[
        {
          id:1,
          username:'张三',
          age:18
        },
        {
          id:2,
          username:'李四',
          age:28
        },
        {
          id:3,
          username:'王五',
          age:38
        },
      ],
      addUser:{
        id:'',
        username:'',
        age:''
      },
      editUser: {
        id: "",
        username: "",
        age: ""
      },
    }
  },
  computed:{
    isChecked(){
      let that = this;
      // every()方法用于检测数组中的所有元素是否都满足指定条件（该条件为一个函数）。该方法返回一个布尔值。
      // every()方法会遍历数组的每一项，如果有有一项不满足条件，则表达式返回false,
      // 剩余的项将不会再执行检测；如果遍历完数组后，每一项都符合条，则返回true。
      return that.book.every(function(item){
         return item.select;
      }) 
      // return that.book.every((item)=>{
      //   return item.select;
      // })
    }
  },
  methods:{
    // 添加
    addAll(){
      let that = this;
      that.showAdd = true;
    },
    sureAdd(){
          let that = this;
          that.book.unshift(that.addUser);
          that.showAdd = false;
        },
    // 删除
    del(index){
      let that = this;
      // .splice(index，1) 用来删除数组中指定索引位置的元素。
      // 其中 index 参数表示要删除元素的索引位置，1 表示要删除的元素数量。
      that.book.splice(index,1);
    },
    // 修改
    editAdd(){
      let that = this;
      that.showEdit = false;
    },
    ediText(index){
      let that = this;
      that.showEdit = true;
      // 将当前对象的book数组中索引为index的元素赋值给editUser变量。
      that.editUser= that.book[index];
    },
    // 全选
    selectAll(isChecked){
      let that =this;
      console.log(isChecked);
      for (let i = 0; i < that.book.length; i++) {
        // 通过that.$set方法向这个对象添加一个属性select，
        // 并设置其值为!isChecked。
        // 这样做可以确保select属性的变化能够触发视图的更新‌
        that.$set(that.book[i], "select", !isChecked); // 用于向响应式对象添加一个属性，并确保新属性同样是响应式的，以便在视图中得到更新。
        // 作用是在that.book[i]对象上设置一个名为select的属性，
        // 并将其值设置为!isChecked。这里，!isChecked是一个逻辑非操作，
        // 它将isChecked的值取反。如果isChecked是true，
        // 那么!isChecked就是false，反之亦然
      }
    },
    // 点击批量删除
    deleAll(){
      let that = this;
      // 执行数组过滤操作
      // 数组的filter方法，它接受一个回调函数作为参数。这个回调函数会被数组中的每个元素调用一次，
      // 回调函数的参数（在这个例子中是item）是当前正在处理的数组元素。
      that.book = that.book.filter(function(item){
        
        // 这是回调函数的返回语句。它检查当前元素（item）的select属性是否为true。
        // 如果item.select是true，则!item.select是false，这意味着该元素不会被包含在过滤后的数组中。
        return !item.select;
      })
      // that.book = that.book.filter((item) =>{
      //   return !item.select;
      // })
    },
    selectOne(index,isChecked) {
      let that = this;
      // 使用 Vue 实例的 $set 方法来更新数组 that.book 中索引为 index 的元素
      // select是that.book[index]这个对象的一个属性。
      // !isChecked表示，如果isChecked是true则变为false，
      that.$set(that.book[index],'select',!isChecked);
    }
  }
}
</script>

<style>
  .container {
    width: 1000px;
    margin: 0 auto;
  }

  .take {
    width: 100%;
  }

  tr{
    width: 1000px;
    height: 50px;
    border: 1px solid #ddd;
  }

  .nav{
    font-weight: 800;
  }

  .shift {
    background-color: #d9534f;
    color: white;
    border: none;
    width: 50px; 
    height: 30px;
  } 

  .shift:hover {
    color: #fff;
    background-color: #c9302c;
    border-color: #ac2925;
  }

  .unshift {
    background-color: #337ab7 ;
    color: white;
    border: none;
    width: 50px; 
    height: 30px;
  }

  .unshift:hover {
    color: #fff;
    background-color: #286090;
    border-color: #204d74;
  }

  button{
    border-radius: 3px;
    cursor: pointer;
  }
  
</style>