![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue相关
文章平均质量分 73
Vue相关
海森堡_lichangan
这个作者很懒,什么都没留下…
展开
-
前端编程规范(VSCode + Vue)
第一步:退出 VSCode 应用第二步:输入如下指令,删除 VSCode 的设置和配置sudo rm -rf $HOME/Library/Application\ Support/Code第三步:输入如下指令,删除 VSCode 的插件sudo rm -rf $HOME/.vscode第四步:从 Application 中移除 VSCode...原创 2021-11-18 10:26:32 · 2107 阅读 · 1 评论 -
Vue原理学习
Vue.js的响应式原理概念数据响应式:数据模型仅仅是普通的Javascript对象,而当我们修改数据时,视图会进行更新,避免了繁琐的DOM操作,提高了开发效率。双向绑定当数据发生发生变化,视图会改变;当视图发生改变,数据也随之改变。我们可以使用v-model在表单元素上创建双向数据绑定数据驱动是Vue最独特的特性之一开发过程中仅仅需要关注数据(业务)本身,不需要关心数据是如何渲染视图。数据响应式的核心原理Vue 2.xhttps://cn.vuejs.org/v2/guide/re原创 2021-12-13 14:20:21 · 780 阅读 · 0 评论 -
Vue打包报错
Syntax Error: Error: Cannot find module 'mozjpeg'主要是image-webpack-loader的一些依赖没有安装成功,使得处理图片报错尝试安装依赖:npm install mozjpeg报错:connect ECONNREFUSED 0.0.0.0:443mozjpeg pre-build test failed可以通过修改hosts解决这个问题。Mac系统修改hostshttps://github.com/googlehosts/h原创 2021-11-21 18:33:09 · 2887 阅读 · 0 评论 -
vuex页面刷新数据丢失的解决办法
在vue项目中用vuex来做全局的状态管理, 发现当刷新网页后,保存在vuex实例store里的数据会丢失。原因:因为store里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例,store里面的数据就会被重新赋值初始化解决思路将state的数据保存在localstorage、sessionstorage或cookie中,这样即可保证页面刷新数据不丢失且易于读取。localStorage: localStorage的生命周期是永久的,关闭页面或浏览器之后localStorage转载 2021-11-21 12:01:43 · 517 阅读 · 0 评论 -
日常遇到的问题
vue add element添加之后选择 按需加载,然后会创建一个plugins文件夹,里面会有一个elemnt.js文件,在这里导入相关的控件。原创 2021-11-20 14:34:34 · 3353 阅读 · 1 评论 -
VUE中body设置高度为100%无效的解决方法
在app.vue中的css中添加html,body,#app{ height: 100%; }原创 2021-11-17 13:19:43 · 2209 阅读 · 0 评论 -
Vuex学习笔记
Vue最核心的两个功能:数据驱动和组件化。每个组件都有自己的状态、视图和行为等部分组成。new Vue({ //state data(){ return { count:0 } }, //view template:` <div>{{count}}</div> `, //actions methods:{ increment(){ this.count++; } }}) 状态管理包括:(1)state,驱动应用的数据源原创 2021-10-30 09:35:29 · 314 阅读 · 0 评论 -
vue+webpack打包发布到线上后微信公众号H5部分打开白屏,刷新又好了
vue+webpack打包发布到线上后微信公众号H5部分打开白屏,刷新又好了1、问题2、原因这次可能的原因3、过渡方案4、解决方案4.1 Vue + Webpack配置js按需加载4.2 配置nginx服务器4.3 前端打包保留两个版本参考文章1、问题前一段时间发布新版本之后,第二天有一些客户反馈:在微信端打开出现白屏现象。经过测试之后发现,刷新一下就OK了。白屏主要集中在发版线上后的一段时间主要以ios居多,安卓偶现,刷新就好了.2、原因微信公众号H5白屏现象很多,一部分是浏览器和app自身的原创 2021-10-15 16:03:48 · 4150 阅读 · 1 评论 -
vue项目首屏加载优化
vue项目首屏加载优化1、存在的问题2、什么是首屏加载2.1 首屏加载时间的计算3、加载慢的原因4、解决的办法4.1 路由懒加载4.1.1 什么是路由懒加载?4.1.2 为什么需要懒加载呢?4.1.3 路由懒加载的原理4.1.4 如何实现路由懒加载?4.2 压缩图片4.3 gzip 压缩4.3.1 服务器压缩文件4.3.2 前端 webpack 打包生成 gz 文件4.4 Webpack打包体积优化4.4.1 splitChunks4.4.2 splitChunks优化5、时间轴回放最近这几个月一直在开发转载 2021-10-15 11:10:03 · 5758 阅读 · 0 评论 -
vue中实现锚点定位以及平滑滚动到指定位置
Vue锚点定位传统方式遇到的问题解决办法scrollTop或者scrollIntoView传统方式遇到的问题原生网页做锚点跳转一般使用id和a标签的href实现:<h1 id="title">title</h1><a href="#title">跳转到title</a>在Vue-router中,如果使用的是history模式,当点击超链接时,URL地址会加上#title,导致hash值改变,导致需要多次点击返回才能返回到上一页面。解决办法scr原创 2021-10-10 12:13:17 · 20262 阅读 · 5 评论 -
在Vue中如何不处理内部元素触发的事件?
在Vue中如何不处理内部元素触发的事件?方法一 事件修饰符.self方法二 事件修饰符.stop方法三 event.target方法一 事件修饰符.self <div class="mask" @click.self="close"> <div class="mask-content"></div> </div>方法二 事件修饰符.stop <div class="mask" @click="close"> <原创 2021-10-07 08:20:27 · 758 阅读 · 0 评论 -
Vue学习笔记
Vue的学习1、vue指令1.1 模板语法概述1.1.1 插值文本1.2 指令1.2.1 v-cloak1.2.2 与数据填充相关的指令v-textv-htmlv-pre1.2.3 v-once1.2.4 双向数据绑定v-model1.2.5 事件绑定v-on1.2.6 属性绑定 v-bind绑定class绑定style1.2.7 分支结构v-ifv-show1.2.8 循环结构1.2.8 案例选项卡1、 HTML 结构2、提供的数据3、 把数据渲染到页面4、 给每一个tab栏添加事件,并让选中的高亮1.3原创 2021-09-20 11:53:56 · 649 阅读 · 0 评论 -
Vue Router学习笔记
Vue Router1 前端路由2 路由实现2.1 History 模式2.2 Hash模式2.3 路由的实现原理2.3.1 路由实现步骤2.3.2 Vue Router 实现2.4 SPA(Single Page Application)3 Vue Router的概念3.1 使用步骤3.2 嵌套路由3.2.1 基本使用3.3 定义路由地址3.4 路由命名3. 5 vue-route编程式导航3.5.1 页面导航的两种方式3.5.2 router.push基本用法对象格式的参数3.5.3 router.r原创 2021-10-02 11:06:51 · 604 阅读 · 0 评论