vue
文章平均质量分 80
叶子yes
前端学习之旅,期待你的加入
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
解决模态框中的地图打开后中心点偏向左上角的问题
出现这个问题的原因是地图初始化是在mounted生命周期进行的,也就是说模态框还没有被打开就加载好地图了,而此时模态框的宽高是0,因此地图的中心点就会出现在左上角。原创 2023-02-01 10:08:54 · 534 阅读 · 5 评论 -
【vue】实现滚动条滚动到底部时发送请求获取数据
当后端给我们一个分页获取数据的接口时,我们前端可以通过设置分页按钮来获取到所有的数据,也可以通过判断滚动条位置,当滚动条滚动到底部时就发送请求获取下一页的数据,这样我们就可以不设置分页按钮也能获取到所有的数据。原创 2023-01-19 17:17:28 · 2600 阅读 · 0 评论 -
webpack打包工具的基本使用
由于我们在出口 (output) 中设置了 clear:true ,因此每次我们改动了代码重新打包项目的时候,都会把dist文件夹清理掉重新生成一个新的打包文件,我们的html文件也会被清理掉,因此每次打包都需要我们重新建一个html文件,而使用HtmlWebpackPlugin插件就不再需要我们每次在打包后重新建一个html文件,因为这个插件会帮我们自动生成一个html文件。简单来说,webpack就是用来将项目模块化文件打包生成普通脚本文件,然后再引入到html文件中。原创 2022-10-07 23:55:14 · 1861 阅读 · 2 评论 -
axios介绍以及对axios进行二次封装
axios和ajax的区别?ajax特点:1、ajax是异步的XML和JavaScript2、可以运行浏览器 不可以运行在node 3、发送给后台数据需要手动转换,请求头需要手动设置 4、后端响应的数据需要自己转换成js对象格式 axios特点:1、axios是基于promise的http库 2、可以调用promise的api 3、axios默认发送就是get请求,发送数据默认格式为json 4、axios请求头的数据格式会自动转换原创 2022-10-05 22:58:12 · 14358 阅读 · 3 评论 -
【Vuex】vue状态机详解
使用了mapState方法之后,我们在插值语法直接使用{{msg}}、{{sum}}即可,不需要写成:{{$store.state.msg}}、{{$store.state.sum}},同理mapGetters方法也一样。假设A组件想要拿B组件里面的数据,那就把A组件和B组件的数据放到Vuex中,A组件想要获取B组件数据从vuex中拿,B组件想要获取A组件的数据也从Vuex拿。方法提交该方法给Mutation来执行,Mutation执行完后,将处理完的数据给State,然后State重新渲染数据到页面。原创 2022-10-02 11:04:04 · 2639 阅读 · 5 评论 -
【vue-router】动态路由、嵌套路由、守卫以及编程式导航
例如 : 有一个user组件,对于所有id不同的用户,都要使用这个组件来渲染,那么可以在vue-router的路由路径中使用动态路径参数来达到这个效果。使用$router.push()跳转到指定路由,会向history栈添加一个新的记录,当用户点击浏览器回退按钮的时候,可以回到跳转前的url。使用name与params结合的方式传递的参数时,参数是携带在$route中的,且传递的参数是一次性的,刷新页面数据会丢失。可以看到,当我们更改动态路径参数时,页面没有发生跳转,仍然是当前页面。原创 2022-10-01 09:01:38 · 4101 阅读 · 4 评论 -
【vue-router】Vue路由从创建到使用
路由可以看成加载组件的另一种方式,使用路由来实现组件之间的跳转。vue-router是vue的一个插件,用来提供路由功能。通过路由的改变可以动态加载组件,达到开发单页面程序的目的。第一步:使用CDN引入vue-router插件 第二步:定义组件 第三步:创建路由对象数组 第四步:创建路由器实例对象 第五步:将路由器对象注入到vue实例中 第六步:使用路由原创 2022-09-29 20:30:56 · 1554 阅读 · 0 评论 -
Vue2和Vue3的区别——实例创建、响应式数据代理、v-for和v-if优先级、生命周期
组合式API将Vue2中需要在data、methods、computed、created等选项中实现的功能合并到了一起,所以使用组合式API不需要在不同的选项做不同得操作。Vue2创建应用使用new Vue()构造函数,而Vue3通过 creatApp 函数创建一个新的应用实例,并且实例和模板绑定需要使用mount方法。vue3数据模型会经过一个proxy对象代理,vue2数据模型使用es5的Object.defineproperty()实现代理。在vue2中:v-for 优先级比 v-if 优先级高。原创 2022-09-28 20:53:31 · 2192 阅读 · 2 评论 -
Vue插件(Plugin)、动态组件(component)和混入(mixin)介绍
默认情况下,当组件在切换的时候都会重新创建组件,但是有些时候我们希望组件实例能够被在它们第一次被创建的时候缓存下来。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。在混入时,methods会合并成为一个对象,如果对象的键名发生冲突,则保留组件对象的键值对。不建议使用全局注册混入对象,一旦使用全局混入,它将会影响以后创建的每一个vue实例。同名的钩子函数会被合并为一个数组,依次都会被调用,但是混入对象的钩子函数先被调用。数据对象在混入时,会进行合并,发生冲突时,保留组件的数据。原创 2022-09-28 18:49:11 · 3651 阅读 · 3 评论 -
Vue基础之插槽、自定义指令、render函数、过滤器
Vue中多有的指令都以 v- 来调用。但是,有时候Vue提供给我们的指令并不能满足我们的需求,这个时候 我们就需要自定义指令。指令允许我们对普通 DOM 元素进行底层操作。在Vue实例或组件中添加选项directivesbind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。原创 2022-09-27 19:22:27 · 1691 阅读 · 3 评论 -
Vue组件之间如何进行通信?
组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue的编译器为它添加特殊功能。在有些情况下,组件也可以表现为用is特性进行了扩展的原生 HTML 元素。组件注册的时候需要为该组件指定各种参数。因为组件是可复用的 Vue 实例,所以它们与 new Vue 接收相同的选项,例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。原创 2022-09-26 19:00:30 · 751 阅读 · 4 评论 -
Vue计算属性computed和监听属性watch的区别
我们希望一个变量是经过某种计算然后输出而不是直接输出的时候可以使用到计算属性,计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。而每次调用函数都会导致函数的重新执行。计算属性就是拿着Vue实例已有的属性计算或处理完后返回的一个全新的所以计算属性是一个属性,我们可以在插值语法中直接使用。原创 2022-09-24 07:30:00 · 2925 阅读 · 6 评论 -
Vue基础之事件机制、事件修饰符以及双向数据绑定
滚动事件的默认行为 (即滚动行为) 将会立即触发 ,一般与scroll连用,能够提升移动端的性能 (因为每次事件产生,浏览器都会去查询一下是否有preventDefault阻止该次事件的默认动作。Vue提供了更好的方式:事件处理函数只有纯粹的数据逻辑,而不是去处理 DOM 事件细节,通过事件修饰符来完成这些细节。它会根据控件类型自动选取正确的方法来更新元素。Vue使用 v-on 指令监听DOM 事件,并在触发时运行一些 JavaScript 代码, 还可以接收一个需要调用的方法名称,我们可以在方法中通过。原创 2022-09-23 20:43:39 · 685 阅读 · 1 评论 -
一文带你读懂Vue生命周期
(也就是说,如果有template选项,就以template为模板进行解析,如果我们还手动写了一个render函数,就以render创建的html元素为模板进行解析)vue生命周期(又称生命周期回调函数、生命周期函数、生命周期钩子),指的是vue在关键时刻帮我们调用一些特殊名称的函数。实例初始化之前,完成一些事件和默认生命周期,此时还不可以访问data中的数据和methods中的方法。实例数据变化触发的生命周期,此时数据已经是最新的,并且视图重新渲染完毕。实例销毁之前,此时仍然可以访问到Vue实例。原创 2022-09-23 11:18:45 · 632 阅读 · 2 评论 -
Vue基础之模板语法介绍
Vue是一套用于构建用户界面的渐进式框架。与其他大型框架不同的是,Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层,不仅容易上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue也完全能够为复杂的单页应用提供驱动。用来做单页面应用,页面跳转用的vue插件路由来实现跳转。vue官网已经更新到了vue3,但是我们还是先从vue2开始。我们使用vue之前需要先引入vue框架,直接去官网中复制script标签:学习->教程->安装:原创 2022-09-23 17:16:19 · 1450 阅读 · 5 评论
分享