生命周期
-
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>
router-link 就是a标签 to就是href vue进行优化后页面跳转不用打开新窗口了