24.Vue常见的指令有哪些,有什么用
v-once 能执行一次性地插值,当数据改变时,插值处的内容不会更新。只执行一次
v-show是给一个display:none的属性 让它不显示
v-if 是通过删除dom元素让他不在显示 同时还有v-else 必须和v-if使用
v-for 必须使用特定的语法(item, index) in items, index是索引,可以省略
v-html 渲染富文本 解析HTML代码和样式 v-text 替换元素里的内容
v-bind 属性绑定 用: v-on方法用@
v-model 双向数据绑定
25.双向数据绑定的原理
Model层上的数据和vue层上的数据一方变化另一方跟着变化
26.路由的跳转和传参有哪几种方式
声明式
不带参数
<router-link :to="{name: 'home' }" > </router-link>
带参数
<router-link to="{path:'/son1' ,query:{ id:'10' }}" >跳转</router-link>
函数式
不带参数
this.$router.push('/home')
带参数
name: "namelogin",
params: {
userid: 999,
name: "wangwu"
}
})
27.组件间的通讯方式有哪些
父子组件之间传参
父传子
父组件中:<sonComponentName sonAcceptValueName="10" />
子组件中:props:{
sonAcceptValueName:{
type:[Number,String,Object]/String
default:10
}
}
子传父
父组件中:<sonComponentName @fromSonEventType="fatherComponentFunctionName()" />
父组件中:methods:{
fatherComponentFunctionName(valueFromSon){
console.log(valueFromSon)
}
}
子组件中:<button @click="sendValueFunctonName()">发送数据</button>
子组件中:methods:{
sendValueFunctonName(){
this.$emit("fromSonEventType",valueFromSon)
}
28.谈一谈对路由守卫的理解(谈理解,一般就是总分总,它是什么,用在哪,有什么用,
怎么用,有什么注意事项,再结合项目说明更好)
路由守卫: 是router对象一个属性,本质上是一个函数。 在 路由切换 时,它 会被调用 ,用它就可以用来去检查凭证
vue-router全局有三个守卫:
1、router.beforeEach 全局前置守卫 进入路由之前
2、router.beforeResolve 全局解析守卫(2.5.0+) 在beforeRouteEnter调用之后调用
3、router.afterEach 全局后置钩子 进入路由之后
import router from './router'; // 引入路由
router.beforeEach((to, from, next) => {
// 通常用于常见的登录权限验证
next();
});
router.beforeResolve((to, from, next) => {
next();
});
router.afterEach((to, from) => {
// 不能使用next()方法
console.log('afterEach 全局后置钩子');
)}
路由独享守卫
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// 调用顺序在全局前置守卫后面,不会被全局守卫覆盖
// ...
}
}
]
路由组件守卫
beforeRouteEnter 进入路由前
beforeRouteUpdate (2.2) 路由复用同一个组件时
beforeRouteLeave 离开当前路由时
beforeRouteEnter (to, from, next) {
// 在路由独享守卫后调用 不!能!获取组件实例 `this`,因为组件实例还没被创建
......
},
beforeRouteUpdate (to, from, next) {
// 在当前路由改变,但是该组件被复用时调用 可以访问组件实例 `this`
// 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
// 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
......
},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用,可以访问组件实例 `this`
// 导航离开该组件的对应路由时调用,我们用它来禁止用户离开,
// 比如还未保存草稿,或者在用户离开前,将setInterval销毁,防止离开之后,定时器还在调用。
29.谈一谈对Vuex的理解
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
核心模块
有五部分组成它们分别是State(Vuex的数据仓库)、Mutations(只能在mutations中修改state的数据状态)、Actions(异步改变共享数据)和Getters(获取state二次处理的数据)
30.谈一谈对混入的理解
混入 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。 一个混入对象可以包含任意组件选项。 当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。 官方文档说的很详细,通俗易懂的话来说一个.vue文件由template,script,style组成,混入的方法可以把mixin这个对象和.vue文件的script里面的内容“混入”(mixin对象的结构和.vue的script里面的结构一样),既此组件既可以调用组件内部的script,也可以调用混入对象。 场景运用: 有两个非常相似的组件,他们的基本功能是一样的,但他们之间又存在着足够的差异性。 他们可能会公用一部分业务逻辑,但是他们的页面结构又不相同。
31.谈一谈对插槽的理解
slot是组件内的一个占位符,该占位符可以在后期使用自己的标记语言填充。
让父组件可以向子组件指定位置插入html结构,也是一种组件间通信方式,
插槽有分为普通插槽和具名插槽
父组件中
普通插槽
<Category>
<div>html结构</div>
</Category>
//子组件中:
<template>
<div>
<slot>插槽的默认内容</slot>
</div>
</template>
具名插槽
<template v-slot:header>免费</template>
<template v-slot:footer>底部</template>
<h2> <slot name="header"></slot>课程</h2>
32.什么是跨域,如何解决
浏览器从一个域名的网页去请求另一个域名的资源时,域名、端口、协议任一不同,都是跨域
跨域问题是浏览器对于ajax请求的一种安全限制:一个页面发起的ajax请求,只能是于当前页同域名的路径,这能有效的阻止跨站攻击。. 因此:跨域问题 是针对ajax的一种限制。
配置代理
module.exports = {
devServer: {
proxy: {
"/api": {
"target": "https://course.myhope365.com",
"pathRewrite": {
"^/api": ""
},
"/login-api": {
"target": "https://course.myhope365.com",
"pathRewrite": {
"^/login-api": ""
}
}
}
}
}
}
33.谈一谈封装请求的心得
1、将所有url地址封装到对象中 可以做适当操作和修饰 最后导出 2、引入封装好的url对象 将请求函数封装进一个对象中 封装的函数的参数需要是带有处理返回结果函数的对象 便于调用者接受请求结果
api的封装要用到axios模块。所以那我们在创建好vue脚手架后需要安装axios依赖包(指令:npm i axios --save)。
api的封装主要的目的就是:在帮助我们简化代码和后期的更新维护。