sweida / gitblog

3 stars 0 forks source link

vue 知识点总结 #3

Open sweida opened 6 years ago

sweida commented 6 years ago

1、active-class是哪个组件的属性?嵌套路由怎么定义?

答:vue-router模块的router-link组件。 

2、怎么定义vue-router的动态路由?怎么获取传过来的动态参数?

答:在router目录下的index.js文件中,对path属性加上/:id。  使用router对象的params.id

3、vue-router有哪几种导航钩子?

答:三种,一种是全局导航钩子:router.beforeEach(to,from,next),作用:跳转前进行判断拦截。第二种:组件内的钩子;第三种:单独路由独享组件

4、scss是什么?在vue.cli中的安装使用步骤是?有哪几大特性?

答:css的预编译。把css当前函数编写,定义变量,嵌套

使用步骤: 第一步:用npm 下三个loader(sass-loader、css-loader、node-sass) 第二步:在build目录找到webpack.base.config.js,在那个extends属性中加一个拓展.scss 第三步:还是在同一个文件,配置一个module属性 第四步:然后在组件的style标签加上lang属性 ,例如:lang=”scss”

有哪几大特性: 1、可以用变量,例如($变量名称=值); 2、可以用混合器,例如() 3、可以嵌套

5、mint-ui是什么?怎么使用?说出至少三个组件使用方法?

答:基于vue的前端组件库。npm安装,然后import样式和js,vue.use(mintUi)全局引入。在单个组件局部引入:import {Toast} from ‘mint-ui’。组件一:Toast(‘登录成功’);组件二:mint-header;组件三:mint-swiper

6、v-model是什么?怎么使用? vue中标签怎么绑定事件?

答:可以实现双向绑定,指令(v-class、v-for、v-if、v-show、v-on)。vue的model层的data属性。绑定事件:<input @click=doLog() />

7、vuex是什么?怎么使用?哪种功能场景使用它?

答:vue框架中状态管理。 在main.js引入store,注入。新建了一个目录store,….. export 。 场景有:单页应用中,组件之间的状态。音乐播放、登录状态、加入购物车

8、mvvm框架是什么?它和其它框架(jquery)的区别是什么?哪些场景适合?

答:一个model+view+viewModel框架,数据模型model,viewModel连接两个 区别:vue数据驱动,通过数据来显示视图层而不是节点操作。 场景:数据操作比较多的场景,更加便捷

9、自定义指令(v-check、v-focus)的方法有哪些?它有哪些钩子函数?还有哪些钩子函数参数?

答:全局定义指令:在vue对象的directive方法里面有两个参数,一个是指令名称,另外一个是函数。组件内定义指令:directives 钩子函数:bind(绑定事件触发)、inserted(节点插入的时候触发)、update(组件内相关更新) 钩子函数参数:el、binding

10、请详细说下你对vue生命周期的理解?

答:总共分为8个阶段创建前/后,载入前/后,更新前/后,销毁前/后。 创建前/后: 在beforeCreated阶段,vue实例的挂载元素$el和数据对象data都为undefined,还未初始化。在created阶段,vue实例的数据对象data有了,$el还没有。

载入前/后:在beforeMount阶段,vue实例的$el和data都初始化了,但还是挂载之前为虚拟的dom节点,data.message还未替换。在mounted阶段,vue实例挂载完成,data.message成功渲染。

更新前/后:当data变化时,会触发beforeUpdate和updated方法。

销毁前/后:在执行destroy方法后,对data的改变不会再触发周期函数,说明此时vue实例已经解除了事件监听以及和dom的绑定,但是dom结构依然存在

11、你是怎么认识vuex的?

答:vuex可以理解为一种开发模式或框架。比如PHP有thinkphp,java有spring等。 通过状态(数据源)集中管理驱动组件的变化(好比spring的IOC容器对bean进行集中管理)。

应用级的状态集中放在store中; 改变状态的方式是提交mutations,这是个同步的事物; 异步逻辑应该封装在action中。