vue router的听课笔记

vue router的听课笔记

前言

时长：2h

01获取DOM元素

Vue.conponent('subCom',{
template:'<div></div>'
})

var App={
template:'<div class='app'>
<button ref='btn'>我是按钮1</button>
<button ref='bt2'>我是按钮2</button>
</div>',
created(){console.log(this.$refs.btn)};
},
beforeMount:function(){console.log(this.$refs.btn);},
mounted(){
//如果给标签绑定ref='xxx'属性，使用this.$refs.xxx获取原生的jsDOM对象
//ref属性值不能重名
console.log(this.$refs.btn);
console.log(this.$refs.btn2);
}

02给DOM元素添加事件的特殊情况

var App={
data(){
return{isShow:false}
},
template:'<div class='app'>
<input type="text"v-show='isShow'ref='input'/>
</div>'
mounted(){
this.isShow=true;
console.log(this.$refs.input);
//$nextTick()
//是在DOM更新循环结束之后执行回调函数，在修改数据之后使用此方法在回调中获取到更新之后的DOM
this.$nextTick(()=>{
    console.log(this);
   // console.log(this.$refs.input);
    this.$refs.input.focus();
})
}
}

大公司建议内推。成功率高。

路由vue router的官方教程

Java转Python会很轻松。

03前端路由的原理

<--路由实现：
（1）传统开发方式url改变后，立刻发生请求响应整个页面，有可能资源过多，传统开发会让页面出现白屏
（2）SPA单页面应用single page Application
瞄点值改变后不会立刻发送请求，二是在某个合适的时机，发送ajax请求，页面局部渲染
优点：页面不立刻跳转 用户体验好
vue angular react
-->

04vue-router的基本使用

//1引入vue的模块
//2引入vue-router的模块
//3让vue使用VueRouter创建。Vue.use(VueRouter);
var Login={
template:'<div>login</div>'
};
var Register={
template:'<div>register</div>'
};
//4创建VueRouter对象
//5匹配路由对象
var router =new VueRouter({
routes:[//路由匹配的规则{
path:"/login",
component:Login},
{
path:"register",
component:Register
},
]
});
//引入vue-router模块，抛出两个全局组件，
//router-link==>a
//to==>href
//router-view==>路由匹配组件的出口
var App={
template:'
<div>
//<a href="">login page</a>
//<a href="">register page</a>
<router-link to="/login">login page</router-link>
<router-link to="/register">register page</router-link>
<router-view></router-view>
</div>
'
}

new Vue({
el:"#app",
data(){return}
},
components:{
App
},)

05命名路由

//
<router-link:to="{name:'login'}">login page</router-link>
<router-link:to="{name:'login'}">register page</router-link>
<router-view></router-view>

06路由参数

//地址栏上 路由范式
//1xxxx.html#/user/1 params 动态路由参数
//2oooo.html#user?userId=1 查询

07嵌套路由

//
routes:[
    {
        path:"/home",
        name:'home',
        component:Home,
        children:[
            {
                path:'song',
                component:Song
            },
            {
                path:'movie',
                component:Movie
            },
        ]
    }
]

总结

1组件通信

（1）props $emit解决父子组件层级较少的情况

（2）$attrs $listeners解决组件嵌套多层关系

（3）中央事件总线$bus new Vue()

$on() $emit挂载的同一个实例化对象 解决兄弟组件传值

（4）vuex的流程图

2生命周期的图示

3路由的使用

3.1引入包（两个全局的组件 router-link to 属性 router-view（匹配路由组件的出口））

3.2创建实例化VueRouter对象

3.3匹配路由规则

3.4挂载new Vue()实例化对象

给vue实例化对象挂载了两个对象 this.$router(它就是VueRouter)this.route()

命名路由

绑定自定义属性：to="{name:‘路由的名字’}"

路由的参数

path:’/user/:id

:to ="{name:‘user’,params:{id:1}}"

path:’/user’

:to="{name:‘user’,query:{userId:1}}"

嵌套路由（应用 子的路由是不同的页面结果）

/home/music==>home/movie

一个router-view中嵌套另外一个router-view

总结

这一部分跳着听的，不过学好了使用vue router的官网。多照葫芦画瓢，应该就可以孰能生巧了。

这一部分视频听得还可以，至少顺了一遍vue router的知识。

vue基础1的听课笔记

vue基础2的听课笔记

这一篇就是第三篇。