Bootstrap

Vue 组件 和 路由

1.组件

组件与组件之间传递数据
vm实例中的data中的变量msg
组件自定义标签中绑定 :title=”msg”
组件配置中增加 props:[‘title’]

template: '<h1>{{title}}</h1>'

这样就设置好了组件

2.生命周期

指vue实例或者组件从开始到结束的每一个阶段

钩子函数
beforeCreate
在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用
created
在实例创建完成后被立即调用
beforeMount
在挂载开始之前被调用:相关的 render 函数首次被调用
该钩子在服务器端渲染期间不被调用
mounted
el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子
beforeUpdate
数据更新时调用
updated
由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子
beforeDestroy
实例销毁之前调用
在这一步,实例仍然完全可用
destroyed
Vue 实例销毁后调用
调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁

3.window.onhashchange

当浏览器地址栏的哈希值发生改变的时候触发

4.路由

单页应用
效率高,用户体验好
使用锚点决定显示哪个组件

<a href="#/aaa"></a>
    hashchanged
    location.hash

路由重定向 redirect
路由地址 ‘/xxx/:yyy’
this.#route.params.yyy
动态路由
定义路由组件
定义路由
实例化路由对象
props传值

5.侦听器

1.监听data中定义的属性

watch:{
    msg:functionnew,old){} //当msg变化就会触发函数

没有return值,不会缓存数据

2.监听路由对象$route

;