Vue2
文章平均质量分 82
Vue目前最火的的一个前端框架,三大主流前端框架之一。是一套构建用户界面的框架(一套完整的解决方案,对项目侵入性大,中途需要跟换框架则需要重构整个项目),只关注视图层,易上手
猫老板的豆
旁观自己 善待朝夕
展开
-
Vue Router 4 与 Router 3 路由配置与区别
Composition API 的集成:Vue Router 4 提供了更好的对 Vue 3 Composition API 的支持,允许你使用。与 Vue 版本的兼容性:Vue Router 4 是专门为 Vue 3 设计的,而 Vue Router 3 与 Vue 2 兼容。TypeScript 支持:Vue Router 4 对 TypeScript 提供了更好的支持,类型定义更加完整和准确。路由守卫的改进:Vue Router 4 改进了路由守卫(导航守卫)的 API,提供了更多的灵活性和控制。原创 2024-04-12 15:37:38 · 663 阅读 · 0 评论 -
Vue Router 路由hash和history模式
在 Vue 中,路由的两种主要模式是和,默认的路由模式是hash模式。。这两种模式决定了 URL 的外观以及浏览器如何处理 URL 的变化。原创 2024-05-08 16:40:07 · 1474 阅读 · 0 评论 -
Vue 3 性能飞跃:解析其性能提升的关键方面
Vue 3 提供了更好的 Tree Shaking 支持,可以消除代码中未使用的部分,减少了不必要的代码和模块,减少打包体积,从而降低了应用程序的加载时间和运行时的内存占用。Vue 3 引入了事件缓存机制,当事件被多次触发时,不会每次都执行事件处理函数,而是使用缓存的结果,从而减少了不必要的计算和处理时间,提高了应用程序的性能。对于多层嵌套的对象,由于proxy只能代理一层,所以vue3在真正访问到对象属性的时候,才去判断递归,而不是在初始化的时候就一股脑的递归。Proxy 是直接代理整个对象。原创 2024-04-16 16:43:26 · 942 阅读 · 0 评论 -
Vue router 与 route 的区别
在 Vue Router 中,router 和 route 是两个不同的概念,它们各自具有不同的作用和功能。原创 2024-04-13 16:04:02 · 1343 阅读 · 1 评论 -
Vue Router 路由详解
Vue路由是Vue.js官方的路由管理器,它和Vue.js深度集成,用于构建单页面应用(SPA)。Vue路由通过监听URL的变化,根据URL的不同加载和渲染不同的组件,从而实现单页面应用。当URL变化时,Vue路由会匹配到对应的路由规则,然后加载和渲染该规则对应的组件,而不需要重新加载整个页面。Vue路由使得开发者能够更加方便地管理页面间的导航和组件的渲染。原创 2022-05-10 12:01:50 · 1216 阅读 · 2 评论 -
Vue Router 路由动态缓存组件
Vue Router 允许你缓存路由组件,这样在用户导航回之前的页面时,组件的状态会被保留而不是重新渲染。这可以通过使用组件来实现。是一个内置抽象组件,它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。它的主要作用是缓存不活动的组件实例,而不是销毁它们。当组件在包裹下被切换时,它的状态(包括数据、DOM 结构等)都会被保留,以便在下次重新显示时能够恢复之前的状态,而不是重新创建组件实例。根据路由的meta字段中的keepAlive属性来决定是否缓存组件。原创 2024-04-13 11:29:57 · 2715 阅读 · 5 评论 -
Vue双向绑定原理
举例说明:小明最近看上了一套房子,到了售楼处之后才被告知,该楼盘的房子早已售罄。好在售楼 MM 告诉小明,不久后还有一些尾盘推出,开发商正在办理相关手续,手续办好后便可以购买。但到底是什么时候,目前还没有人能够知道。于是小明把电话号码留在了售楼处。售楼 MM 答应他,只要新楼盘一推出就马上发信息通知小明。除了小明,还有小红、小强、小龙也是一样,他们的电话号码都被记在售楼处的花名册上,新楼盘推出的时候,售楼 MM会翻开花名册,遍历上面的电话号码,依次发送一条短信来通知他们。原创 2023-10-17 15:55:04 · 227 阅读 · 0 评论 -
vue 打包出现的缓存问题
vue 项目每一次打包上线,都会有浏览器缓存问题,需要用户手动清除缓存,十分麻烦。原创 2022-09-02 09:35:51 · 1131 阅读 · 0 评论 -
vue3中多环境配置打包
vue多环境配置及打包env.development(开发环境).env.production(生产环境).env.test(测试环境)原创 2022-08-26 18:29:18 · 1948 阅读 · 0 评论 -
Vite创建Vue2项目
在 Vite创建Vue3项目 中讲到,Vite 官方对 Vue 的支持只针对于Vue3.x 版本,而对于 Vue2.x 是不支持的。今天就来讲讲如何使用 Vite 创建 Vue2 项目使 Vite 支持 Vue2.x,是需要安装插件来实现,官方文档文章目录Vite创建Vue2项目1. 输入项目名称2. 选择框架3. 选择不同4. 项目创建完成5. 项目结构6. 安装插件7. 使用插件8. 安装vue9. 修改项目结构10. 启动项目Vite创建Vue2项目Vite 需要 Node.js 版.原创 2021-09-16 12:08:26 · 8688 阅读 · 4 评论 -
Vue子组件调用父组件方法
一、直接在子组件中通过this.$parent.event来调用父组件的方法<!-- 父组件 --><template> <div> <child></child> </div></template><script>import child from '~/components/dam/child';export default { components: { child }, me原创 2020-08-17 18:51:02 · 375 阅读 · 0 评论 -
对MVVM的理解
MVVM分为Model、View、ViewModel三者。模型层视图层视图模型层MVVM 的出现促进了前后端分离,极大地提高了前端开发效率。MVVM 的核心是 ViewModel 层,该层向上与视图层进行双向数据绑定,向下与 Model 层通过接口请求进行数据交互,起呈上启下作用。因此当Model中的数据改变时会触发View层的刷新,View中由于用户交互操作而改变的数据也会在Model中同步。原创 2020-05-26 14:30:34 · 1033 阅读 · 0 评论 -
Vue中的虚拟DOM、diff算法、key作用
diff 算法是一种优化手段,将前后两个模块进行差异化对比,修补(更新)差异的过程叫做patch(打补丁)为什么 vue ,react 这些框架中都会有 diff 算法呢?要知道渲染真实 DOM 的开销是很大的,比如有时候我们修改了某个数据,如果直接渲染到真实 DOM 上会引起整个 DOM 树的重绘和重排,有没有可能我们只更新我们修改的那一小块 DOM 而不要更新整个 DOM 呢?diff 算法能够帮助我们。当数据发生变化时,vue是怎么更新节点的?我们先根据真实 DOM 生成一棵(虚拟DOM)树,当。原创 2020-05-15 15:46:41 · 918 阅读 · 1 评论 -
Vue中computed与watch
深度监听,为了发现对象内部值的变化,复杂类型的数据时使用,例如数组中的对象内容的改变,注意监听数组的变动不需要这么做。deep的意思就是深入观察,监听器会一层层的往下遍历,给对象的所有属性都加上这个监听器,但是这样性能开销就会非常大了,任何修改obj里面任何一个属性都会触发这个监听器里的 handler。中的函数所依赖的属性没有发生改变的时候,那么调用当前函数的时候结果会从缓存中读取,除非依赖的响应式属性变化时才会重新计算;// 监听当前属性值的变化,当属性值发生变化时执行,更新相关的属性数据。原创 2020-05-14 11:43:58 · 564 阅读 · 1 评论 -
Vue2 生命周期
执行时组件实例还未创建,通常用于插件开发中执行一些初始化任务created:组件初始化完毕,各种数据可以使用,常用于异步数据获取: 未执行渲染、更新,dom未创建mounted: 初始化结束,dom已创建,可用于获取访问数据和dom元素: 更新前,可用于获取更新前各种状态updated: 更新后,所有状态已是最新: 销毁前,可用于一些定时器或订阅的取消destroyed:组件已销毁,作用同上。原创 2017-11-08 14:09:02 · 2106 阅读 · 1 评论 -
移动端调试工具vConsole
1. 安装npm install vconsole2. 新建文件在 src/assets 目录下创建个util文件夹,并在里新建一个文件 vconsole.js,如下:import Vconsole from 'vconsole'let vConsole = new Vconsole()export default vConsole3. 引用可以在mai...原创 2018-07-20 17:03:51 · 919 阅读 · 0 评论 -
vue-cli build打包后CSS前缀被自动去除
background: -webkit-linear-gradient(left,#ccc,#fff)background: -moz-linear-gradient(left,#ccc,#fff);background: -o-linear-gradient(left,#ccc,#fff);background: linear-gradient(left,#ccc,@stop);原本是...原创 2018-09-18 15:10:22 · 1215 阅读 · 0 评论 -
Vue Router 路由跳转及传参
查询参数(query)和路由参数(params)。带查询参数query时:无论是直接路由path还是命名路由name,地址栏会变成/login?color=red;带路由参数params时:若是直接路由path则 params 携带参数不生效,无法通过获取参数;若是命名路由name则可通过正常获取参数,地址栏会变成/login/red;原创 2018-09-18 17:40:15 · 1341 阅读 · 1 评论 -
VUE解决IE不能用的方法
一般来说VUE本身是不支持IE的,而且在vue-cli项目在IE下报Promise未定义错误解决方法:第一步:下载插件: cnpm install --save babel-polyfill第二步:入口文件main.js引入( import 'babel-polyfill')第三步:配置文件修改 vue-loader.conf(脚手架工具构建的项目修改这个配置文件,如果没有就修改web...原创 2018-09-25 16:19:58 · 2740 阅读 · 0 评论 -
使用vue插件添加全局方法属性
1、新建插件文件Plugins.js:export default{ install(Vue){ Vue.prototype.$const={//常量 URL:"http://www.fly63.com/",//项目请求接口的url } Vue.prototype.$utils={//全局方法 ge...原创 2018-11-15 19:02:54 · 3922 阅读 · 0 评论 -
vue-cli 3.0 中 vue.config.js 相关配置
vue cli3 和 vue cli2 相比文件目录少了很多配置,没有了build和config目录那么像vue cli2 之前的关于端口号的配置,打包之后路径的配置,图片的配置 等等,应该去哪里配置呢,vue cli3 可以在项目根目录新建一个vue.config.js文件,像之前的很多繁琐配置,都可以在这个文件里配置啦。官方是这样说的。vue.config.js 是一个可选的配置文件,...原创 2019-01-24 10:05:06 · 2548 阅读 · 0 评论 -
router.js相关配置
有关路由的相关配置router.js:import Vue from 'vue'import Router from 'vue-router'import { getStore } from 'js/store'// vue路由懒加载 异步加载const Index = resolve =&amp;amp;gt; require(['@/pages/index/Index'], resolve...原创 2019-01-24 10:36:10 · 11598 阅读 · 1 评论 -
vue中对axios的封装
文件中,这样可以把api统一管理起来,以后维护修改只需要在。把封装的方法放在一个。在本地调试的时候,还。原创 2019-01-24 11:33:16 · 1426 阅读 · 2 评论 -
.eslintrc.js相关配置
.eslintrc.js相关配置module.exports = { root: true, //此项是用来指定javaScript语言类型和风格,sourceType用来指定js导入的方式,默认是script,此处设置为module,指某块导入方式 &quot;parserOptions&quot;: { &quot;parser&quot;: &quot;babel-esl原创 2019-01-21 16:19:12 · 2925 阅读 · 1 评论 -
vue数据更改视图不更新问题
在一个组件实例中,只有在data里初始化的数据才是响应的,Vue不能检测到对象属性的添加或删除,没有在data里声明的属性不是响应的。Vue不允许在已经创建的实例上动态添加根级响应式属性,但是可以使用$set方法将相应属性添加到嵌套的对象上。例子一:属性a是已经声明了的,是响应的;属性b没有提前声明,因此改变了属性b的值的时候,如果直接赋值 this.form.b = ‘desc’ ...原创 2019-02-28 09:41:30 · 2531 阅读 · 0 评论 -
vue-router传递参数3种方法
第一种:get方法传递值<router-link :to="{path:'/test',query: { userId: 123,userName:'xia' }}">跳转</router-link>接收值// 页面刷新的时候不会消失this.$route.query.userId // 123this.$route.query.userName // x...原创 2019-03-14 16:12:28 · 12668 阅读 · 0 评论 -
elementUI表单校验
注册组件表单校验&lt;template&gt; &lt;div class="registerContent"&gt; &lt;nav id="nav-bg"&gt;&lt;/nav&gt; &lt;div class="mai原创 2018-06-01 11:12:14 · 5045 阅读 · 0 评论 -
Vue Router 路由鉴权
首先,你需要在 Vue Router 中定义你的路由。你可以为每个路由添加一个 meta 字段,用于存储关于该路由的额外信息,例如权限要求。meta: {title: '登录',requiresAuth: false // 不需要权限的路由},meta: {title: '我的地址',requireAuth: true // 只要此字段为true,必须做鉴权处理// 更多...原创 2018-06-14 17:59:28 · 4159 阅读 · 3 评论 -
vue.js之组件之间的数据传递
$emit (传递数据) 触发当前实例上的事件。附加参数都会传给监听器回调。$on (接收数据) 监听当前实例上的自定义事件。事件可以由vm.$emit触发。 回调函数会接收所有传入事件触发函数的额外参数。子组件通过$emit传递数据到父组件&lt;div id="app"&gt; &lt;p&gt;{{ total }}&lt;/p&am原创 2017-11-16 14:54:29 · 656 阅读 · 0 评论 -
vue.js之组件
Vue.component 注册全局组件基本步骤Vue.js的组件的使用有3个步骤:创建组件构造器、注册组件和使用组件。下面的代码演示了这3个步骤:<div id="app"> <!-- 3. #app是Vue实例挂载的元素,应该在挂载元素范围内使用组件--> <my-test></my-test><...原创 2017-11-10 11:44:18 · 508 阅读 · 0 评论 -
vue.js之动态组件
:is 动态组件使用 v-bind:is=”组件名”,会自动去找匹配的组件名,如果没有,则不显示;<div id="app"> <test v-bind:is="which_to_show"></test></div><script> var demo = new Vue({ el: "#app", data: { which原创 2017-11-17 10:22:37 · 471 阅读 · 0 评论 -
vue.js之 todolist 简单综合实例
todolist 效果图:具体代码:<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-sca原创 2017-11-08 16:12:28 · 404 阅读 · 0 评论 -
vue.js之快速入门
vue的安装安装先不详讲,先直接引入官方cdn<script src="https://cdn.jsdelivr.net/npm/vue"></script>数据驱动视图vue 实例<!-- 这是我们的 View --><div id="app"> 大量vue视频教程请加群:{{ name }}</div><script type="text/javascript"> // 这是原创 2017-11-03 18:09:04 · 342 阅读 · 0 评论 -
vue.js之filter过滤器
vue.js filter 过滤器原创 2017-11-06 18:09:47 · 599 阅读 · 1 评论 -
vue.js之v-show 与 v-if
v-show 指令v-show 根据表达式之真假值来控制元素的显示/隐藏的(css的display属性)。 带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。 显示 隐藏原创 2017-11-07 18:17:08 · 416 阅读 · 1 评论 -
vue.js之v-text 与 v-html
v-text 与 v-html 的区别类似于 jquery 里 .text() 和 .html() 的区别v-text 指令 <div id="app"> <p v-text="msg"></p> <!--效果一样--> <p>{{ msg }}</p> </div> <script> let app = new Vue({ el:"#app", dat原创 2017-11-07 18:01:44 · 1638 阅读 · 0 评论 -
vue.js之v-on与v-bind
v-on 指令<div id="app"> <button v-on:click="say">点击</button> <!--简写:<button @click="say">点击</button>--></div><script> let vm = new Vue({ el: "#app", data: { name:原创 2017-11-07 16:24:44 · 543 阅读 · 0 评论 -
vue.js之v-model与v-once
v-model指令( 双向绑定 )v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值。<div id="app"> <input v-model="message"> <p>输入:{{ message }}</p></div>&l原创 2017-11-07 17:51:04 · 1002 阅读 · 0 评论 -
Vue.js之$refs
尽管有 prop 和事件,但是有时仍然需要在 JavaScript 中直接访问子组件。为此可以使用 ref 为子组件指定一个引用 ID。ref 为子组件指定一个引用 ID,使父组件能通过 ref 直接访问子组件中的数据通过 this.$refs.outsideComponentRef 能直接定位到 ref=”outsideComponentRef” 的上,并返回它例化对象一、ref使用在外面的组件上原创 2017-11-16 16:03:27 · 2789 阅读 · 0 评论 -
vue.js之mixins混合
混合以一种灵活的方式为组件提供分布复用功能。混合对象可以包含任意的组件选项。当组件使用了混合对象时,混合对象的所有选项将被“混入”组件自己的选项中。一、Mixins的基本用法现在有个数字点击递增的程序,假设已经完成了,这时我们希望每次数据变化时都能够在控制台打印出提示:“数据发生变化”.代码实现过程: num:{{ num }}原创 2017-11-17 18:11:57 · 568 阅读 · 1 评论