<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[happyStudy_的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/happyStudy_</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; happyStudy_]]></copyright><item><title><![CDATA[基于vue监听滚动事件，实现锚点内容平滑滚动，动态修改锚点状态]]></title><link>https://blog.youkuaiyun.com/happyStudy_/article/details/122383189</link><guid>https://blog.youkuaiyun.com/happyStudy_/article/details/122383189</guid><author>happyStudy_</author><pubDate>Sat, 08 Jan 2022 17:45:20 +0800</pubDate><description><![CDATA[基于vue监听滚动事件，实现锚点内容平滑滚动，动态修改锚点状态]]></description><category></category></item><item><title><![CDATA[图片资源压缩 vue.config.js配置优化]]></title><link>https://blog.youkuaiyun.com/happyStudy_/article/details/121614058</link><guid>https://blog.youkuaiyun.com/happyStudy_/article/details/121614058</guid><author>happyStudy_</author><pubDate>Mon, 29 Nov 2021 17:04:19 +0800</pubDate><description><![CDATA[图片资源压缩 vue.config.js配置优化需求：网站内图片大小不超过100kb
需求：网站内图片大小不超过100kb
项目中我们会遇到静态文件过大，上线后网页加载慢。
gzip加速
第一步安装依赖：
npm install --save-dev compression-webpack-plugin

（这样会安装最新的版本，如果你webpack版本过低，则会安装失败。）

会提示以上内容。这里就需要降低compression-webpack-plugin版本，这里我使用的是5.0.1版本
npm in]]></description><category></category></item><item><title><![CDATA[mpvue小程序开发]]></title><link>https://blog.youkuaiyun.com/happyStudy_/article/details/118541193</link><guid>https://blog.youkuaiyun.com/happyStudy_/article/details/118541193</guid><author>happyStudy_</author><pubDate>Wed, 07 Jul 2021 11:18:21 +0800</pubDate><description><![CDATA[mpvue，vant-ui小程序开发项目配置api.js,request.js请求拦截响应拦截处理请求方式页面使用api,调用接口；ap.vue调用微信登录API，请求登录接口获取openId;封装一些实用技巧（页面url,url参数，copy 数据，一些微信api的处理）微信分享数据分页处理（数据量达到一定数量添加分页处理）常规操作编辑数据：单选，全选，反选，删除
项目配置
mpvue 开发小程序接口数据统一管理
项目里做API与数据分离统一管理,api.js
小程序里请求数据接口使用wx:request]]></description><category></category></item><item><title><![CDATA[NUXT---项目]]></title><link>https://blog.youkuaiyun.com/happyStudy_/article/details/114277461</link><guid>https://blog.youkuaiyun.com/happyStudy_/article/details/114277461</guid><author>happyStudy_</author><pubDate>Wed, 10 Mar 2021 15:56:27 +0800</pubDate><description><![CDATA[npx create-nuxt-app nuxt-lpi  //搭建项目


.nuxt
运行缓存目录
assets
资源目录，用于存放如 css 文件，js 文件，图片
components
组件目录，用于存放 vue 组件
layouts
布局目录，用于设置布局，文件名即为布局名
在 pages 目录里的组件可以通过 layout 属性指定布局组件，不指定默认为 default。
布局组件中使用  标签指定应用布局时，page 组件所在的位置。
middleware
中间件目录，用于设置中间件函数，文件]]></description><category></category></item><item><title><![CDATA[表单验证字母数字中文常用正则]]></title><link>https://blog.youkuaiyun.com/happyStudy_/article/details/114360806</link><guid>https://blog.youkuaiyun.com/happyStudy_/article/details/114360806</guid><author>happyStudy_</author><pubDate>Thu, 04 Mar 2021 10:11:55 +0800</pubDate><description><![CDATA[只能输入字母和数字 

&lt;el-inputv-model="invoiceDate.tax_code"type="text"oninput="value=value.replace(/[^\w\.\/]/ig,'')"&gt;&lt;/el-input&gt;

只能输入数字

oninput="value=value.replace(/\D/g,'')"  oninput="value=value.replace(/[^\d\-\d]/g,'')"

不能含数字，输入中文或英文...]]></description><category></category></item><item><title><![CDATA[vue 动态设置滚动条高度]]></title><link>https://blog.youkuaiyun.com/happyStudy_/article/details/114093887</link><guid>https://blog.youkuaiyun.com/happyStudy_/article/details/114093887</guid><author>happyStudy_</author><pubDate>Thu, 25 Feb 2021 17:28:56 +0800</pubDate><description><![CDATA[vue 动态设置滚动条高度

获取动态内容高度，设置监听


           &lt;div class="description_cont" ref="cont_height"&gt;
                &lt;pre v-html="result.description"&gt;&lt;/pre&gt;
              &lt;/div&gt;
            div class="description_cont" :style="{maxHeight: scr]]></description><category></category></item><item><title><![CDATA[2020-09-23]]></title><link>https://blog.youkuaiyun.com/happyStudy_/article/details/108755855</link><guid>https://blog.youkuaiyun.com/happyStudy_/article/details/108755855</guid><author>happyStudy_</author><pubDate>Wed, 23 Sep 2020 16:30:09 +0800</pubDate><description><![CDATA[npminstallxxx--registry=https://registry.npm.taobao.org



npm install 失败，可以使用cnpm


npm install XXXX --registry=https://registry.npm.taobao.org


]]></description><category></category></item><item><title><![CDATA[vue项目刷新当前页面 --友好刷新]]></title><link>https://blog.youkuaiyun.com/happyStudy_/article/details/107808521</link><guid>https://blog.youkuaiyun.com/happyStudy_/article/details/107808521</guid><author>happyStudy_</author><pubDate>Wed, 05 Aug 2020 10:43:04 +0800</pubDate><description><![CDATA[provide / inject组合 方式是我试过最实用的，下面用项目截图给大家说明下：首先，要修改下你的app.vue





去到某个页面使用







有个不友好刷新：//this.$router.go(0)
]]></description><category></category></item><item><title><![CDATA[vue切换页面 动态设置meta和title标签内容]]></title><link>https://blog.youkuaiyun.com/happyStudy_/article/details/107689526</link><guid>https://blog.youkuaiyun.com/happyStudy_/article/details/107689526</guid><author>happyStudy_</author><pubDate>Thu, 30 Jul 2020 14:32:19 +0800</pubDate><description><![CDATA[思路：

1）由于vue是单页面应用，index.html入口文件&lt; head &gt;标签只有一个，那么只能通过判断切换的路由

2）判断切换路由 需要在main.js全局js中 使用 router.beforeEach，to中可以获得将要去的组件的路由参数

3）如果title和meta标签内容是已经定好的，那就在router.js文件中设置需要辨别的参数–》在meta对象里自定义一个变量名 如：content / title，路由切换时直接读取

4）如果title和meta标签内容是后台配置的]]></description><category></category></item><item><title><![CDATA[vue设置全局变量]]></title><link>https://blog.youkuaiyun.com/happyStudy_/article/details/107572634</link><guid>https://blog.youkuaiyun.com/happyStudy_/article/details/107572634</guid><author>happyStudy_</author><pubDate>Sat, 25 Jul 2020 01:11:00 +0800</pubDate><description><![CDATA[新建一个global.js
const sourceIp =  'http://120.24.99.100:91'
export default{
    sourceIp
}

到main.js中引入并且挂载
//全局变量全局使用
import global from './api/Global.js'
Vue.prototype.global = global

需要使用到的页面
{{sourceIp}}//直接使用
img class="ev_img"  v-if="currentTab === 0"]]></description><category></category></item><item><title><![CDATA[vue 筛选功能]]></title><link>https://blog.youkuaiyun.com/happyStudy_/article/details/107572539</link><guid>https://blog.youkuaiyun.com/happyStudy_/article/details/107572539</guid><author>happyStudy_</author><pubDate>Sat, 25 Jul 2020 01:05:47 +0800</pubDate><description><![CDATA[vue 编写产品筛选功能
根据行业筛选一级，（国家，价格，发布时间）列表带分页，按时间或者价格排序，以及分页设置10条/页码，20条/页码，50条/页码
以下代码
去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片.
&lt;div class="industries_cont clearfix"&gt;
        &lt;div class="indus_left"&gt;
          &lt;el-card class="box-card"&gt;
        ]]></description><category></category></item><item><title><![CDATA[vue+mint-ui初始化项目]]></title><link>https://blog.youkuaiyun.com/happyStudy_/article/details/96585128</link><guid>https://blog.youkuaiyun.com/happyStudy_/article/details/96585128</guid><author>happyStudy_</author><pubDate>Sat, 20 Jul 2019 14:04:20 +0800</pubDate><description><![CDATA[一、前端开发框架和环境都是需要 Node.js ，先安装node.js开发环境，

vue的运行是要依赖于node的npm的管理工具来实现，下载https://nodejs.org/en/，安装完成之后，

打开cmd开始输入命令。

下载好node之后，以管理员身份打开cmd管理工具，，输入 node -v ，回车，查看node版本号，出现版本号则说明安装成功。

二、安装淘宝npm...]]></description><category></category></item><item><title><![CDATA[史上最全最常用的正则表达式(最新整理+基本够用+值得收藏)]]></title><link>https://blog.youkuaiyun.com/happyStudy_/article/details/95052358</link><guid>https://blog.youkuaiyun.com/happyStudy_/article/details/95052358</guid><author>happyStudy_</author><pubDate>Mon, 08 Jul 2019 12:18:20 +0800</pubDate><description><![CDATA[简介：

正则表达式，又称规则表达式。（英语：Regular Expression，在代码中常简写为regex、regexp或RE），计算机科学的一个概念。正则表达式通常被用来检索、替换那些符合某个模式(规则)的文本。



一、校验数字的表达式


1 数字：^[0-9]*$
2 n位的数字：^d{n}$
3 至少n位的数字：^d{n,}$
4 m-n位的数字：^d{m,n}$
5 零和非零开...]]></description><category></category></item><item><title><![CDATA[如何居中]]></title><link>https://blog.youkuaiyun.com/happyStudy_/article/details/94556016</link><guid>https://blog.youkuaiyun.com/happyStudy_/article/details/94556016</guid><author>happyStudy_</author><pubDate>Wed, 03 Jul 2019 13:20:58 +0800</pubDate><description><![CDATA[平时总结：
水平居中：

	块级：margin-left: auto; margin-right: auto;
		内联：爸爸身上写 text-align:center;
	
   2、垂直居中：

    如果 .parent 的 height 不写，你只需要 padding: 10px 0; 就能将 .child 垂直居中；
    如果 .parent 的 he...]]></description><category></category></item><item><title><![CDATA[关于canvas一些小demo]]></title><link>https://blog.youkuaiyun.com/happyStudy_/article/details/94555486</link><guid>https://blog.youkuaiyun.com/happyStudy_/article/details/94555486</guid><author>happyStudy_</author><pubDate>Wed, 03 Jul 2019 13:06:02 +0800</pubDate><description><![CDATA[canvas会初始化宽度为300像素和高度为150像素。可以使用CSS来定义大小



最简单的例子：


&lt;canvas width="600" height="400"&gt;&lt;/canvas&gt;

&lt;script type="text/javascript"&gt;
   
   //获取画布
   var canvas=document.querySelector(...]]></description><category></category></item><item><title><![CDATA[关于js，面向对象]]></title><link>https://blog.youkuaiyun.com/happyStudy_/article/details/94555344</link><guid>https://blog.youkuaiyun.com/happyStudy_/article/details/94555344</guid><author>happyStudy_</author><pubDate>Wed, 03 Jul 2019 12:23:23 +0800</pubDate><description><![CDATA[编程思想:
* 面向过程:凡事亲力亲为,所有的事情的过程都要清楚,注重的是过程
* 面向对象:提出需求,找到对象,对象解决这个问题,我们要结果,注重的是结果
*
* 面向对象的特性:封装,继承,多态,(抽象性)
*
* JS是一门什么样的语言?
* 是一门解释性的语言
* 是一门脚本语言
* 是一门弱类型的语言
* 是一门基于对象的语言
* 是一门动态类型的语言
*
* 对象:有属性和方法,具体...]]></description><category></category></item><item><title><![CDATA[如何理解 HTML 语义化]]></title><link>https://blog.youkuaiyun.com/happyStudy_/article/details/94554609</link><guid>https://blog.youkuaiyun.com/happyStudy_/article/details/94554609</guid><author>happyStudy_</author><pubDate>Wed, 03 Jul 2019 11:35:56 +0800</pubDate><description><![CDATA[简单举例来说就是：段落用 p，边栏用 aside，主要内容用 main 标签

其实就是用正确的标签做正确的事！

语义化的好处是已读、有利于SEO等。



通过使用恰当语义的HTML标签，让页面具有良好的结构与含义，可以有效提高：

可访问性：帮助辅助技术更好的阅读和转译你的网页，利于无障碍阅读；
	可检索性：有了良好的结构和语义，可以提高搜索引擎的有效爬取，提高网站流量；
	国际化：全球...]]></description><category></category></item><item><title><![CDATA[Vue开源项目汇总(史上最全)]]></title><link>https://blog.youkuaiyun.com/happyStudy_/article/details/92842393</link><guid>https://blog.youkuaiyun.com/happyStudy_/article/details/92842393</guid><author>happyStudy_</author><pubDate>Wed, 19 Jun 2019 19:33:55 +0800</pubDate><description><![CDATA[https://blog.youkuaiyun.com/badaaasss/article/details/86129393

]]></description><category></category></item></channel></rss>