vue两大特征
目录
一、数据驱动(mvvm)
二、组件化开发
1.什么是vue?
Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。
Vue.js 是前端的主流框架之一,和Angular.js、React.js 一起,并成为前端三大主流框架!
2.什么是mvc和mvvm?
MVC 是后端的分层开发概念;
MVVM是前端视图层的概念,主要关注于视图层分离,也就是说:MVVM把前端的视图层,分为了三部分Model、View、VM ViewModel;
3.框架和库的区别?
框架:是一套完整的解决方案;对项目的侵入性较大,项目如果需要更换框架,则需要重新架构整个项目。
库(插件):提供某一个小功能,对项目的侵入性较小,如果某个库无法完成某些需求,可以很容易切换到其它库实现需求。
4.插值表达式、v-cloak、v-text、v-html
插值表达式{{}},可以在前后插入一些内容
v-text:会替换掉元素里的内容
v-html:可以渲染html界面
5.vue指令界面防止闪烁?
在{{}}前面的div里加入v-cloak
6.vue指令v-html和v-text的区别?
作用:
都是用于渲染页面
v-text:会替换掉元素里的内容
v-html:可以渲染html界面
区别:
v-html可以识别html标签并渲染到页面中,而v-text不能识别标签,只可以渲染文本。
7.vue指令-属性绑定及简写?
v-bind 简写:
8.vue指令-事件绑定及简写?
v-on 简写@
9.vue事件修饰符?
.stop 阻止冒泡
.prevent 阻止默认事件
.capture 添加事件侦听器时使用事件捕获模式
.self 只当事件在该元素本身(比如不是子元素)触发时触发回调
.once 事件只触发一次
10.vue指令-双向数据绑定
v-model
11.vue指令-循环渲染?
v-for 搭配key使用
12.vue指令-显示隐藏?
v-if和v-show
13.vue指令-v-for如何遍历对象,数组,数字?
遍历数组,参数(item,index) in list
遍历对象,参数(value,key,index) in list
遍历数字,num in 10 (1~10)
14.vue指令-v-for为什么设置key?
让界面元素和数组里的每个记录进行绑定
key只能是字符串或者数字
key必须是唯一的
15.vue指令-v-if和v-show的区别?
v-if是通过添加和删除dom元素
v-show是通过display:none方式隐藏
16.vue绑定class方式?
数组
三木表达式
数组内置对象(对象的键是样式的名字,值是Boolean类型)
数组加三木表达式
17.vue绑定style方式?
直接在元素上通过 :style 的形式,书写样式对象
将样式对象,定义到 data 中,并直接引用到 :style 中
在data上定义样式
在元素中,通过属性绑定的形式,将样式对象应用到元素中
在 :style 中通过数组,引用多个 data 上的样式对象
在data上定义样式
在元素中,通过属性绑定的形式,将样式对象应用到元素中
18.vue过滤器全局和局部声明方式及使用?
通过Vue提供的filter方法定义:Vue.filter()
filters这个是实例化Vue的一个参数,和data,methods平级的
19.vue键盘修饰符使用?
监听所有按键:v-on:keyup
监听指定按键:v-on:keyup.按键码
20.vue键盘修饰符设置别名?
Vue.config.keyCodes.f1 = 112
21.vue自定义指令全局和局部声明方式及使用?
使用这个方法进行全局定义:Vue.directive()
私有定义:directives
22.vue生命周期钩子函数有哪些?
beforeCreate、created、beforeMount、Mounted、beforeUpdate、updated、beforeDestroy、destroyed、
23.vue生命周期钩子函数各阶段特点,什么作用?
beforeCreate:初始化vue实例,一般用于页面重定向
created:一般用于接口请求,数据初始化
beforeMount:页面数据未更新,在内存中已经解析好模板,虚拟dom,尚未挂载到页面中
Mounted:页面更新完成,需要依赖dom的操作完成
beforeUpdate:触发0次或多次,数据更新前
updated:数据更新后
beforeDestroy:组件销毁前,清除定时器还有页面监听
destroyed:组件销毁后
24.vue-resourse如何发送get,post请求?
this.$http.get
this.$http.post
25.vue-resourse发送post请求第三个参数写什么?
emulateJSON:true
26.axios发送get,post请求?
axios.$http.get
axios.$http.post
27.axios发送post请求使用内置参数对象是什么?
fromdata
urlsearchparsms
28.vue中过渡动画类名有哪些?
v-enter、 v-enter-active、v-enter-to、v-leave、v-leave-active、v-leave-to、
29.vue中过渡动画结合第三方插件使用?
引入animate.css,enter-active-class,leave-active-class
30.vue中过渡动画中钩子函数的使用?
beforeEnter、enter、afterEnter、beforeLeave、leave、afterleave、
31.vue中如何设置v-for列表动画?
transition
32.vue中如何声明组件?
全局定义:vue.component
私有定义:components
33.vue中如何父组件给子组件传值?
在父组件中加入props方法,与methods,data平级
34.vue中如何子组件给父组件传值?
给父组件中给引用的子组件注册一个自定义事件
子组件可以触发这个事件$emit("事件名字",传递的参数)
35.vue中如何使用插槽,两种插槽的区别?
插槽就是子组件中的提供给父组件使用的一个占位符,用<slot></slot> 表示,父组件可以在这个占位符中填充任何模板代码,如 HTML、组件等,填充的内容会替换子组件的<slot></slot>标签。
具名插槽 具名插槽其实就是给插槽取个名字。一个子组件可以放多个插槽,而且可以放在不同的地方,而父组件填充内容时,可以根据这个名字把内容填充到对应插槽中
<slot name=”header”></slot> <template v-slot:”header”><template>
36.前端路由和后端路由的区别?
前端路由:对于单页面应用程序来说,主要通过url中的hash(#号)来实现页面之间的切换,这种通过hash实现切换的方式称为前端路由
后端路由:所有的超链接都是url地址,所有的url地址对应服务器上对应的资源
37.vue中如何使用路由?
1.引入vue.router
2.创建路由new VueRouter
const router = new VueRouter({})
3.创建映射关系
routes:[
{
path:'/' 路径
component:"" 对应组件
}
]
4.将路由挂载在vue实例上
5.战示区域
<router-view></router-view>
38.路由跳转两种方式,声明式,函数式?
声明式:<router-link :to="{path:'/detail',query:{courseid:103,age:18}}">详情页</router-link>
<router-link :to="{name:'mine',params:{urseid:103}}">个人中心</router-link>
函数式: <button @click=" "> 页面跳转</button>
39.路由传参两种方式,声明式,函数式?
<router-link :to="{path:'/detail',query:{courseid:103,age:18}}">详情页</router-link>
<router-link :to="{name:'mine',params:{urseid:103}}">个人中心</router-link>
<!-- 函数式 -->
<button @click="todetail"> 页面跳转</button>
<button @click="todetail2"> 页面跳转2</button>
40.路由嵌套?
const router = new VueRouter({
// 3.创建映射关系
routes: [
// 重定向
{
path: '/',
redirect: "/index"
},
{
// 路径
path: '/index',
// 对应组件
component: index,
// 嵌套
children: [
// 不加/ 注意,以 / 开头的嵌套路径将被视为根路径。这允许你利用组件嵌套,而不必使用嵌套的 URL。
{
path: "other",
component: other
}
]
},
{
path: "/detail",
component: detail
}
]
})
41.路由高亮?
.router-link-active 默认样式
自定义 linkActiveClass 在new VueRouter实例中
42.路由重定向?
// 重定向
{
path: '/',
redirect: "/index"
},
43.ref的使用?
获取DOM,操作DOM
给DOM元素加ref=“自己起的名”
<div id="box" ref="refdiv"> haha</div>
this.$refs.refdiv.style.color = 'red'
44.属性计算,属性监听?
watch: {
// newVal: 当前最新值
// oldVal: 上一刻的值
变量名 (newVal, oldVal){
// 变量名对应值改变这里自动触发
}
}
watch: {
"firstname": function (newvalue,oldvalue) {
// console.log(newvalue);
// console.log(oldvalue);
this.name = this.firstname + this.lastname
},
"lastname": function (newvalue,oldvalue) {
this.name = this.firstname + this.lastname
}
},
Watch 监听,和methods平级
属性计算 不能和data里面数据冲突
// 计算属性中所依赖的任何一个 data 属性改变之后,都会重新触发 本计算属性 的重新计算,从而更新 fullName 的值
computed:{
name:{
get:function(){
return this.firstname + '-' + this.lastname
},
// 只有修改自身时会触发
set:function(value){
console.log(value);
this.firstname = value.split("-")[0]
this.lastname = value.split("-")[1]
}
}
}