组件的嵌套
-
声明路由的时候设置children,这是children是一个数组,数组里是路由对象
-
这个children的组件就会渲染在它父组件的<router-view>中
<body>
<div id='app'>
<router-view></router-view>
</div>
<template id="father">
<div>
father
<!-- 在父组件中预留展示区域 -->
<router-view></router-view>
</div>
</template>
<template id="son">
<div>son</div>
</template>
<script>
let son = {
template: "#son"
};
let father = {
template: "#father"
};
const router = new VueRouter({
routes: [
{
path: "/",
redirect: "/home",
},
{
path: "/home",
component: father,
// 嵌套
children: [
// 不加/
{
path: "son",
component: son,
}
]
},
]
})
const vm = new Vue({
el: '#app',
data: {
},
methods: {
},
router,
})
</script>
</body>
命名视图
-
我们之前只能一个地址对应一个组件,现在可以一个地址对应多个组件
-
components属性设置的
-
给router-view设置名字,这个名字和components组件名字是对应的
-
设置默认值default对应组件可以设置名字也可以访问
<body>
<div id='app'>
<router-view></router-view>
<!-- router-view可以设置名字,指定渲染的组件 -->
<router-view name="son"></router-view>
<router-view name="son2"></router-view>
<router-view name="son3"></router-view>
</div>
<template id="father">
<div>
father
<!-- 预留展示区域 -->
<router-view></router-view>
</div>
</template>
<template id="son">
<div>son</div>
</template>
<template id="son2">
<div>二son</div>
</template>
<template id="son3">
<div>三son</div>
</template>
<script>
let son = {
template: "#son"
};
let son2 = {
template: "#son2"
};
let son3 = {
template: "#son3"
};
let father = {
template: "#father"
};
const router = new VueRouter({
routes: [
{
path: "/",
redirect: "/home",
},
{
path: "/home",
components: {
//通过default属性可以设置默认的组件,默认组件只有一个,不写名字也可以渲染
default: father,
son2: son2,
son3,
son
},
// 嵌套
children: [
// 不加/
{
path: "son",
component: son,
}
]
},
]
})
const vm = new Vue({
el: '#app',
data: {
},
methods: {
},
router,
})
</script>
</body>
计算属性和监听器
watch
监听data中属性的改变:
改变姓名
<body>
<div id='app'>
<input type="text" v-model:value="firstname">+
<input type="text" v-model:value="lastname">
<button>=</button>
<input type="text" v-model:value="fullname">
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
firstname: '',
lastname: '',
fullname: ''
},
methods: {},
// 监听
watch: {
// 参数是属性
//function(newVal,oldVal) 第一个参数是新数据,第二个参数是旧数据
"firstname": function () {
this.fullname = this.firstname + '-' + this.lastname;
},
"lastname": function () {
this.fullname = this.firstname + '-' + this.lastname;
}
}
})
</script>
</body>
Computed用法
<body>
<div id='app'>
<input type="text" v-model:value="firstname">+
<input type="text" v-model:value="lastname">
<button>=</button>
<input type="text" v-model:value="fullname">
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
firstname: '',
lastname: '',
// fullname: ''
},
methods: {},
computed: {
// 计算属性;
// 特点:当计算属性中任何一个 data 属性改变之后,
// 都会重新触发 本计算属性 重新计算,从而更新 fullName 的值
// fullname() {
// console.log(99999);
// return this.firstname + '-' + this.lastname;
// },
fullname: {
// 获取数据
get: function () {
console.log(9999);
return this.firstname + '-' + this.lastname;
},
// set 只有该编辑当前这个input才会改变
set: function (newVal) {
console.log(newVal);
console.log(newVal.split("-"));
this.firstname = newVal.split("-")[0]
this.lastname = newVal.split("-")[1]
}
}
}
})
</script>
</body>
method、computed和watch的区别
-
computed属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算。主要当作属性来使用,使用的时候不加();
-
methods方法表示一个具体的操作,主要书写业务逻辑;
-
watch一个对象,键是需要观察的表达式,值是对应回调函数。主要用来监听某些特定数据的变化,从而进行某些具体的业务逻辑操作;可以看作是computed和methods的结合体