Vue 基础第二次再次回顾

1. 什么是vue？它的核心理念是什么？

Vue是渐进式框架采用了自底向上增量开发

核心理念是：数据驱动视图

1. mvc和mvvm的区别

mvc是后端分层开发概念，mvvm是前端视图层的概念，主要关注与视图层分离，也就是把前端视图层分成了三部分Model、view、ViewModel;

mvc中的m是model层，负责操纵数据库。V是view层：视图层，发送请求，接受请求，接收响应。C是业务逻辑层，接收请求和返回响应。

mvvm中m为model层数据层保存数据，v是view层是页面的HTML结构。Vm是viewModel调度层链接m与v

1. 插值表达式，防数据抖动指令

{ {}}    v-clocak

1. 常见的事件修饰符有哪些，有什么作用，怎么用

.stop阻止冒泡事件 .capture 设置捕获事件 .prevent阻止默认事件 .self 只在自身事件触发时触发  放在@事件类型的后面 比如@click.stop

扫描二维码关注公众号，回复： 16805862 查看本文章

1. 什么是双向数据绑定和对应的vue指令

数据劫持 数据双向绑定 不论data层和dom层的两个元素那个被改变另一方会相应更新相同的数据

v-model

1. vue中如何动态绑定css样式

：style=”可以是data内的变量、也可以是font-size：33px、还可以是{‘font-size’:33px,color:’black’}

:class=”可以是数组[变量1,变量2]、可以是{‘font-size’:33px,color:’black’}、可以是方法getColor()”

1. v-for如何遍历对象，遍历数组，遍历数字

v-for=”(item,index,key) in object” :key=”index”

v-for=”(value,index) in array”:key=”index”

v-for=”index in number” :key=”index”

1. v-for为什么设置key，key值有什么要求

就地复用，提高重排效率 

1. v-if和v-show的区别，以及应用场景

v-if 是增删dom来改变显示隐藏

一般有多个条件来设置 v-if v-else-if  v-else来显示其中一条

show是display:none开改变显示隐藏

1. vue的生命周期函数有哪些，说明各自特点用途

beforeCreate页面创建Vue实例前的时候执行，页面转接

created：创建Vue实例完成后执行，请求接口在这里执行

beforeMount :Vue实例开始渲染前执行，

mounted: Vue实例渲染完成后执行 调用后台接口进行网络请求

beforeUpdate: Vue实例修改前执行，执行0次或多次，

updated  :  Vue实例修改完成后执行，执行0次或多次

beforeDestroy:  Vue开始消亡前执行，清楚监听和计时器

destroyed: Vue实例消亡后执行，

1. 如何使用axios发送get请求和post请求

2. 控制vue动画的6个类名

v-enter v-enter-to v-enter-active

v-leave v- leave -to v- leave -active

1. 组件化和模块化的区别

组件化是从ui角度进行划分的：前端的组件化，方便ui组件的重用

模块化是从代码逻辑角度划分的；方便代码分层开发，保证每个功能模块的职能单一

1. 组件内的data为什么用函数返回对象（1分）

数据隔离

1. 结合代码说明子组件如何给父组件传值

<div id=’app’>

<father @ myfather’=” FroApp”><father>

</div>

<template id=father>

<div>

</div>

</father>

Vue.component(‘father’,{

Template:’#father’,

Created(){

This.$emit(‘myfather’,’传的参数’)’

}

Const vm =new Vue({

El:’#app’,

Data:{

Fromfather:””

},

Methods:{

FroApp(data){

This.fromfather=data

}

1. 结合代码说明父组件如何给子组件传值

<div id=’app’>

<father  formapp =” 来自app的传参”><father>

</div>

<template id=father>

<div>

</div>

</father>

Vue.component(‘father’,{

Template:’#father’,

props(){

formapp(){

type[String,Number]

default:fromApp

}

}

Const vm =new Vue({

El:’#app’,

Data:{},

1. 结合代码说明普通插槽和默认插槽的使用方式

普通插槽写上slot占位符再在父元素内使用时在里面写内容就可

<Son> 

1

<slot></slot>

3

</son>

<father>

<son>2</son>

</father>

具名插槽其实就是给插槽取个名字可以根据这个名字把内容填充到对应插槽中

<Son> 

1

<slot name=slotOne></slot>

<slot name=slotTwo></slot>

4

</son>

<father>

<son v-slot:nameOne>2</son>

<son v-slot:nameTwo >3</son>

</father>

1. 如何通过ref获取dom元素

ref=name 

this.$refs.name

1. 前端路由和后端路由的区别

前端路由是页面跳转使用的时hash（#号）来进行跳转

后端路由是URL地址进行跳转对应服务器上的资源

1. 结合代码说明如何使用路由

1.VueRouter放在Vue引入之下,

2. 创建VueRouter实例,并且建立映射关系。

template id="sonIdName"><div>组件元素</div></template>。Vue.component("sonComponentName",{template:"#sonIdName"})

<template id="sonIdName2"><div>组件元素</div></template>。Vue.component("sonComponentName2",{template:"#sonIdName2"})

let router = new VueRouter({

routes:[

{

path:'/',

component:sonComponentName,

redirect:'/son1'

},

{

path:'/son2',

component:sonComponentName2

},

{

path:'/son1',

component:sonComponentName1

},

]

})

3.挂载ruter在vue上

1. 结合代码说明如何设置路由嵌套

Routes：[

{path:”/ndex”,

Component:index,

Children:[{

Path:/son,

Component:son,

}]

}]

1. 结合代码说明声明式路由跳转和传参

<router-link to='/login'>登录</router-link>

Methods:{

Tologin(){

this.$router.push({path: "/detail})

<button @click="tologin转</button>

1. 结合代码说明函数式路由跳转和传参

<router-link :to="{path:'/index',query:{courseid:103}}">首页</router-link>

<router-link :to="{name:'/index',params:{ urseid:103 }}">首页</router-link>

1. 如何进行路由重定向，如何设置选中路由高亮

Routes :[{path:”/ndex”,

Component:index,

},

{path:’/’

redirect: "/index"

}

1. 什么是跨域，如何解决跨域

指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制

1. 与后端人员协商开放权限

2. 使用Jsonp

3. 使用代理

1. 创建项目的指令是什么？运行项目的指令是什么

Vue create name

Npm run serve

1. 初始化项目的目录结构和作用

Node_module下载所有项目的依赖

Src项目源码

Assets普通静态资源

Component可复用小组件

Router路由

Store vuex

View 页面级别的大组件

App.vue最外层视图

Man.js入口函数

Gitignore git文件

Pakeage.json项目配置目录

1. 组件内如何获取Vuex内状态值？如何修改？

获取 this.$store.state.属性

修改this.$store.commit('自定义的方法”，参数)

1. Get请求和post请求的区别，常见的http状态码有哪些

GET把参数包含在URL中get会将数据缓存起来发送数据的参数较小

POST post更安全post发送的数据更大post能发送更多的数据类型

1. 什么是路由守卫，如何配置

通过跳转或取消的方式守卫导航

BeforEath(to from next

1. 代理如何配置，各个配置项什么意思

devServer:{

open:true //自动打开

hot:true //热更新

proxy：{ //代理

‘/api’:{

Target:’地址’

pathRewrite:{ //路径重写

‘^/api’:’’

}

1. 分别用绑定方法methods、属性计算computed和属性监听 watch实现名字全称案例（如：慕容+云海=慕容-云海，输入全称自动分为名字和姓氏）

methods:{

    calculateName(){

return{value1+value2}}

watch:{

‘value1’:function(new,old){

This.value3=this.value1+this.value2

}

}

computed:{

this.value3:function(){

return this.value1+this.value2

}

}

1. 定义全局过滤器实现日期格式化，实现传YYYY-MM-DD hh-mm:ss显示年-月-日 时：分：秒（补零）（4分）

Vue.filter('formatTime', function (date, format) {

// 这里的data就是未处理的原始数据，format为传递

var year = date.getFullYear();

var month = (date.getMonth() +1).toString().padStart(2,0);

var day = (date.getDate()).toString().padStart(2,0);

var hour = (date.getHours()).toString().padStart(2,0);

var minute = (date.getMinutes()).toString().padStart(2,0);

var second = (date.getSeconds()).toString().padStart(2,0);

return {format.replace("YYYY",year).replace("MM",month).replace("DD",day).replace("hh",hour).replace("mm",minute).replace("ss",second)}

})

使用{ {date | formatTime("YYYY-MM-DD hh:mm:ss") }}