请简述什么是Vue。
Vue(读音/Vjuː/,类似于View)是一套用于构建用户界面的渐进式框架,与其他大型框架相比,Vue被设计为可以自底向上逐层应用。
其他大型框架往往一开始就对项目的技术方案进行强制性的要求,而Vue更加灵活,开发者既可以选择使用Vue来开发一个全新项目,也可以将Vue引入到一个现有的项目中。
Vue;两大特点:响应式编程,组件化
请简述Vue优势有哪些?
1.轻量级: Vue相对简单、直接,所以Vue使用起来更加友好。
2.数据绑定: Vue是一个MVVM框架,即数据双向绑定。
3.指令: 指令主要包括内置指令和自定义指令,以“v-”开头,作用于HTML元素。
4.插件: 插件用于对Vue框架功能进行扩展,通过MyPlugin.install完成插件的编写,简单配置后就可以全局使用。
请列出Vue指令常用内部指令,至少6个。
v-model:双向数据绑定
v-on:监听事件
v-bind:单向数据绑定
v-text:插入文本内容
v-html:插入包含HTML的内容
v-for:列表渲染
v-if:条件渲染
v-show:显示隐藏
请简述什么是Vue组件化开发。
1.在Vue中,组件是构成页面中独立结构单元,能够减少重复代码的编写。
2.提高开发效率,降低代码之间的耦合程度,使项目更易维护和管理。
3.组件主要以页面结构形式存在,不同组件也具有基本交互功能,根据业务逻辑实现复杂的项目功能。
请简单列举并说明路由对象包括哪些属性。
this.r o u t e r , 全 局 路 由 对 象 t h i s . router,全局路由对象 this.router,全局路由对象this.route,当前路由对象
$route.path
$route.query:{key : value} URL 查询参数
$route.params:{key : value} 路由转跳携带参数
$route.hash:在 history 模式下获取当前路由的 hash 值(有 # 的那种)
$route.fullPath:完成解析后的URL,包含查询参数和 hash 的完整路径
$route.name
$route.matched:路由记录,当前路由下路由声明的所有信息,从父路由(如果有)到当前路由为止
$route.redirectedFrom:若有重定向,即为重定向来源的路由
简述Vuex配置对象中的主要配置选项及作用。
1). actions:用来定义事件处理方法,用于处理 state 数据
2). mutations:选项中的事件处理方法接收 state 对象作为参数,即初始数据
3). getters:store 实例允许在 store 中定义 getters 计算属性,类似于 Vue 实例的 computed
4). modules:modules 用来在 store 实例中定义模块对象
5). plugins:Vuex 中的插件配置选项为 plugins,插件本身为函数
6). devtools:store 实例配置中的 devtools 选项用来设置是否在 devtools 调试工具中启用 Vuex,默认值为 true,表启用
简述Vuex中的actions的含义。
actions 选项用来定义事件处理方法,用于处理 state 数据。actions 类似于 mutations,不同之处在于 actions 是异步执行的,事件处理函数可以接收 {commit} 对象,完成 mutation 提交,从而方便 devtools 调试工具跟踪状态的 state 变化。
在使用时,需要在 store 仓库中注册 actions 选项,在里面定义事件处理方法。事件处理方法接收 context 作为第1个参数,payload 作为第 2 个参数(根据需要进行选择)。
简单描述使用Vue CLI 3创建项目的步骤。
打开命令行工具,切换到项目根目录,执行以下指令来创建项目:
vue create hello-vue(项目名)
在交互界面中,选择手动配置项,进行配置
项目创建完成后,执行以下命令进去项目目录:
cd hello-vue
执行命令,启动项目
npm run server
列举几个钩子函数(生命周期)并说明作用
1.beforeCreate 创建实例对象之前执行
2.created 创建实例对象之后执行
3.beforeMount 页面挂载成功之前执行
4.mounted 页面挂载成功之后执行
5. beforeUpdate 组件更新之前执行
6.Update 组件更新之后执行
7.beforeDestory 实例销毁之前执行
8.Destory 实例销毁之后执行
简述什么是组件,特点是什么
组件:在Vue中,组件是构成页面中独立结构单元,组件主要以页面结构形式存在,不同组件也具有基本交互功能。
组件特性:
能够减少重复代码的编写,提高开发效率。
降低代码之间的耦合程度,使项目更易维护和管理。
根据业务逻辑实现复杂的项目功能。
列举几个事件修饰符,并说明
1…enter/.page-down/.shift…… 按键修饰符
2…stop 阻止事件冒泡
3…prevent 阻止默认事件行为
4…capture 事件捕获
5…self 将事件绑定到自身,只有自身才能触发
6…once 事件只触发一次
事件冒泡
父元素和子元素分别绑定一个单击事件;
单击子元素,先触发子元素的单击事件,然后触发父元素的单击事件,这种情况叫冒泡;
v-on:click.stop 作用是阻止冒泡事件。即单击子元素时不会再触发父元素的单击事件。
若子元素是一个链接,它具有默认行为是跳转到指定界面,
v-on:click.prevent 作用是阻止默认行为。
2.定义组件。
3.注册组件
Vue.component(‘login’,loginTemplate);
Vue.component(‘注册名’,组件名);
4.定义路由对象。
var myrouter = new VueRouter({})
var 路由对象名 = new VueRouter({})
5.定义路由匹配规则
定义路由匹配规则 routes:[]
每条路由规则是一个对象,格式{path:xx,component:组件名}
path表示监听哪个路由链接地址
component表示该path对应哪个组件模板
【注意】component后面是【组件】,而不是组件的【注册名称】
6.注册路由
在Vue实例中router:myrouter(路由对象名)
7.使用路由展示组件
.路由传参
1.params传参
2.Query传参
Vue 父子组件间的参数传递是如何做到的?
父组件向子组件传值:
1)子组件在props中创建一个属性,用来接收父组件传过来的值;
2)在父组件中注册子组件;
3)在子组件标签中添加子组件props中创建的属性;
4)把需要传给子组件的值赋给该属性
子组件向父组件传值:
1)子组件中需要以某种方式(如点击事件)的方法来触发一个自定义的事件;
2)将需要传的值作为$emit的第二个参数,该值将作为实参传给响应事件的方法;
3)在父组件中注册子组件并在子组件标签上绑定自定义事件的监听。
导航钩子函数有哪些?它们有哪些参数?
导航钩子有:a/全局钩子和组件内独享的钩子。b/beforeRouteEnter、afterEnter、beforeRouterUpdate、beforeRouteLeave
参数:有to(去的那个路由)、from(离开的路由)、next(一定要用这个函数才能去到下一个路由,如果不用就拦截)
双向绑定的含义
把Model绑定到View的同时,也将View绑定到Model上。这样,当更新Model时,View就会自动更新;反之,如果用户更新了View,Model的数据也自动被更新了。
v-bind绑定value属性的值;
v-on绑定input事件监听到函数中,函数会获取最新的值赋值到绑定的属性中;
Vshow和Vif的区别
1、功能上:computed是计算属性,watch是监听一个值的变化,然后执行对应的回调。
2、是否调用缓存:computed中的函数所依赖的属性没有发生变化,那么调用当前的函数的时候会从缓存中读取,而watch在每次监听的值发生变化的时候都会执行回调。
3、是否调用return:computed中的函数必须要用return返回,watch中的函数不是必须要用return。
4、computed默认第一次加载的时候就开始监听;watch默认第一次加载不做监听,如果需要第一次加载做监听,添加immediate属性,设置为true(immediate:true)。
5、使用场景:computed----当一个属性受多个属性影响的时候,使用computed-----用户名展示、列表展示、购物车商品结算。watch–当一条数据影响多条数据的时候,使用watch-----搜索框。
计算属性和函数的区别
函数:每次调用都会执行(如果数据经常发生变化,推荐使用)
计算属性:只要返回的结果没有发生变化,计算属性就只会被执行一次(如果数据不经常变化,推荐使用)函数"不会"将计算的结果缓存起来, 每一次访问都会重新求值 2.2计算属性"会"将计算的结果缓存起来, 只要数据没有发生变化, 就不会重新求值
vue生命周期
- 创建期间的生命周期函数:
- beforeCreate:实例刚在内存中被创建出来,此时,还没有初始化好
data
和methods
属性 - created:实例已经完成了模板的编译,但是还没有挂载到页面中
- beforeMount:此时已经完成了模板的翻译,但是还有完全挂载到页面中
- mounted:此时,已经将编译好的模板,挂载到了页面指定的容器中显示
- beforeCreate:实例刚在内存中被创建出来,此时,还没有初始化好
- 运行期间的生命周期函数:
- beforeUpdate:状态更新之前执行此函数,此时 data 中的状态值是最新的,但是界面上显示的数据还是旧的,因为此时还没有开始重新渲染DOM节点
- updated:实例更新完毕之后调用次函数,此时 data 中的状态值 和 界面上显示的数据,都已经完成了更新,界面已经被重新渲染好了
- 销毁期间的生命周期函数:
- beforeDestroy:实例销毁之前调用,在这一步,实例仍然完全可用
- 当执行 beforeDestroy 钩子函数的时候,Vue实例就已经从运行阶段进入到了销毁阶段;当执行 beforeDestroy 的时候,实例身上所有的 data 和所有的 methods, 以及 过滤器、指令、、 都处于可用状态,此时,还没有真正执行销毁的过程
- destroyed:Vue 实例销毁后调用。调用后,vue 实例 指示的所有东西都会解绑,所有的事件监听器会被移除,所有的子实例也会被销毁
- beforeDestroy:实例销毁之前调用,在这一步,实例仍然完全可用
组件传值
父传子 (自定义属性–props)
父组件向子组件传值,通过自定义属性的方式进行传值,在子组件中用 props 定义自定义属性,然后在父组件中通过 v-bind 指令把需要传递的数据绑定在子组件上,那在子组件中 props 里面的自定义属性可以直接使用
子传父 (自定义事件–this.$emit)
子组件向父组件传数据使用自定义事件,vue 组件为我们提供了一个 $emit
方法,使用方式 (this.$emit('自定义事件名', 传递的数据)
),子组件传递数据时,触发相应的事件函数,就会自动触发通过 $emit
给父组件绑定的自定义事件,自定义事件接收一个参数,参数就是子组件传递过来的数据
兄弟之间传值 (eventBus)
兄弟组件之间的数据传递,通过 eventBus 来做中间的桥梁,传输方通过 Bus.$emit('自定义事件名', 数据)
传数据,接收方通过 Bus.$on('自定义事件名', callback)
接收数据,两者之间的自定义属性名保持一致
使用vue-router的步骤:
第一步∶创建路由组件的组件;
第二步:配置路由映射:组件和路径映射关系的routes数组﹔
第三步:通过createRouter创建路由对象,并且传入routes和history模式;
第四步:使用路由:通过<router-link>和<router-view> ;
VUEX
State
- 数据唯一来源(数据源),vuex所有的数据都会存在state中,就像一个很大的仓库,存储所有数据,可以实例化用来存储所有的数据,如何存储呢?实际上status就是一个庞大的对象,本身是一个json对象,用来存储所有的数据
Getter
- 获取数据。本来可以通过state实例化拿到所有数据,但是getter有其存在的道理,好比是vue的computed计算属性,相似性:从现有的state来派生出一个新的state,大大方便我们获取数据,或者state派生出新的状态的时候有很大的作用
Mutation
- 修改数据,不是通过直接修改,需要通过一个commit
mutation来修改数据,mutation本质上就是一个function,为什么不能直接通过实例化state直接去给state里面的数据做修改,而是通过commit一个mutation,在通过mutation传入一个state,再对state进行修改呢?这里主要是因为,每次提交mutation,都会有一个记录,vue这样做是为了更方便的记录下每一个数据改变的历史和轨迹,方便于监听和回滚之类的操作。还需要注意一点,mutation的操作一定是同步的,写成异步会有很大的麻烦,具体看文档
Action
- 提交mutation,为什么会多出这个呢?实际上mutation是同步修改数据,而往往业务需求有很多的异步操作,来修改vuex的数据状态,action里面可以进行异步操作,因为我们提交的时候mutation,mutation是通过同步修改数据。Action相当于包装了一层,可以进行任意的异步编程。来提交mutation,在通过mutation同步修改数据
Modules
面对复杂的应用程序,当管理的状态比较多时;我们需要将vuex的store对象分割成模块(modules)。