vue事件修饰符
- stop 禁止冒泡
- once 只触发一次,单次事件
- prevent 组件默认事件
- native 启用原生事件(组件)
- keycode|name 筛选按键
- self
- capture
computed-计算属性
- 缓存-性能
- 方便
- 可读、写
- 属性的形式
1
2
3
4
5
6
7
8
9
10
11
12computed:{
name: {
get(){
<!-- 可读 -->
return this.value
},
set(value){
<!-- 可写 -->
this.value = value
}
}
}
watch-监听
- 监听属性,当属性改变触发事件
1
2
3
4
5watch:{
name(){
console.log('name变了')
}
}
vue-router
容器
1
<router-view><router-view>
跳转路由标签
1
<router-link to="/a"><router-link>
router函数操作
1
2
3
4
5
6
7
8
9
10this.$router.push()
// history是一个栈
push(string | object) // 入栈
replace(string | object) // 替换最后一个历史记录(当前)
go(int) // 前进后台
$route 获取路由信息
$router 控制路由跳转监视路由
1
2
3
4
5
6
7
8
9// 1.watch - 不推荐
简单-只能看不能操作
watch: {
$route(value, old_value){
console.log(value, old_value)
}
}
// 2.路由守卫路由表
1
2
3
4
5
6
7
8
9
10
11
12router = new VueRouter({
routes: [
{
path: '/a',
component: { template: '<div>我是组件a</div>' }
},
{
path: '/b',
component: { template: '<div>我是组件b</div>' }
}
]
})多视图
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<router-view name="header"><router-view>
<router-view><router-view>
<router-view name="footer"><router-view>
router = new VueRouter({
routes: [
{
path: '/a',
components: {
defaulte: {template: '<div>我是组件a</div>'},
header: {template: '<div>我是头部</div>'},
footer: {template: '<div>我是底部</div>'}
}
}
]
})路由嵌套
使用children1
2
3
4
5
6
7
8
9
10
11
12
13
14export default {
routes:[
{
path:'/index',
name:'index',
children:[
{
path:"/1",
component:{template:'<div>1111</div>'}
}
]
}
]
}