监听data 中的数据
watch: 在vue中表示监听的意思 , 我们可以使用watch来响应数据的变化 监听data 中的数据
watch: {
//监听data 中的数据
// 单引号 '' 可以省略 -> name(newValue){...}
'name'(newValue,oldValue){
console.log(oldValue,'<===原来 to 新===>',newValue)
}
}
使用监听器
watch: 监听器 , 可以监听某个属性.基本格式 : function(newVal , oldVal)
init
<div id="app">
<!--
分析：如果使firstName和lastName被修改时，同步修改fullName？
-->
<input type="text" v-model="firstName">
<input type="text" v-model="lastName">
<input type="text" v-model="fullName">
</div>
01 监听器watch
<script>
var vue = new Vue({
el: '#app',
data: {
firstName: '',
lastName: '',
fullName: ''
},
methods: {
// 第一种方式：给前两个表单加上键盘抬起事件。当触发事件时，拼接两个name，为fullName赋值。
handlerFullName() {
this.fullName = this.firstName + this.lastName
}
},
watch: { // 监听器，可以监听某个属性
'firstName': function(newVal, oldVal) { // 格式：要监听的属性:function(newVal, oldVal)
this.fullName = newVal + this.lastName
},
// 使用监听器，可以直接对属性进行监听，不需要去监听用户的操作。使开发者只关注Model，不关注View
'lastName': function(newVal, oldVal) {
this.fullName = this.firstName + newVal
}
}
})
</script>
监听路由
var vue = new Vue({
el: '#app',
data: {
},
router: routerObj,
watch: {
'$route.fullPath': function(newVal, oldVal) {
// 监听路由去执行对应的逻辑
// 应用场景:监听路由的url是否为登录url.如果不是,校验用户是否登录,未登录的情况下跳转到登录页
console.log('用户路由跳转，url为：', newVal)
}
}
})
编程路由导航
var vue = new Vue({
el: '#app',
data: {
},
methods: {
toLogin() {
// 编程式导航：通过代码去操作路由
// this.$router.push('/login')
// 编程式路由如何传递参数
this.$router.push({
path: '/login',
params: {id: '2121', name: '呵呵'}
})
}
}
- 通过 路由配置的
Name属性,this.$router.push({ name: 'User', params: { id: 56 } }) - 通过 path 路径的方式传递使用
query
- 1 直接在路由中传参
this.$router.push({ path: /childPage/${id}, })
需要对应路由配置如下：
{
path: '/childPage/:id',
name: 'childPage',
component: childPage
}
获取参数：this.$route.parames.id
- 通过路由属性中的name来确定匹配的路由，通过params来传递参数
this.$router.push({ name: 'childPage', params: { id: id } })
需要对应路由配置如下：
{
path: '/childPage',
name: 'childPage',
component: childPage
}
- 3)使用path来匹配路由，然后通过query来传递参数
this.$router.push({ path: '/childPage', query: { id: id } })
需要对应路由配置如下：
{
path: '/childPage',
name: 'childPage',
component: childPage
}
- 获取参数：
this.$route.query.id
watch Object
- 监听对象
watch: {
tobj:{
handler(new_value,old_value){
console.log(new_value,old_value)
},
deep: true
}
}