vue十个生命周期和v-once属性的使用(没写完)

vue十个生命周期和v-once属性的使用

1. vue的十个生命周期:

   beforeCreate:function(){
            //创建之前
           console.log("beforeCreate","11111");
   
      },
      created(){
          //创建完成
          console.log("create","11111");
      },
      beforeMount(){
          //挂载之前
          console.log("beforemount","11111");
      },
      mounted(){
          //挂载完成
          console.log("mounted","11111");
      },
      beforeUpdate(){
          //数据更新之前
          console.log("update","11111");
      },
      updated(){
          //数据更新完成
          console.log("updated","11111");
      },
      activated(){
           console.log("7-activated","11111");
      },
      deactivated(){
           console.log("8-deactivated","11111");
      },
      beforeDestroy(){
          //销毁实例前
          console.log("beforedestory","11111");
      },
      destroyed(){
          //销毁实例后
          console.log("destroyed","11111");
      }

2. v-once的使用:

   这里写代码片
   <div v-once>{{vueOnce}}</div>
   <br>
   <div>{{vueOnce}}</div>
   <br>
   <button @click="add">➕</button>
   //v-once的属性是为了给用户展示vue变量的最初值,

3. props的使用:父组件往子组件里面传递值
   父组件里的components属性要配好
   子组件的先不写,等以后温习时再补上啦

   <template>
       <div id="app">
           <p>props的使用方式</p>
           <p>
               <hello txt="hello world" v-bind:dddd="btntext"></hello>
           </p>
       </div>
   </template>
   
   <script>
       //这个子组件写好就行,不用注册
       import hello form './hello.vue'
       export default {
           name: "subtry",
           components:{hello},
           data(){
               return{
                   btnText:"hello world"
               }
           }
   
       }
   </script>
   <style scoped>
   </style>

4. state访问状态对象 利用vuex这个工具
   通过$store.state.count访问仓库中的变量$tore.commit(“jia”)访问仓库中的一些方法

   import Vue from 'vue';
   import Vuex from 'vuex'
   Vue.use(Vuex)
   
   const state = {
       count :44
   }
   const mutations = {
       jia(state){
           state.count ++
       },
       jian(state){
           state.count --;
       }
   }
   
   export default  new Vuex.Store({
       state,
       mutations
   })