一、数据监视 watch （handler immediate deep）
数据监视是vue自身提供的方法，监控某一条数据，一旦该条数据发生了改变，立马执行监视数据，并可以获取改变前后的值。
通过案例学习。
效果如下：
GIF.gif
按钮每次点击分数对应变化。
注意点：
①：数据写在对象中。
②：watch中采用数据监听，在执行handler方法。
③：immediate:true 在定义数据时就执行handler函数，若不写则在数据发生改变时才执行函数
④：原生功能js影响，在obj中的数据，需要深度监听，（obj，arr需要深拷贝。js原理）
代码如下：
<body>
<div id="app">
<p>{{msg}}</p>
<p>{{obj.score}}</p>
<button @click = "add()">分数+10</button>
<button @click = "del()">分数-10</button>
</div>
</body>
<script src="./js/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
msg:"及格", //定义初始分数评价
obj:{score:60}, //对象形式定义初始分数
arr:["不及格","及格","优秀"] //判断定义评价值
},
methods:{
add(){
this.obj.score += 10;
},
del(){
this.obj.score -= 10;
}
},
/* watch
将数据和函数进行绑定。
只要数据发生变化，立马触发对应函数handler。
handler两个参数，改变后的值和改变前的值。
*/
watch:{
/* 对应data中数据 绑定函数 */
obj:{
handler(newval,odlval){
if(newval.score>=90){
this.msg = this.arr[2]
}else if(newval.score>=60){
this.msg = this.arr[1]
}else{
this.msg = this.arr[0]
}
},
/* 在定义数据时就执行handler函数，若不写则在数据发生改变时才执行函数 */
immediate:true,
/* 原生功能js影响，在obj中的数据，需要深度监听（参考深拷贝和浅拷贝） */
deep:true
}
}
})
</script>
二、生命周期
生命周期：即元素从创建到注销的过程。
为什么要学习生命周期？
按照以前的学习方法，在调用vue之前，执行ajax，是不合理的，所以内容分时段执行。
<script>
let vm = new Vue({
el:"#app",
data:{
mes:"我是mes"
},
beforeCreate(){
console.log("创建前")
},
created(){
console.log('created')
},
beforeMount(){
console.log('在挂载开始之前被调用')
},
mounted(){
console.log("mouted")
},
beforeUpdate(){
console.log("beforeUpdate")
},
update(){
console.log("update")
},
beforeDestroy(){
console.log('beforeDestroy')
},
destroyed(){
console.log('destroyed')
}
})
/*
vm.$destroy()注销组件
*/
</script>
- beforeCreate 通常在这个方法里面写一些loading事件，配合promise等ES6语法，向后端发送请求也写在这里。
2.created里面执行一些函数的初始化，对象的初始化等等。
3.boforeMount 在这里，我们通常结合promise拿去后端数据。
- beforeDestroy 确认删除之类。
5.destroted 删除报告。
-
1.什么是vue生命周期
Vue 实例从创建到销毁的过程，就是生命周期。
从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程 -
2.声明周期的作用是什么
它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。 -
3.总共几个阶段
8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/销毁后 -
4.第一次加载页面会执行触发哪些钩子函数
beforeCreate created beforeMount mounted -
5.DOM渲染是在哪个周期中完成
mounted -
6.简单说一下每个周期适合的场景
beforecreate : 可以在这加个loading事件 在加载实例时触发
created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用
mounted : 挂载元素，获取到DOM节点
updated : 如果对数据统一处理，在这里写上相应函数
beforeDestroy : 可以做一个确认停止事件的确认框
nextTick : 更新数据后立即操作dom
三、路由
根据用户不同的请求，反馈给用户不同的内容。
页面有一个个组件构成。在不刷新页面的情况下，根据不同的请求，显示不同的组件。
好处：
1.更加贴合模块化开发。
2.性能更高，选择性加载数据。
3.可控性高，根据用户需求，实时刷新更改页面。
GIF.gif
①：创建模板
<template id="tem1">
<div>
<p>1</p>
</div>
</template>
<template id="tem2">
<div>
<p>2</p>
</div>
</template>
<template id="tem3">
<div>
<p>3</p>
</div>
</template>
②：在挂载元素中使用router-link实现页面跳转，通过router-view标签显示路由
其本质为a标签，vue封装了一下
<div id="app">
<div>
<router-link to='/p1'>路由一</router-link>
<router-link to='/p2'>路由二</router-link>
<router-link to='/p3'>路由三</router-link>
</div>
<div>
<!-- 通过router-view标签，专门用来显示路由 -->
<router-view></router-view>
</div>
</div>
③：构造组件
const t1 = Vue.extend({
template:"#tem1"
})
const t2 = Vue.extend({
template:"#tem2"
})
const t3 = Vue.extend({
template:"#tem3"
})
④：定义路由并注册对应组件，配置跟路由为页面加载时显示内容。
const routes = [
{path:"/p1",component:t1},
{path:"/p2",component:t2},
{path:"/p3",component:t3},
/* 配置根路由 */
{path:"/",redirect:"p1"}
]
⑤：实例化路由 new VueRouter
const router = new VueRouter({
routes:routes
})
⑥：挂载组件
new Vue({
el:'#app',
router:router
})
四、嵌套路由
和路由大同小异。
在定义路由时添加进子组件的注册即可
const routes = [
{path:"/p1",component:t1,children:[
{path:"c1",component:c1},
{path:"c2",component:c2},
{path:"/",redirect:"c1"}
]},
{path:"/p2",component:t2},
/* 配置根路由 */
{path:"/",redirect:"p1"}
]
GIF.gif
网友评论