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 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。unbind：只调用一次，指令与元素解绑时调用。
-
-
配置路由
-
配置组件模板
-
配置路由
let router = new VueRouter({ routes :[ {path:路径名,component:组件名} ] }); -
挂载路由
new Vue({ el: "#app", router //挂载路由 }) -
路由出口，呈递视图，对应组件渲染DOM内容
-
配置点击按钮:
<router-link to="/page1"></router-link><mark>router-link 就是a标签 to就是href vue进行优化后页面跳转不用打开新窗口了</mark>
投递美团等公司10个岗位 >
查看30道真题和解析
