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]
}
}
}