vue基础

Vue基础

什么是vue

答：前端渐进式javaScript框架，核心理念是数据驱动视图，组件化开发

框架和库的区别

答：框架是一套完整的解决方案，对项目侵入性大，项目如果需要更换框架，则需要重新架构整个项目。

库是提供某个小功能，对项目入侵性小，若库不适用，很容易切换到其他库

mvc和mvvm的区别

答：MVC是后端的分层开发概念，MVVM是前端视图层的概念，主要关注与视图层分离，也就是把前端视图层分成了三部分Model、view、VMViewModel；

MVC中M是model层：负责操纵数据库 。V是view层：视图层，发送请求，接收响应。C是controller，是业务逻辑处理层，接收请求和返回响应。

MVVM中M为model层：数据层保存数据，V是view层是页面的HTML结构。VM是一个调度者，链接M与V

vue的基本代码结构

答：const vm = new Vue({

el:”#app”,

data:{},

methods:{},

})

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

答：插值表达式：{{}} 防数据抖动指令：v-cloak

<style>

       [v-cloak]{

           display: none;

       }

   </style>

v-html，v-text的区别

答：v-html会解析HTML代码和样式（富文本），v-text直接展示原始内容

属性绑定，事件绑定指令写法及其简写

答：v-bind简写为： v-on简写为：@

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

答：.stop 阻止冒泡

.capture 设置捕获

.prevent 阻止默认事件

.self 只在触发自身时触发事件

.once 只触发一次

使用：放在@事件类型的后面，如@click.stop="methodname"

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

答：Model层里的数据和View层上的数据只要有一方变化，另一方随之改变 v-model

vue中如何动态绑定css样式

答：

data:{

font:'font-size: 32px; color: red',

class1:'font',

class2:'color'

},

methods:{

getStyle(){

return "font-size: 32px; color: red"

}

}

（1）.绑定style

：style=“font-size：33px”

：style="{‘font-size’:'32px',color:'red'}"

:style="font"

:style="getStyle()"括号不能去掉

（2）绑定class

：class="[class1,class2]",

:class="['font','color']"

:class="{font:true,color:false}"

:class="getClass()",括号不能去掉

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

答：

遍历对象：  v-for="(value,key,index) in user"  :key=index

遍历数组： v-for="(item,index) in arr "   :key=index

遍历数字：  v-for="value in 3" :key=value

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

答：提高重排效率，key值只能为不重复的字符串或数字

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

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

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

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

答：

1. 在 beforeCreate 生命周期函数执行的时候，data 和 methods 中的 数据都还没有没初始化，一般用于重定向

2. 在 created 中，data 和 methods 都已经被初始化好了，一般用于接口请求和数据初始化

3. 在 beforeMount 执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串

4. mounted 是 实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了，依赖dom的操作放在此处

5. 当执行 beforeUpdate 的时候，页面中的显示的数据，还是旧的，此时 data 数据是最新的，页面尚未和 最新的数据保持同步

6. updated事件执行的时候，页面和 data 数据已经保持同步了，都是最新的

7. 当执行 beforeDestroy的时候，实例上data和所有的methods，以及过滤器，指令..... 都还处于可用状态，此时还没有真正执行销毁的过程，一般用于清除计时器，以及各种监听

8. 当执行到destroyed函数的时候，组件已经被完全销毁了，此时，组件中所有的数据，方法，指令，过滤器。。。都已经不可用了 

如何使用vue-resource发送get请求和post请求

答：

1. 引入resource  放在vue后面

2.  this.$http.get(地址).then((res)=>{   ......    }),

3. this.$http.post(地址，请求体，{emulateJSON:true}).then((res)=>{ .... }),

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

答：

1. axios.get(地址).then((res) => { ... })

2. axios.post(地址,请求体).then((res)=>{...})

控制vue动画的6个类名

答：v-enter v-enter-to v-enter-active v-leave v-leave-to v-leave-active

组件化和模块化的区别

答：

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

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

结合代码说明全局声明组件的几种的方式

答：

1.let sonComponentName = Vue.extend(

{template:`<div>组件元素</div>`}

)，

Vue.component("组件名",sonComponentName)

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

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

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

组件内的data为什么用函数返回对象

答： 数据隔离

如果不用function return 每个组件的data都是内存的同一个地址，那一个数据改变其他也改变了，这当然就不是我们想要的。用function return 其实就相当于申明了新的变量，相互独立，自然就不会有这样的问题；js在赋值object对象时，是直接一个相同的内存地址。所以为了每个组件的data独立，采用了这种方式。

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

答：

父组件中：<sonComponentName  @fromSonEventType="fatherComponentFunctionName()"  />

父组件中：methods:{

fatherComponentFunctionName(valueFromSon){

console.log(valueFromSon)

}

}

子组件中：<button @click="sendValueFunctonName()">发送数据</button>

子组件中：methods:{

sendValueFunctonName(){

this.$emit("fromSonEventType",valueFromSon)

}

}

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

答：

父组件中：<sonComponentName  sonAcceptValueName="10"  />

子组件中：props:{

sonAcceptValueName:{

type:[Number,String,Object]/String

default:10

}

}

结合代码说明普通插槽和具名插槽的使用方式

答：

具名插槽：

    <div id='app'>

        <login>

            <template v-slot:footer>

                <div>

                   footer

                </div>

            </template>

        </login>

   </div>

   <template id="login">

       <!-- 模版里只能有一个根元素 -->

       <div>

          登录、注册

          <slot name="footer"></slot>

       </div>

   </template>

普通插槽：

//目标标签中放template标签

 <login>

        <div>

           普通插槽

       </div>

  </login>

    <template id="login">

       <!-- 模版里只能有一个根元素 -->

       <div>

          登录、注册

//直接放插槽

          <slot></slot>

       </div>

   </template>

如何通过ref获取dom元素

答：this.$refs.name

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

答：

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

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

3. 在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由

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

答：

①：引入VueRouter放在Vue引入之下,

②：创建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

},

]

})

挂载：

new Vue({

el:'#app',

router

})

跳转和预留显示位置

<router-link to="/son1" >跳转</router-link>

<router-view />

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

答：

   <template id="home">

       <div>

           首页

           <button @click="tologin">点我跳转</button></button>

           <router-view></router-view>

       </div>

   </template>

        const router = new VueRouter({

           //  3.创建映射关系

           routes: [

               {

                   path: "/userInfo",

                   component: userInfo

               }, {

                   path: "/login/:userid/:name",

                   component: login,

                   name: "namelogin"

               }, {

                   path: "/home",

                   component: home,

                   children: [{

                       path: "son",

                       component: son

                   }]

               },

               // 重定向

               {

                   path: "/",

                   redirect: "/home"

               }

           ],

           linkActiveClass: "myactive"

       })

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

答： <router-link to="{path:'/son1' ,query:{ id:'10' }}" >跳转</router-link>

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

答：

  this.$router.push({

                       name: "namelogin",

                       params: {

                           userid: 999,

                           name: "wangwu"

                       }

                   })

如何进行路由重定向

答：

routes: [

               {

                   path: '/',

                   // 把当前地址，重定向指定地址

                   redirect: "/login"

               },

如何设置选中路由高亮

被匹配到的路由的router-link上会有个router-link-active的样式，我们通过设置这个样式设置激活标签的样式

在实例化路由的时候配置 linkActiveClass: "myactive"

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

答：

 姓氏 <input type="text" v-model:value="firstName">

       名字 <input type="text" v-model:value="lastName">

       <span @click="name">全称</span> <input type="text" v-model:value="allName">

   // updated() {

           //     this.allName = this.firstName + "-" + this.lastName

           // },

           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

           //     },

           // }

           // 计算属性； 特点：当计算属性中所以来的任何一个 data 属性改变之后，都会重新触发 本计算属性 的重新计算，从而更新 fullName 的值

           // 不能和data里面的重复

           computed:{

               // allName(){

               //     return this.firstName + "-" + this.lastName

               // },

               allName:{

                   get:function(){

                       return this.firstName + "-" + this.lastName

                   },

                   // 只有改变本身的时候才能触发这个方法

                   set:function(newVal){

                       this.firstName = newVal.split("-")[0]

                       this.lastName = newVal.split("-")[1]

                   }

               }

           }