-
active-class
是哪个组件的属性?嵌套路由怎么定义?
答:active-class
是vue-router
模块的router-link
组件 -
怎么定义
vue-router
的动态路由?怎么获取传过来的动态参数?
答:在router
目录下的index.js
文件中,对path
属性加上/:id
, 获取传过来的动态参数通过使用router
对象的params.id
-
vue-router
有哪几种导航钩子?
答:vue-router
有三种导航钩子,一种是全局导航钩子:router.beforeEach(to,from,next)
,作用是跳转前进行判断拦截;第二种:组件内的钩子;第三种:单独路由独享组件 -
scss
是什么?安装使用的步骤是?有哪几大特性?
答:预处理css
,把css
当前函数编写,定义变量,嵌套。 先装css-loader
、node-loader
、sass-loader
等加载器模块,在webpack-base.config.js
配置文件中加多一个拓展extenstion
,再加多一个模块:module
里面test
、loader
-
scss
是什么?在vue.cli
中的安装使用步骤是?有哪几大特性?
答:scss是css的预编译。
-
在vue.cli中的安装使用步骤是:
第一步:用npm
下三个loader
(sass-loader
、css-loader
、node-sass
)
第二步:在build
目录找到webpack.base.config.js
,在那个extends
属性中加一个拓展.scss
第三步:还是在同一个文件,配置一个module
属性
第四步:然后在组件的style
标签加上lang
属性 ,例如:lang=”scss”
-
有哪几大特性:
- 可以用变量,例如
($变量名称=值);
- 可以用混合器,例如()
- 可以嵌套
- 可以用变量,例如
-
mint-ui
是什么?怎么使用?说出至少三个组件使用方法?
答:基于vue
的前端组件库。npm
安装,然后import
样式和js
,vue.use(mintUi)
全局引入。在单个组件局部引入:import {Toast} from ‘mint-ui’
。
组件一:Toast(‘登录成功’);
组件二:mint-header;
组件三:mint-swiper
-
v-model
是什么?怎么使用?vue
中标签怎么绑定事件?
答:可以实现双向绑定,指令(v-class、v-for、v-if、v-show、v-on)
。vue
的model
层的data
属性。绑定事件:<input @click=doLog() />
-
axios+tp5
进阶中,调用axios.post(‘api/user’)
是进行的什么操作?axios.put(‘api/user/8′)
呢?
答:跨域,添加用户操作,更新操作。 -
什么是
RESTful API
?怎么使用?
答:是一个api
的标准,无状态请求。请求的路由地址是固定的,如果是tp5
则先路由配置中把资源路由配置好。标准有:.post .put .delete
-
vuex
是什么?怎么使用?哪种功能场景使用它?
答:vue
框架中状态管理。在main.js
引入store
,注入。新建了一个目录store
,….. export
。场景有:单页应用中,组件之间的状态,音乐播放、登录状态、加入购物车
11.mvvm
框架是什么?它和其它框架(jquery
)的区别是什么?哪些场景适合?
答:一个model+view+viewModel
框架,数据模型model
,viewModel
连接两个
区别:vue
数据驱动,通过数据来显示视图层而不是节点操作。
场景:数据操作比较多的场景,更加便捷。
-
自定义指令
(v-check、v-focus)
的方法有哪些?它有哪些钩子函数?还有哪些钩子函数参数?
答:全局定义指令:在vue
对象的directive
方法里面有两个参数,一个是指令名称,另外一个是函数。组件内定义指令:directives
钩子函数:bind
(绑定事件触发)、inserted
(节点插入的时候触发)、update
(组件内相关更新)
钩子函数参数:el
、binding
-
说出至少4种
vue
当中的指令和它的用法?
答:v-if
:判断是否隐藏;v-for
:数据循环出来;v-bind:class
:绑定一个属性;v-model
:实现双向绑定 -
vue-router
是什么?它有哪些组件?
答:vue
用来写路由一个插件,组件有router-link、router-view
-
导航钩子有哪些?它们有哪些参数?
答:导航钩子有:全局钩子和组件内独享的钩子。beforeRouteEnter
、afterEnter
、beforeRouterUpdate
、beforeRouteLeave
参数:有to
(去的那个路由)、from
(离开的路由)、next
(一定要用这个函数才能去到下一个路由,如果不用就拦截)最常用就这几种 -
Vue
的双向数据绑定原理是什么?
答:vue.js
是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()
来劫持各个属性的setter
,getter
,在数据变动时发布消息给订阅者,触发相应的监听回调。具体步骤:
第一步:需要observe
的数据对象进行递归遍历,包括子属性对象的属性,都加上setter
和getter
。这样的话,给这个对象的某个值赋值,就会触发setter
,那么就能监听到了数据变化
第二步:compile
解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知,更新视图
第三步:Watcher
订阅者是Observer
和Compile
之间通信的桥梁,主要做的事情是在自身实例化时往属性订阅器(dep)
里面添加自己,自身必须有一个update()
方法,待属性变动dep.notice()
通知时,能调用自身的update()
方法,并触发Compile
中绑定的回调,则功成身退
第四步:MVVM
作为数据绑定的入口,整合Observer
、Compile
和Watcher
三者,通过Observer
来监听自己的model
数据变化,通过Compile
来解析编译模板指令,最终利用Watcher
搭起Observer
和Compile
之间的通信桥梁,达到数据变化 -> 视图更新;视图交互变化(input)
-> 数据model
变更的双向绑定效果 -
请详细说下你对
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
结构依然存在
-
请说下封装
vue
组件的过程?
答:首先,组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块,解决了我们传统项目开发:效率低、难维护、复用性等问题。然后,使用Vue.extend
方法创建一个组件,然后使用Vue.component
方法注册组件。子组件需要数据,可以在props
中接受定义。而子组件修改好数据后,想把数据传递给父组件。可以采用emit
方法。 -
你是怎么认识
vuex
的?
答:vuex
可以理解为一种开发模式或框架。比如PHP
有thinkphp
,java有spring
等。
通过状态(数据源)集中管理驱动组件的变化(好比spring
的IOC
容器对bean
进行集中管理)。
应用级的状态集中放在store
中; 改变状态的方式是提交mutations
,这是个同步的事物; 异步逻辑应该封装在action
中。 -
vue-loader
是什么?使用它的用途有哪些?
答:解析.vue
文件的一个加载器,跟template/js/style
转换成js
模块。
用途:js
可以写es6
、style
样式可以scss
或less
、template
可以加jade
等 -
请说出
vue.cli
项目中src
目录每个文件夹和文件的用法?
答:assets
文件夹是放静态资源;components
是放组件;router
是定义路由相关的配置;view
视图;app.vue
是一个应用主组件;main.js
是入口文件 -
vue.cli
中怎样使用自定义的组件?有遇到过哪些问题吗?
答:
第一步:在components
目录新建你的组件文件(smithButton.vue)
,script
一定要export default {}
第二步:在需要用的页面(组件)中导入:import smithButton from ‘../components/smithButton.vue’
第三步:注入到vue
的子组件的components
属性上面,components:{smithButton}
第四步:在template
视图view
中使用,<smith-button> </smith-button>
问题有:smithButton
命名,使用的时候则smith-button
。 -
聊聊你对
Vue.js
的template
编译的理解?
答:简而言之,就是先转化成AST
树,再得到的render
函数返回VNode
(Vue
的虚拟DOM
节点)
详情步骤:
- 首先,通过
compile
编译器把template
编译成AST
语法树(abstract syntax tree
即源代码的抽象语法结构的树状表现形式),compile
是createCompiler
的返回值,createCompiler
是用以创建编译器的。另外compile
还负责合并option
。 - 然后,
AST
会经过generate
(将AST
语法树转化成render funtion
字符串的过程)得到render
函数,render
的返回值是VNode
,VNode
是Vue
的虚拟DOM
节点,里面有(标签名、子节点、文本等等)。