##vue十个生命周期和v-once属性的使用
-
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"); }
-
v-once的使用:
这里写代码片 <div v-once>{{vueOnce}}</div> <br> <div>{{vueOnce}}</div> <br> <button @click="add">➕</button> //v-once的属性是为了给用户展示vue变量的最初值,
-
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>
-
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 })