1.怎么定义vue-router的动态路由?怎么获取传递过来的动态参数?
何为动态路由?能够提供参数的路由即为动态路由
动态路由的创建,主要是使用 path 属性过程中,使用动态路径参数,以冒号开头,如:
{
path: /user/:id,
component: User,
name:User
}
$route.params 获取params传的参数,$route.query 获取query传的参数
2.v-model是什么?怎么使用?vue中标签怎么绑定事件?
v-model用于表单数据的双向绑定,其实它就是一个语法糖,这个背后就做了两个操作:
- v-bind绑定一个value属性
- v-on指令给当前元素绑定input事件
使用方法如下:
<div id='app'>
<input v-model="str">
{{ str }}
</div>
<script src="./vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
str:'hello'
},
})
</script>
v-model很好地体现了vue双向绑定的理念。
单向绑定非常简单,就是把Model绑定到View,当我们用JavaScript代码更新Model时,View就会自动更新。有单向绑定,就有双向绑定。
如果用户更新了View,Model的数据也自动被更新了,这种情况就是双向绑定。
什么情况下用户可以更新View呢?填写表单就是一个最直接的例子。当用户填写表单时,View的状态就被更新了,如果此时MVVM框架可以自动更新Model的状态,那就相当于我们把Model和View做了双向绑定。
双向数据绑定=单向数据绑定+UI事件监听
vue绑定事件
1.通过指令 v-on:事件名=“函数名”绑定事件 eg:<button v-on:click="doThis"></button>
2.通过语法 @事件名=“函数名”绑定事件 eg:<button @click.stop="doThis"></button>
3.axios是什么?怎么使用?描述使用它实现登录功能的流程?
axios
axios 是一个基于 Promise 的 HTTP 客户端,专门为浏览器和 node.js 服务。
Vue 2.0 官方推荐使用 axios 来代替原来的 Vue request,所以这里介绍一下 axios 的功能和基本的使用方法,希望能够对各位所有帮助。
功能
1.在浏览器中发送 XMLHttpRequests 请求
2.在 node.js 中发送 http 请求
3.支持 Promise API
4.拦截请求和响应
5.转换请求和响应数据
6.取消请求
7.自动转换 JSON 数据格式
8.客户端支持防范 XSRF 攻击
使用
这里以 Vue 为例:在 NPM 中安装 axios 之后,需要在 main.js 文件中引用 package
import axios from 'axios'
4.vue组件化的理解
组件是可复用的 Vue 实例, 如果网页中的某一个部分需要在多个场景中使用,那么我们可以将其抽出为一个组件进行复用。组件大大提高了代码的复用率。
5.什么是vue的生命周期?它分为几个阶段?它的作用是什么?
Vue生命周期
Vue 实例从创建到销毁的过程,就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程,我们称这是 Vue 的生命周期。
阶段
它可以总共分为11个阶段:
创建前/后(1.beforeCreate, 2.created),
载入前/后(3.beforeMount, 4.mounted),
更新前/后(5.beforeUpdate, 6.updated),
销毁前/后(7.beforeDestroy,8.destroyed),
激活时/未激活时(9.activated, 10.deactivated),
当捕获一个来自子孙组件的错误时被调用(11.errorCaptured)(深入了解可以详看 errorCaptured)
常用到就是前8阶段
作用
它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻辑。