Vue生命周期、自定义指令，传值，状态管理，路由

生命周期

• vue（包括组件)实例从 实例化到消亡的一个过程，每个vue实例在被创建时都要经一系列的初始化过程，

  如需要设置监听，编译模板，将实例挂载到DOM并在数据变化时更新DOM等

• 生命周期8个钩子函数的作用：

  • beforeCreate:初始化内容
  • created：初始化数据完成，可以拿到数据了
  • beforeMount：找到对应的el，把数据向虚拟DOM上挂载的过程
  • mounted：把内容渲染到真实的DOM上
  • beforeUPdate：修改数据前的状态
  • updated：修改数据完成的状态（页面变动就会触发)
  • beforeDestory:消亡前的状态
  • destoryed：消亡后的状态

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7we0HxKB-1571229055571)(C:\Users\Administrator\Desktop\lifecycle.png)]

Vue中传值

• 父传子用props,子传父用 $emit自定义事件,非父子传子(兄弟传值):通过实例化VUE（​桥梁）的方式

####vue中子传父

        Vue.component("Mycomponent", {
            template: ` 
                <div>
                        <h3>组件中内容</h3>
                        <input type="text" v-model="msg">
                    <ul>
                        
                        <li v-for="item of list">{{item}}</li>
                        </ul>
                        <button @click="push">追加</button>
                    </div>
            `,
            data(){
                return {
                    msg:'',
                    list:['html','css']
                }
            },
            methods:{
                push(){
                    this.list.push(this.msg);
                    //组件中按钮点击触发push方法,push()下自定义事件mypush,在实例化下组件						Mycomponent下调用vue实例化下的vuePush方法
                    //自定义事件mypush可传递参数 给父级
                    //制定自定义事件,$emit(自定义事件的名字，传递给父级的参数)
                    this.$emit("mypush",[this.msg,'chen'])
                }
            }
        })
        //父传子 props ,子传父$emit
        new Vue({
            el:"#app",
            data:{
                msg:'123',
                name:'liu',
                list:['html','css']
            },
            methods:{

                vuePush(msg){
                    console.log(msg)
                    this.list.push(msg[0])
                    this.name=msg[1]
                    this.list.shift()
                }
            }
        })

兄弟传值

通过实例化Vue（桥梁）的方式，在组件A中制定$emit()自定义事件，在组件A调用处触发自定义事件

在组件B使用$on监听组件A的自定义事件，使用回调函数的形式拿到组件A传递过来的值

<script>

let Even = new Vue({})//声明传值的桥梁
Vue.component("ComA",{
    template:` <div>
                    <h2>组件A的数据---{{childAmsg}}</h2>  
                    <button @click="send">兄弟传值</button>
                </div>`,
    data(){
        return {
            childAMsg:"这是组件A要传递的数据" //定义组件的数据
        }
    },
    methods:{
        send(){
            Even.$emit("fnclick",this.childMsg)//用桥梁自定义事件fnclick
            //$emit触发自定义方法
        }
    }
})
	
    Vue.component("ComB",{
    template:` <div>
                    <h2>组件B接收A的数据---{{childAmsg}}</h2>                     
                </div>`,
    data(){
        return {
            childBMsg:""//组件B中定义的数据
        }
    },
    mounted():{//钩子函数下自动执行$on监听，拿到自定义方法的值
        	Even.$on("fnclick",(val)=>{
        this.childBMsg=val
    })
    }
})
   new Vue({
            el:"#app",
          
        })
		
</script>

状态管理

如果有一处需要被多个实例间共享的状态，可以简单地通过维护一份共有数据来实现共享

const store = {
	state:{共有的数据},
	storefn(v){操作共有数据的方法}
}

Vue实例化下拿到共有数据
data:{
	shareData:store.state, //承载共有数据
	appMsg:'app中私有数据'
},
methods:{
appFn(){
//在实例中去操作共有的数据时，不能直接变更共有数据，要通过仓库下的方法去修改
//这样是为了遵循语法规则
store.storeFn("123")//如此处将123传到 store下storefn()方法
}
}

自定义指令

当vue提供的指令不够使用或者不满足开发需求时，可以自行封装指令

• 全局自定义指令:Vue.directive(指令名,{操作流程})

  •  <h2 v-liu>绑定自定义指令</h2>//DOM下时候使用,此时字体颜色改为navy  
      
    //注册全局自定义属性
            Vue.directive("liu",{
                inserted(el){
                    el.style.color="navy"
                    //console.log(el)
                 
                }
            })
    
    

• 局部自定义指令

  • new Vue({
    el:"#app",
    directives:{//此处加directive加s  注意和全局中声明不同
    			//声明局部自定义指令，只在app下生效
    liu:{
    	inserted(el,binding){
    el.style.color="chocolate"
    		//console.log(el)
    		//console.log(binding)
    }
    }
    }
    
    })
    

  • 动态修改全局自定义指令下操作

      <div id="app">
          <h2 v-liu="{color:'navy',txt:'动态改变后的值'}"></h2>
          <h3 v-liu="obj"></h3>
          <h3 v-liu="obj1" ></h3> 通过绑定的对象去修改
      </div>
  	
  Vue.directive("liu",{
  	inserted(el,binding){
  el.style.color=binding.value.color
  el.innerHTML = binding.value.txt//binding.value  :指令的绑定值
  el.style.fontStyle = binding.value.fontSize
  }
  })
  
  //实例化
           new Vue({
              el:"#app",
              data:{
                  obj:{
                          color:"chocolate",
                          txt:"123"
                  },
                  obj1:{
                      color:"#ff6700",
                          txt:"obj2",
                          fontSize:32+'px'
  				}           
              }
          })
  

  • 自定义指令使用的钩子函数

  • 钩子函数

    一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

    • bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
    • inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
    • update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

    我们会在稍后讨论渲染函数时介绍更多 VNodes 的细节。

    • componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
    • unbind：只调用一次，指令与元素解绑时调用。

• 配置路由

1. 配置组件模板

2. 配置路由

   let router = new VueRouter({
   routes :[
   	{path:路径名,component:组件名}
   ]
   });
   

3. 挂载路由

   
           new Vue({
               el: "#app",
               router //挂载路由
           })
   

4. 路由出口，呈递视图，对应组件渲染DOM内容

5. 配置点击按钮: <router-link to="/page1"></router-link>

   router-link 就是a标签 to就是href vue进行优化后页面跳转不用打开新窗口了