文章目录
1.Vue常见的指令有哪些,有什么用
- v-cloak防止页面闪烁,
- v-text:会替换掉元素里的内容,
- v-html:可以渲染html界面,能解析富文本,
- v-bind是界面元素属性值的绑定,可简写成:,
- v-on是进行事件的绑定,可简写成@
- V-for遍历数组,数字,对象,参数(item,key,index) in list(key 提高重排效率,key的值是唯一的,key只能是字符串或者数字,可以给他index的值)
- v-if与v-show,显示隐藏元素
- v-model双向数据绑定
-
2.双向数据绑定的原理
双向数据绑定的原理:采用“数据劫持”结合“发布者-订阅者”模式的方式,通过“Object.defineProperty()”方法来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。
3.路由的跳转和传参有哪几种方式
1 router-link标签
<router-link :to="{ path: 'yourPath', params: { name: 'name', dataObj: data }, query: { name: 'name', dataObj: data } }"> </router-link>
2$router方式跳转
this.$router.push('yourPath?code=123'),
this.$router.push({name:'home',params: {id:'1'}})
4.组件间的通讯方式有哪些
1:父传子,2:子传父,3:vuex全局,
4:eventBus事件总线
sayHello() {
Bus.$emit('sayHello', 'hello');
}
Bus.$on('sayHello', target => {
console.log(target); // => 'hello'
});
5:缓存
5.谈一谈对路由守卫的理解
路由守卫正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。这里有很多方式植入路由导航中:全局的,单个路由独享的,或者组件级的。
路由守卫:在router里写router.beforeEach((to, from, next) => {if(to.meta.login){next('/') getUserInfo().then()}else {next()}}) ,to:去哪,form:来自哪,next:方法(下一次去哪,参是是路径)直接调用 next() 允许跳转,next(false) 不允许跳转,next('/index') 代表要跳转到首页
在路径中定义路由元数据meta{login = true}
6.谈一谈对Vuex的理解
Vuex是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储,管理应用中所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化,使用vuex可以进行统一的状态管理,解决不同组件共享数据的问题
7.谈一谈对混入的理解
混入是一种非常灵活的方式,用来分发Vue组件中可复用的功能,一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有的混入对象的选项将被“混合”进入该组件本身的选项。
作用是提高代码复用性
8.谈一谈对插槽的理解
可以给同一个组件起不同的标题名
9.什么是跨域,如何解决
跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器施加的安全限制
同源策略:浏览器的一个安全协议,协议主机端口要保持一致,只要有一个不一致,就是跨域请求。
同源策略(Same Origin Policy)是一种约定,它是浏览器最核心也是最基本的安全功能。同源策略会阻止一个域的javascrip)脚本和另一个域的
内容进行交互,是用于隔离潜在恶意文件的关键安全机制.当一个请求ur1的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域
解决跨域
1.后台直接不做限制,放开所有请求。优点就是方便,缺点就是不安全2.JSONP原理:利用script标签不受同源策略,需要后端配合
3.配置代理
登陆鉴权 token cookie
配置代理写在vue.config.js文件里
//配置代理
devServer: {
proxy: {
'/api': { //代理名称,这里最好有一个
target: 'https://course.myhope365.com', // 后台接口域名
changeOrigin: true, //是否跨域
// pathRewrite:{
// '^/course-api':''//路径重写
// }
},
}
}
10.谈一谈封装请求的心得
封装请求可以简化代码,提高复用率,封装后更方便使用与维护