- 博客(27)
- 收藏
- 关注
RSS订阅原创 黑马Vue -D7 — Vuex、 state、mutations、actions、getters、module
目标：明确Vuex是什么，应用场景以及优势state: {count: 0},// 定义mutations})通过mutations修改state的步骤1.定义 mutations 对象，对象中存放修改 state 的方法2.组件中提交调用 mutations(通过$store.commit(‘mutations的方法名’))getters: {// getters函数的第一个参数是 state// 必须要有返回值。
2023-10-25 16:28:48
140
原创 黑马Vue -D6 — 声明式导航-Vue路由-编程式导航-面经基础版-VueCli 自定义创建项目-通过eslint插件来实现自动修正
router-link是什么？router-link怎么用？router-link的好处是什么？router-link 会自动给当前导航添加两个类名，有什么区别呢？router-link的两个高亮类名 太长了，我们希望能定制怎么办如何自定义router-link的两个高亮类名声明式导航跳转时, 有几种方式传值给路由页面？查询参数传参（多个参数）动态路由传参（一个参数，优雅简洁）编程式导航有几种跳转方式？编程式导航，如何跳转传参？1.path路径跳转query传参。
2023-10-24 12:16:14
219
原创 黑马Vue -D4 — 组件通信、props、event bus 事件总线、provide&inject、v-model原理、表单类组件封装、.sync修饰符、ref和$refs、异步更新 & $ne
style的默认样式是作用到哪里的？scoped的作用是什么？style中推不推荐加scoped？data写成函数的目的是什么？组件通信，就是指组件与组件之间的数据传递组件的数据是独立的，无法直接访问其他组件的数据。想使用其他组件的数据，就需要组件通信组件关系分类有哪两种父子组件通信的流程是什么？父向子子向父组件上 注册的一些 自定义属性1.非父子组件传值借助什么？2.什么是事件总线3.发送方应该调用事件总线的哪个方法4.接收方应该调用事件总线的哪个方法。
2023-10-16 22:40:47
212
原创 黑马Vue -D3 — 生命周期、小黑记账清单、工程化开发和脚手架Vue CLI、组件的注册
思考：什么时候可以发送初始化渲染请求？（越早越好）什么时候可以开始操作dom？（至少dom得渲染出来）Vue生命周期：就是一个Vue实例从创建 到 销毁 的整个过程。生命周期四个阶段：① 创建 ② 挂载 ③ 更新 ④ 销毁1.创建阶段：创建响应式数据2.挂载阶段：渲染模板3.更新阶段：修改数据，更新视图4.销毁阶段：销毁Vue实例Vue生命周期过程中，会自动运行一些函数，被称为【生命周期钩子】→ 让开发者可以在【特定阶段】运行自己的代码四、生命周期钩子小案例1.在created中发送数据2.在mo
2023-10-16 22:25:50
396
原创 黑马Vue -D2 — 指令补充、tab高亮、computed计算属性 VS methods方法、watch侦听器
所谓指令修饰符就是通过“.”指明一些指令后缀 不同的后缀封装了不同的处理操作 —> 简化代码代码演示：3.v-model修饰符v-model.trim —>去除首位空格v-model.number —>转数字4.事件修饰符@事件名.stop —> 阻止冒泡@事件名.prevent —>阻止默认行为@事件名.stop.prevent —>可以连用 即阻止事件冒泡也阻止默认行为三、v-bind对样式控制的增强-操作class为了方便开发者进行样式控制， Vue 扩展了 v-
2023-10-16 22:18:26
98
原创 黑马Vue -D1 — 插值表达式 {{}}、Vue开发者工具安装、各种指令等
概念：Vue (读音 /vjuː/，类似于 view) 是一套 **构建用户界面 ** 的渐进式框架基于数据渲染出用户可以看到的界面所谓渐进式就是循序渐进，不一定非得把Vue中的所有API都学完才能开发Vue，可以学一点开发一点所谓框架：就是一套完整的解决方案举个栗子如果把一个完整的项目比喻为一个装修好的房子，那么框架就是一个毛坯房。我们只需要在“毛坯房”的基础上，增加功能代码即可。提到框架，不得不提一下库。库，类似工具箱，是一堆方法的集合，比如 axios、lodash、echarts等。
2023-10-16 22:10:10
49
原创 黑马Vue -D5 — 自定义指定（v-xx）、插槽（slot）、路由VueRouter
基本语法（全局、局部注册）指令的值v-loading的指令封装… 这都是Vue给咱们内置的一些指令，可以直接使用自定义指令：同时Vue也支持让开发者，自己注册一些指令。这些指令被称为自定义指令每个指令都有自己各自独立的功能概念：自己定义的指令，可以封装一些DOM操作，扩展额外的功能全局注册//在main.js中Vue.directive('指令名', {// 可以对 el 标签，扩展额外功能el.focus()})局部注册//在Vue组件的配置项中"指令名": {
2023-10-16 15:06:01
143
转载 laydate 时间范围的限制
链接：https://www.jianshu.com/p/e0b95d509970。商业转载请联系作者获得授权，非商业转载请注明出处。laydate 使用版本号：laydate-v5.0.9。注：选择更换时间的时候，会按照选择框的时间 来做。重置 laydate样式。选择 现在 会解除限制。作者：sunsboyxu。
2023-10-08 22:46:44
503
转载 针对ie的css hack
/* IE9 , IE10 ,IE11 */@media screen and (min-width:0\0) { /* IE9 , IE10 ,IE11 rule sets go here */}/*IE10*/@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* IE10-specific styles go here 这种方式在预览版的IE11中也生效 */}
2021-12-01 20:26:08
86
原创 swiper 相关知识
某个slide上设置单独的停留时间，例<div class="swiper-slide" data-swiper-autoplay="2000">
2021-09-09 10:52:09
73
原创 仿生Select
$(function(){ $('.select').on('click','span',function(){ $(this).text(); $(this).addClass('active'); $(this).next().slideDown(); return false; }) $('.select').on('click','ul li',function(){ var txt = $(this).text(); $(this).parent().prev().t
2021-07-26 12:25:40
69
原创 video是移动端无法自动播放以及自动弹出解决方法
视频在 safri 页面不能自动播放的原因：因为ios中明确的指出等待用户的交互动作后才能播放video，也就是说没有得到用户的action就播放的话会被safri拦截解决方法如下：因为这个是微信的链接，需要在微信上点开进入他的浏览器，这里需要一个插件<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript" charset="utf-8"></script>然后.
2021-07-13 22:31:08
3812
原创 swiper-缩略图多次使用-左右方向
//预览图 $('.banxue-item .gallery-thumbs').each(function(i,ele){ window['galleryThumbs'+i] = new Swiper($(ele), { spaceBetween: 10, slidesPerView: 4, }); var prev = $(ele).find('.swiper-button-prev'); var next = $(ele).find('.swiper-button-ne.
2021-07-05 23:39:57
797
1
原创 琢磨select原生附加标签一起,避开第一选项无法选中的现象
change事件是在选项改变时才会触发，页面加载后默认就是第一项被选中，这时你点了第一项，选项并没有改变，事件就不会被触发可以在页面加载后让它没有选项被选中 <div class="item-select"> <span>选项一</span> <select name=""> <option value="">选项1</option> <option value="">选项2</.
2021-05-15 01:07:13
177
原创 让koala 编译scss支持中文注释
第一种方法：进入Koala安装目录，例如：C:\Program Files (x86)\Koala\rubygems\gems\sass-3.4.9\lib\sass找到engine.rb文件，在该文件中找到最后一个require元素，在该元素之后添加以下代码即可。Encoding.default_external = Encoding.find('utf-8')第二种方法：...
2020-03-22 10:43:46
159
转载 PgwSlideshow-基于Jquery的图片轮播插件
0 PgwSlideshow简介PgwSlideshow是一款基于Jquery的图片轮播插件，基本布局分为上下结构，上方为大图轮播区域，用户可自定义图片轮播切换的间隔时间，也可以通过单击左右方向按键实现图片切换；下方为要轮播的所有图片的缩略图展示，可直接单击缩略图快速切换图片。PgwSlideshow主要有以下特点：体验度很好的响应式设计 支持桌面及移动设备 身形矫健，压缩后的文件...
2019-05-19 21:47:15
189
原创 jQuery 3D旋转图片轮播插件imageflow.js
下载地址 演示地址 兼容IE6-11 插件描述：3D旋转图片轮播效果（支持滚轮）參數設定說明：aspectRatio: 1.964, /* ImageFlow的高度 */buttons: false, /* 上下张按钮 */captions: true, /* 标题显示 */imageCursor: 'default', /* 滑鼠游标图示 */ImageFlowID: 'im
2017-11-09 11:09:29
3422
原创 前端用到的代码（更新中……）
1,让 IE9 以下支持html5和媒体查询（ps:本地浏览不出效果，需要在服务器下浏览或者直接使用bootstrap链接。） <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="http://cdn
2017-01-17 13:56:57
803
原创 jQuery tab切换收集
1.切换一$(".tab_content").hide(); $("ul.tabs li:first").addClass("active").show(); $(".tab_content:first").show(); $("ul.tabs li").click(function() { $("ul.tabs li").removeClass("active"); $(t
2017-01-16 20:59:12
312
转载 移动端页面开发资源总结
作者：HcySunYang 文章源自：移动端页面开发资源总结工作了有一段时间，基本上都在搞移动端的前端开发，工作的过程中遇到过很多问题，bug的解决方案，记录下来，以便后用！！！内容并不是很全，以后每遇到一个问题都会总结在这里，分享给大家！ 一、meta标签相关知识 1、移动端页面设置视口宽度等于设备宽度，并禁止缩放。<meta name="viewport" content="width=d
2016-12-11 21:08:35
309
转载 这些年、我收集的JQuery代码
文章来源：http://www.cnblogs.com/edison1105/archive/2012/07/31/2617518.html如何创建嵌套的过滤器 //允许你减少集合中的匹配元素的过滤器， //只剩下那些与给定的选择器匹配的部分。在这种情况下， //查询删除了任何没（:not）有（:has） //包含class为“sele
2016-12-11 20:55:00
208
原创 多行文本溢出显示省略号(...)的方法
文章来源：http://c7sky.com/text-overflow-ellipsis-on-multiline-text.html现在的浏览器都支持text-overflow:ellipsis属性，用来实现单行文本的溢出显示省略号，但是这个属性并不支持多行文本。那么有没有方法在多行文本上实现同样的效果呢？-webkit-line-clampWebkit支持一个名为-webkit-line-cl
2016-12-11 20:41:02
215
转载 移动WEB：JS控制 {body} 字体大小控制【常用】
方法一：px-rem自适应转换<script>function Rem() { var docEl = document.documentElement, oSize = docEl.clientWidth / 6.4; if (oSize > 100) { oSize = 100; // 限制rem值 640 / 6.4 =100} docEl.style.fon
2016-12-11 20:36:30
3466
转载 Web移动端Fixed布局的解决方案
原文 http://efe.baidu.com/blog/mobile-fixed-layout/ 移动端业务开发，iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况。 但是 fixed 元素在有软键盘唤起的情况下，会出现许多莫名其妙的问题。 这篇文章里就提供一个简单的
2016-12-11 19:33:02
247
转载 如何在PS上直接使用FONTAWESOME图标？
估计很多前端人员都知道FontAwesome是一套免费而且好用的Web字体图标，只要在CSS引入这个字体icon，它就可以直接通过class来生成一个图标，而且免费使用。目前图标数量已经更新至585个之多，包含常用的APP UI应用图标、品牌图标等。今天教大家如何将FontAwesome直接在Photoshop或AI上使用，这样日后做UI设计也方便多了，下面我们说说方法。fontawesome
2016-11-05 16:37:40
2128
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人