每天vue一下

简介: 每天vue一下

1.描述在项目中使用vuerouter的流程?



创建一个对象,通过path和component属性配置URL路径和组件的对应关系。

通过这个配置对象创建路由页面中添加router-view组件显示匹配到的组件页面中使用router-link组件制作路由跳转的按钮在JS中可以使用this.$router.push方法实现路由页面的跳转


2.vue中如何获取dom和组件



在<标签ref="domName">或<组件名ref="domName">上加ref属性

js中通过this.$refs.domName


3.route和router的区别是什么?



route存储的是属性比如route.query,route.params

router存储的是方法比如router.push,router.replace,router.go


4.params和query的区别?



1.用法上query要用path来引入,params需要name来引入,接收参数都是类似的,分

别是this.route.query.name和this.route.params.name

2.展示上的query更加类似于我们ajax中get传参,params则类似于post,说的再简单一点,

前者在浏览器地址栏中显示参数,后者则不显示

3.params是路由的一部分,必须要有。query是拼接在url后面的参数,没有也没关


5.路由导航守卫有几种?



全局守卫、组件内守卫和路由独享守卫。


6.keep-alive的作用是什么?



一个路由在切换时会被销毁,之前的数据全部丢失,下次再访问这个组件时,需

要重新创建,重新调接口,重新渲染,为了提高性能我们可以使用keep-alive

把组件缓存起来,这样在组件切换时,这个组件并没有被销毁,下次访问时,就

可以显示出来,而且原组件中数据还在。


7.路由导航守卫的参数有几种?参数的作用?



to:对象,将要跳转到的路由对象。

from:对象,跳转前的路由对象。

next:函数,控制是否跳转


8.axios如何配置基地址?



写法一、直接在axios上设置axios.defaults.baseURL

// 配置头部
axios.defaults.baseURL = "http://localhost:8888/";


写法二、在创建时使用baseURL属性:create

// 创建Axios
const Ser = axios.create({
    // axios中请求配置有baseURL选项,表示请求URL公共部分
    baseURL: "地址",
    // 超时设置
    timeout: 50000
})


9.created和mounted的区别



created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视

mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom

节点进行一些需要的操作。


10.在Vue中使用一个自定义组件的流程是



自定义组件有两种情况:

全局组件:

在创建实例之前通过Vue.component定义全局组件

在任何一个组件的模板中直接使用

局部组件

创建一个自定义组件

在组件中使用时需要先使用import引入这个自定义组件

引入之后需要在components属性中注册这个组件

注册之后就可以在模板中使用


11.父传子组件通信?



1.在父组件的子组件标签上绑定一个属性,挂载要传输的变量

2.在子组件中通过props来接受数据,props可以是数组也可以是对象,接受的数据可以直接使用的数据可以直接使用


12.父传子中props属性验证的数据类型有哪些?



字符串 布尔 数值 数组 对象 函数


13.子传父组件通信的流程?



子传父:主要通过$emit来实现

具体实现:子组件通过绑定事件触发函数,在其中设置this.$emit

中有两个参数一是要派发的自定义事件,第二个参数是要传递的值


14.兄弟组件通信的流程?



兄弟之间传值有两种方法:

方法一

创建一个空的vue并暴露出去,这个作为公共的bus,即当作两个组件的桥梁

在两个兄弟组件中分别引入刚才创建的bus

在组件A中通过bus.emit发送数据

在组建B中通过bus.on接收数据

方法二通过vuex实现


15.什么是插槽?插槽有哪些?



插槽是用来向一个组件中传入另一个组件或者一段HTML结构用的

插槽分为三种:

匿名插槽:没有设置名称的插槽,一个组件中只能有一个匿名插槽

有名插槽:通过name属性设置了名字的插槽

作用域插槽


16.vm.$nextTick是用来干什么的?



通过this.$nextTick我们可以注册一个回调函数,这个回调函数会在下次DOM更新结束之后执行。

vue的数据是采用延迟异步更新的,就是说当我们修改了数据之后,页面并不会马上就更新,如果这个时候我们通过DOM操作来获取数据的话,获取的还是之前旧的数据,这个时候我们就可以使用$nextTick方法


17.vue中是如何绑定事件?



在vue中使用v-on指令来绑定一个事件,事件可以是methods中定义的方法,也可以使用@来进行简写


18.data为什么是一个方法而不是一个对象?



对象的特性是浅拷贝的数据相互引用都是会改变对象的内容,数据会混乱Vue中的data是一个对象类型,对象类型的数据是按引用传值的。这就会导致所有组件的实例都共享同一份数据,这是不对的,我们要的是每个组件实例都是独立的所以为了解决对象类型数据共享的问题,我们需要将data定义成一个函数,每个实例需要通过调用函数生成一个独立的数据对象


19.什么是计算属性?和监听器有什么区别?



在Vue中使用computed来定义计算属性,每个计算属性就是一个函数,这个函数需要有一个返回值。和监听器的区别:

计算属性主要用途:得到一个经过计算的数据

并且当依赖的数据改变时重新计算,重点在于得到数据

监听器的主要用途:当依赖改变函数时,一个函数重点在干一件事,这件事通常

比较复杂,比如:当搜索条件改变时,重新调用后端接口等

20.什么是监听器?和计算属性的区别?



在Vue中使用watch

属性来定义一个监听器函数,当依赖的数据发生变化时触发函数

与计算属性的区别:

计算属性主要用途:得到一个经过计算的数据并且当依赖的数据改变时重新计算,重点在于得到数据

监听器的主要用途:当依赖改变函数时,一个函数重点在干一件事,这件事通常比较复杂,比如:当搜索条件改变时,重新调用后端接口等

目录
打赏
0
0
0
0
21
分享
相关文章
|
2月前
|
vue使用iconfont图标
vue使用iconfont图标
152 1
Vue Router 核心原理
Vue Router 是 Vue.js 的官方路由管理器,用于实现单页面应用(SPA)的路由功能。其核心原理包括路由配置、监听浏览器事件和组件渲染等。通过定义路径与组件的映射关系,Vue Router 将用户访问的路径与对应的组件关联,支持哈希和历史模式监听 URL 变化,确保页面导航时正确渲染组件。
ry-vue-flowable-xg:震撼来袭!这款基于 Vue 和 Flowable 的企业级工程项目管理项目,你绝不能错过
基于 Vue 和 Flowable 的企业级工程项目管理平台,免费开源且高度定制化。它覆盖投标管理、进度控制、财务核算等全流程需求,提供流程设计、部署、监控和任务管理等功能,适用于企业办公、生产制造、金融服务等多个场景,助力企业提升效率与竞争力。
68 12
Vue中的class和style绑定
在 Vue 中,class 和 style 绑定是基于数据驱动视图的强大功能。通过 class 绑定,可以动态更新元素的 class 属性,支持对象和数组语法,适用于普通元素和组件。style 绑定则允许以对象或数组形式动态设置内联样式,Vue 会根据数据变化自动更新 DOM。
Vue Router 简介
Vue Router 是 Vue.js 官方的路由管理库,用于构建单页面应用(SPA)。它将不同页面映射到对应组件,支持嵌套路由、路由参数和导航守卫等功能,简化复杂前端应用的开发。主要特性包括路由映射、嵌套路由、路由参数、导航守卫和路由懒加载,提升性能和开发效率。安装命令:`npm install vue-router`。
iframe嵌入页面实现免登录思路(以vue为例)
通过上述步骤,可以在Vue.js项目中通过 `iframe`实现不同应用间的免登录功能。利用Token传递和消息传递机制,可以确保安全、高效地在主应用和子应用间共享登录状态。这种方法在实际项目中具有广泛的应用前景,能够显著提升用户体验。
70 8
Vue 组件化开发:构建高质量应用的核心
本文深入探讨了 Vue.js 组件化开发的核心概念与最佳实践。
77 1
vue 数据驱动视图
总之,Vue 数据驱动视图是一种先进的理念和技术,它为前端开发带来了巨大的便利和优势。通过理解和应用这一特性,开发者能够构建出更加动态、高效、用户体验良好的前端应用。在不断发展的前端领域中,数据驱动视图将继续发挥重要作用,推动着应用界面的不断创新和进化。
111 58
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱前端的大一学生,专注于JavaScript与Vue,正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我,持续更新中!🎉🎉🎉
68 1
vue学习第一章

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等