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();
})
}
}
大公司建议内推。成功率高。
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的知识。
这一篇就是第三篇。