Vue基础的基础

什么是vue

前端渐进式JavaScript 框架，

框架和库的区别

框架 ：是一套完整的解决方案；对项目的侵入性较大，项目如果需要更换框架，则需要
重新架构整个项目。
库（插件）：提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，
可以很容易切换到其它库实现需求。

mvc和mvvm的区别

MVC中 M是model:与数据库交互,V是view:页面展示,用户交互，c是controller:调度，MVVM中M是model:业务逻辑,v是view:展示页面, vm是view-model:交互

vue的基本代码结构

引入Vue,创建<div id=“app”/,实例化var vm= new Vue({el:{},data:{},})

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

{{}},[v-cloak]{display:none}

v-html，v-text的区别

v-html和v-text写在标签上会覆盖标签内上原有内容，v-html会解析html代码和样式（富文本），v-text直接展示原始内容

属性绑定，事件绑定指令写法及其简写
v-bind: 简写： v-on:简写@

常见的事件修饰符有哪些，有什么作用，怎么用 .stop 阻止冒泡
.prevent 阻止默认事件
.capture 添加事件侦听器时使用事件捕获模式
.self 只当事件在该元素本身（比如不是子元素）触发时触发回调
.once 事件只触发一次

什么是双向数据绑定和对应的vue指令
v-model;; Model层里的数据更新,View层上的数据也会跟着更新，反过来View层里的数据更新,Model层上的数据也会跟着更新,使用object.definedpropotype的方法,数据劫持配合订阅者发布者,使用set和get方法

vue中如何动态绑定css样式
（1）：绑定style

:style="'font-size: 32px'"
:style="{font-size:'32px',color:'red'}"
:style="font"
:style="getStyle()",括号不能去掉,返回以上三种绑定模式都可以生效

（2）：绑定class

:class="[class1,class2]"，
:class="{font:true,color:false}"
:class="['font','color']"
:class="getClass()"，

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

  <span v-for="count in 5" :key="index"

循环数组

 <span v-for="(value,index) in arr" :key="index"

循环对象

  <span v-for="(value,key,index) in object" :key="key"

v-for为什么设置key，key值有什么要求
key作用:提高重排效率
字符串和数字且唯一

v-if和v-show的区别，以及应用场景
v-if：通过删除和添加DOM元素进行显示和隐藏。用于切换次数少的时候。如果多次切换，会很消耗性能。

v-show：通过删除和添加display:none样式进行显示和隐藏。用于切换次数多的时候。

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

beforeCreate: 创建之前，在这个阶段获取不到data上的数据，在这个阶段可以进行界面的重定向
created: 实例创建之后，在这个阶段可以获取到data上的数据了，这也是我们最早可以初始化数据的地方
beforeMount： 界面挂载之前，已经获取到了要渲染模板，但是还没渲染到界面上
mounted：界面挂载之后，这个界面已经渲染好了，如果有一些组件初始化依赖于界面的话，需要在这个阶段进行初始化
beforeUpdate： 更新之前， data已经更新，但是还没渲染到界面上。这里在界面更新之前，最后操作一下data。 注意的是，不能在异步操作中修改data
updated: 更新之后，界面已经和data一致了。 如果有些组件在dom更新之后需要重新渲染的话，可以在这里进行。
beforeDestroy: 界面销毁之前。 清除定时器，监听的事件。
destroyed： 界面销毁之后
如何使用vue-resource发送get请求和post请求this.$http.get("url’’).then(res => {})

this.$http.post(url, {要发送的数据对象}, {编码类型emulateJSON: true }).then(res => {})

如何使用axios发送get请求和post请求
axios.get(‘url’) .then(res =>{}).catch(function (error) { // 请求失败处理 });

axios.post(‘url’).then(response => {}).catch(function (error) { // 请求失败处理});

控制vue动画的6个类名
.v-enter
.v-enter-active
.v-enter-to
.v-leave
.v-leave-active
.v-leave-to

组件化和模块化的区别
组件化:从ui界面设计出发
模块化:从业务逻辑出发

结合代码说明全局声明组件的几种的方式
1.Vue.component(“组件名”,Vue.extend({template:<div>组件元素</div>}))

2.Vue.component(“sonComponentName”,{template:<div>组件元素</div>}) // extend会自动进行

3.<script id=“sonIdName” type=“x-template”

Vue.component(“sonComponentName”,{template:"#sonIdName"})

4.<template id=“sonName”
Vue.component(“son”,{template:"#sonName"})

组件内的data为什么用函数返回对象
数据隔离
不使用return包裹的数据会在项目的全局可见，会造成变量污染
使用return包裹后数据中变量只在当前组件中生效，不会影响其他组件

结合代码说明子组件如何给父组件传值
父组件中：<son title/

子组件中：props:{
son:{
type:[Number,String,Object]/String
default:10
}
}

结合代码说明父组件如何给子组件传值
父组件中：<son @fromSon=“fromson($event,data)” />
父组件中：mehods:{
fromson(valueFromSon){
this.sondata=event
}
}

子组件中：<button @click=“sendValueFunctonName()”>发送数据
子组件中：methods:{
send(){
this.$emit(“fromSon”,valueFromSon)
}
}

结合代码说明普通插槽和默认插槽的使用方式
默认插槽 <slot/
具名插槽 <template id=“login”
<slot name=“footer”

如何通过ref获取dom元素
this.$refs.domname

前端路由和后端路由的区别
后端路由：对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源

前端路由：对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；

在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）

结合代码说明如何使用路由
引入VueRouter放在Vue引入之下,
创建VueRouter实例,并且建立映射关系。
let router = new VueRouter({
routes:[
{
path:’/’,
component:sonComponentName,
}]
挂载：
new Vue({
el:’#app’,
router
})
预留显示位置
router-view

结合代码说明如何设置路由嵌套
在父组件中预留位置router-view
children:[name(){path:"/",component:""}]

结合代码说明声明式路由跳转和传参
route:[
{
path:’/’,
component:sonComponentName,
},

结合代码说明函数式路由跳转和传参
<router-link to="{path:’/son1’ ,query:{ id:‘10’ }}"

如何进行路由重定向
redirect:

如何设置选中路由高亮
router-link-active

分别用绑定方法methods、属性计算computed和属性监听 watch实现名字全称案例

methods: {
name() {
this.allName = this.firstName + “-” + this.lastName
}
watch:{
“firstName”:function(){
this.allName = this.firstName + “-” + this.lastName
},
“lastName”:function(){
this.allName = this.firstName + “-” + this.lastName
},
computed:{
allName:{
get:function(){
return this.firstName + “-” + this.lastName
},
}

定义全局过滤器实现日期格式化，实现传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”) }}