vue router的听课笔记

vue router的听课笔记

文章目录

  • vue router的听课笔记
    • 前言
    • 01获取DOM元素
    • 02给DOM元素添加事件的特殊情况
    • 03前端路由的原理
    • 04vue-router的基本使用
    • 05命名路由
    • 06路由参数
    • 07嵌套路由
    • 总结
    • 总结

前言

时长:2h

01获取DOM元素

Vue.conponent('subCom',{
template:'
'
})var App={ template:'
> <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:'
> <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:'
login
'
}; var Register={ template:'
register
'
}; //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> //login page //register page <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的听课笔记

这一篇就是第三篇。

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

Powered By Z-BlogPHP 1.7.3

Copyright www.122dh.com Rights Reserved.