基础
介绍一下vue?你觉得vue有什么特点?对比其他你使用的框架有什么区别?
- 介绍:vue是渐进式的js框架,既可以把它当作第三方库来使用,也可以利用vue构建复杂的单页面项目。
- 特点:
- 入门容易,只需要html,css,js就可以,如果是react还需要es6,jsx,函数编程
- 灵活:可以当作第三方库使用,也可以用来构架项目。
- 高效:虚拟DOM。
- 使用方便:指令,模板,数据双向绑定,和react相比,数据双向绑定可以自动修改,react需要手动执行setState。
- 组件化:和react项目vue的组件化更容易被新手接收html,css,js,而react都是通过js实现。
v-if 和v-show区别?
- v-if是删除与创建,频繁切换消耗大
- v-show是添加display:none;block;之间来回切换,消耗小,适合频繁切换
- v-for优先于v-if
Vue作为MVVM框架,M、V、VM分别代表什么?
- Model View VM
- Model 是数据模型
- View 是视图
- VM 是 用来连接数据和视图
mvvm框架是什么?它和其它框架(jquery)的区别是什么?哪些场景适合?
答:一个model+view+viewModel框架,数据模型model,viewModel连接两个
区别:vue数据驱动,通过数据来显示视图层而不是节点操作。
场景:数据操作比较多的场景,更加便捷
Model改变也会同步视图更新相关的依赖, 双向绑定就是vm起了作用
方法调用,computed,watch区别?
1.方法:页面数据每次重新渲染都会重新执行, 性能消耗大,除非不会希望有缓存的时候使用.
2.computed:是计算属性,依赖其他属性计算,并且computed的值有缓存,只有当计算值发生变化才会返回内容。
3.watch:监听到值的变化就会执行,在回调中可以进行一些逻辑操作。
总结:除非不希望缓存,一般不会用方法
一般需要依赖别的属性来动态获取值的时候可以使用computed
对于监听到值的变化需要做异步操作或开销较大的操作时候用watch
如何让css只在当前组件起作用?
将当前组件的style修改为style scoped
< style scoped>
< /style>
vue Loader是什么?
vue Loarder作用是将.vue文件解析成浏览器能识别的文件
vue中key是什么?作用?
key的作用主要是为了高效的更新虚拟DOM
声明周期
什么是生命周期?
生命周期就是从创建到销毁的过程
有哪些生命周期?
- beforeCreate 创建前
- created 创建后
- beforeMount 挂载前
- mounted 挂载后
- beforeUpdate 数据更新前
- updated 数据更新后
- beforeDestroy 销毁前
- destroyed 销毁后
这些有什么区别和意义?
- beforeCreate创建前,刚执行new的操作,其他什么也没做
- created创建后,属性和方法挂载到了实例上面
- beforeMount挂载前,找到了el或mount对应的节点范围,但是数据话没有替换,相当于在创建DOM树
- mounted挂载后,vue范围内的变量都会被替换成data里面的数据值
- beforeUpdate数据更新前
- updated数据更新后
- beforeDestroy销毁前
- destroyed销毁后
我们在项目中都是什么时候用到?
ajaxs获取数据的时候在created这个时候用到渲染页面
组件
组件中data为什么不用对象?
- 组件复用时所有组件实例都会共享data,如果data是对象,会造成一个组件修改其他调用该组件的值也会改变,此时写成一个函数每次调用都会返回一个新的数据
- new Vue() 里的方式是生成一个根组件,该组件不会复用的,也就不存在共享data情况
什么是组件?
任何一个页面我们都可以抽象成一个由组件构成的一个大的组件树,大到一个页面,小到一个按钮都可以是一个组件,一个页面就由很多组件的嵌套拼接组成,这就是组件化;
组件有什么好处?
- 复用性强
- 模块化开发
- 代码好管理
- 耦合度低
组件如何创建?
有三种组件:
- 全局组件:
- Vue.component(‘组件名称‘,组件详情对象)
- 局部组件:
- new Vue(
components:{
组件名称:组件详情的对象
}
))
- 单文件组件:
.vue文件
组件通讯
- 第一种:props、$emit
1、父传子:props
2、子传父:$emit自定义事件
- 第二种: $ parent、$childern
1、this.$parent.parentMsg;获取父级内容
2、this.$children; 获取子组件内容
- 第三种获取子集内容: ref
// 多个子组件时根据子组件上的 ref 属性选择
<Child ref="c1">
<Child ref="c2">
this.$refs.c1.childMsg
父子组件传值?
一
- 父传子: 父传值 v-bind=“msg”,props[]子接受
- 父组件 < son :fatherMsg=“msg” >,在父组件内的子组件上自定义指令绑定父组件的 msg
- 子组件 props[“fatherMsg”],子组件通过props以数组形式接收,也可以对象形式这样写:
- props:{ fatherMsg: String }
//父组件:
<son :fatherMsg="msg">
//子组件:
{{ fatherMsg }}
<script>
props:["fatherMsg"]
//或
props:{
fatherMsg: 数据类型
}
<script/>
- 子传父:用 this.$emit(“自定义事件名称”,传递内容)
- 子组件通过 this.$emit(“事件名”,传递内容)传递内容
- 父组件 < Sub @事件名(同子组件传输的一样)=“自定义事件名” >,在自定义事件上接收并保存在data就可以使用了
//父组件:
//自定义事件名要和子组件传过来的定义一样
<son @childInput="getVal>
<script>
methods: {
//接收数据并保存在data
getVal(msg) {
this.msgVal = msg;
}
}
</script>
//子组件:this. e m i t ( " 自 定 义 事 件 名 " , 传 递 内 容 ) t h i s . emit("自定义事件名",传递内容) this. emit("自定义事件名",传递内容)this.emit(“childInput”, this.subcon);
兄弟组件传值?
通过一个中转(bus.js)
//bus.js内容
import Vue from "vue";
export default new Vue;
A兄弟传值:
- 通过import引入bus.js
- bus.$emit(“自定义事件名”,传递内容)
B兄弟接收: - 通过import引入bus
bus.$on("自定义事件名"(同传过来的一样),(data) =>{
//data是传过来的数据进行接收
}
)
封装组件?(未解决)
- 创建组件.vue文件,内部写功能代码
- Vue.componte(“自定义组件名”,创建的组件名)注册组件
- 使用组件
路由
什么是路由?
路由:路由就是通过点击不同的按钮展示不同的页面或者组件的功能
原理:根据不同的路径地址,展示不同的页面,组件
vue-loader是什么?使用它的用途是什么?
- vue-loader是:.vue文件的一个加载器 ,跟template,js,style转换成js模块。
- 用途:js 可以写es6,style样式可以写scss或less ,template可以加jade等
keep-alive了解?
- keep-alive是什么?
内置组件,能在组件切换过程中将状态保存在内存中,防止重复渲染DOM。
Vue.js $route 和 $router 的区别
- $route 是路由信息对象,包括 path , params , hash , query ,fullPath , matched , name 等 路由信息参数。
- ⽽ $router 是路由实例对象包括了路由的跳转⽅法,钩⼦函数等
未分类
vue插件使用步骤?
下载----引入----使用
axios
axios是什么?怎么使用?描述使用它实现登录功能的流程?
-
请求后台资源模块
-
npm install axios -S装好,然后发送的是跨域,需在配置文件中config/index.js进行设置。后台如果是Tp5则定义一个资源路由。js中使用import进来,然后.get或.post。返回在.then函数中如果成功,失败则是在.catch函数中
- 下载 npm install axios --seve
- 引入(main.js)内
import axios from "axios"
Vue.prototype.axios = axios
- 请求方式,以及传参
axios.get("/api/login?userName=xxx$userPwd=xxx")
axios.post("/api/login", {
userName: xx,
userPwd: xx
})
Vuex
Vuex是什么?
Vuex 是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间数据共享。
Vuex同一管理状态的优点?
- 易于开发和维护:能在vuex中集中管理共享数据
- 提高开发效率:能够高效的实现组件之间的数据共享
- 实时保持数据与页面的同步:存储在vuex中的数据都是响应式的
什么样的数据适合存储到Vuex中?
一般情况下,只有组件之间共享的数据才有必要存储到vuex中,对于组件的私有数据,依旧存储在自己自身的data中即可
怎样使用Vuex?
- 安装vuex依赖包
- 用import导入vuex包,用Vue.use(Vuex)安装vuex
- 创建store对象,new 一个Vuex.Store构造函数,提供一个存放全局共享数据的实例
const store = new Vuex.Store({
//state中存放的就是全局共享数据
state: { count: 0 }
})
- 将store对象挂载到vue实例中
new Vue({
el: "#app",
render: h => h(app),
reuter,
//将创建的共享数据对象挂载到Vue实例中
//所有的组件就可以直接从store中获取全局的数据了
store
})
Vuex的核心概念?
1. State:State是存储共有数据
- 方式一:通过this.$store.state.count 获取数据,this可省略
- 方式二:从 vuex 导入 mapState 函数,将全局数据为当前组件的计算属性
2. Mutation:操作State内数据
- 方式一:通过this.$store.commit(“方法名”)操作mutation
- 方式二:从 vuex 导入 mapMutations函数,将指定的 mutations函数映射为当前组件的methods函数,直接this. 调用,不需要再this.$store.commit
3. Action:异步操作,不能直接操作State,只能通过调用Mutation操作
- Action内通过 context.commit()触发某个 mutation才行
- 组件内通过 dispatch函数专门是用来触发 action的:this.$store.dispatch(“定义的action方法名”)
4.Getter: 数据包装,数据处理
5.Module: 模块化(仓库细致化)
项目功能
1.重置表单?
绑定事件,通过element-ui中表单提供的的resetFields方法可以重置表单,this.$refs.(表单的ref).resetFields