聊聊对vue的理解
vue他是一个渐进式的js框架他易用 灵活,高效 可以把一个页面分成多个组件 当其他页面有类似功能时,直接让封装的组件复用 ,他是构建用户界面的声明式框架 只关心图层不关心是如何实现。
谈谈对生命周期的理解
****###### *生命周期有八个钩子函数 分别是 创建前后,挂在前后,更新前后,销毁前后
beForeCreate 是创建前 vue实例的挂载元素el和数据对象data 都是undefined还没有初始化那
created 是创建后 vue实力的数据对象data有了 可以访问里面的数据和方法了但是el还是么有 还没挂载到DOM上
deforeMount 挂载前 vue实例el和data初始化了但是挂载之前为虚拟的DOM节点
Mounted 挂载后 这个时候vue实例挂载到DOM上了 可以通过dom获取dom节点
beforeUpdate 更新前响应式数据更新是调用,适合在更新之前访问现有的DOW 比如手动移除已添加的事件监听器
updated 更新后 组成新的组件已经更新了在这里不要操作数据防止死循环
beforeDestroy 销毁前 实例销毁之前实例还是可以用的this还是可以获取实例的这里一般用于销毁定时器 解除事件
deforeDestroy 销毁后 所有的事件监听会被移除 所有的子实例都会销毁都不能用了
*###### ** ****** **
vue中 key 值的作用
简单地理解,无:key属性时,状态默认绑定的是位置;有:key属性时,状态根据key的属性值绑定到了相应的数组元素。 我们之所以要加上key是因为vue源码是内部数据驱动,通过改变数据进而达到改变视图的效果,加上key这样算法上容易定位到对应的元素,避免去遍历dom造成的性能的消耗
$route和$router的区别
$route 没有r 的是路由信息对象 就是获取路由的信息 包括path,params,hash,query,fullPath,matched,name等路由信息参数
$router带r的是路由实例 基本上用于路由的跳转方法 钩子函数等
vue-router守卫
导航守卫 全局前置守卫,路由独享守卫,组件内守卫
导航守卫 router.beforeEach 全局前置守卫
// main.js 入口文件
import router from './router'; // 引入路由
router.beforeEach((to, from, next) => {
next();
});
router.beforeResolve((to, from, next) => {
next();
});
router.afterEach((to, from) => {
console.log('afterEach 全局后置钩子');
});
路由独享守卫:可以在路由配置上直接定义beforeEnter守卫:
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
] })
组件内的守卫 你可以在路由组件内直接定义路由导航守卫
const Foo = {
template: ...,
beforeRouteEnter (to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不!能!获取组件实例 `this`
// 因为当守卫执行前,组件实例还没被创建
}, beforeRouteUpdate (to, from, next) {
// 在当前路由改变,但是该组件被复用时调用
// 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
// 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
}, beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用,我们用它来禁止用户离开
// 可以访问组件实例 `this`
// 比如还未保存草稿,或者在用户离开前,
将setInterval销毁,防止离开之后,定时器还在调用。
} }
axios是什么 咋使用? 描述用它实现登录的流程
$ npm i axios -S装好
需在配置文件中config/index.js进行设置。后台如果是Tp5则定义一个资源路由。 js中使用import进来,然后.get或.post。返回在.then函数中如果成功,失败则是在.catch函数中
vue修饰符
stop阻止事件的冒泡
prevent 阻止事件的默认行为
once只触发一次
self 触发自己的时间行为才会执行
Vue组件间的参数传递
父子组件传值
父给子传 通过props方法接受数据
子给父传 $emit 方法传递参数
兄弟组件传值**
eventBus 就是创建一个事件中心 相当于中转站 用它来传递事件和接受事件小项目用这个 也可以用vuex
v-if 和 v-show 区别
-
v-if按照条件是否渲染,v-show是display的block或none**