- 博客(27)
- 收藏
- 关注
RSS订阅原创 vue瀑布流自适应高度（迭代总结）
1.瀑布流自适应高度效果图如下所示Vue中使用vue-waterfall2瀑布流下载安装：npm install --save vue-waterfall2之后会在node_modules生成相应的文件,感兴趣的可以仔细看一下它的源码实现注意package.json内自动生成的引入vue-waterfall2，网上教程大多是在main.js中引入，但其实非常不必要，最好只在用到的vue文件内引用// 引入瀑布流 vue-waterfall2import Vue from 'vue';
2020-11-30 17:41:44
2188
1
原创 font-weight:600；不生效以及单行多行文本省略，iphoneX 适配等常见CSS问题收集解决
1.user agent stylesheetb标签没写加粗却加粗了，浏览器调试发现是b标签多了一个样式控制的，如下图user agent stylesheet是浏览器默认样式表，在写网页时，没有指定的样式，按浏览器内置的样式表来渲染，不同浏览器甚至同一浏览器不同版本的默认样式是不同的。解决方案：由于user agent stylesheet的优先级很低，自己写样式覆盖即可。2.android机型font-weight:600；不生效android机型无法识别400，500，600这些字重
2020-10-21 17:39:00
3452
原创 js异步函数封装暴露函数
现在需要把下面的方法进行封装，然后调用时仅修改里面的路由跳转。其中，以上代码会先执行函数hideSelf,当他执行完时js引擎的event 队列空闲时才会去执行队列里等待的setTimeout的回调函数，这就是一个异步调用 setTimeout 函数会在一个时间段过去后在队列中添加一个消息。这个时间段作为函数的第二个参数被传入。如果队列中没有其它消息，消息会被马上处理。但是，如果有其它消息，setTimeout 消息必须等待其它消息处理完。封装如下： hideMy(action) {
2020-09-06 12:19:33
1105
原创 踩坑！关于v-for和splice连用导致index错乱无法删除当前项的解决方案
当我们使用v-for循环dom/组件，它有两个属性，item：当前循环的每一个元素，index：当前循环元素所对应的下标。平时绑定key值的时候，都习惯采用如下写法，直接绑定下标: key="index" v-for="(item,index) in list"但是因为key值绑定的是index，删除元素会导致顺序错乱问题，并不会像期望的那样，点击哪一项就会删除哪一项这里通俗的解释下：下标在这是个临时身份，它的默认位置不会变化，如果你里面的item项移动了，那么移动的数据对应到index上，所以你的
2020-09-06 12:04:29
1812
1
原创 vue关于组件通信及传递数据实例讲解
1、父组件可以使用 props 把数据传给子组件。2、子组件可以使用 $emit 触发父组件的自定义事件。现在要实现这样一个需求，在子组件中点击删除调用父组件的方法进行删除且????连接接口，并且父组件中的方法需要传入子组件的数据。整体思路如下：首先实现父子组件的通信挂钩，然后实现本地的删除逻辑，最后连接接口测试文件结构如下：看代码实现部分子组件 listCard.vue注意data要进行定义声明，否则父组件取不到下面是页面完整代码<template> <di
2020-09-02 23:14:43
233
原创 vue-router详解，包括hash和history
1.Vue程序运行过程npm run buildnpm run dev2.认识路由路由（routing）就是通过互联的网络把信息从源地址传输到目的地址的活动.路由器提供了两种机制: 路由和转送.路由是决定数据包从来源到目的地的路径.转送将输入端的数据转移到合适的输出端.路由中有一个非常重要的概念叫路由表.路由表本质上就是一个映射表, 决定了数据包的指向.后端路由阶段...
2020-07-23 20:14:21
460
原创 实习日志day01 基础html标签及css
1.html1.1html结构<!DOCTYPE html><!-- HBuilder不会自动保存，需要ctrl+S --><html> <!-- head 网页头部:一般会引入css,js,直接写一些样式 --> <!-- 标注方法：ctrl+/ --> <head> <!-- utf-8 网页编码格式 --> <meta charset="utf-8" /> <!-- 网页标题
2020-07-06 19:58:54
1732
原创 webpack和vue cli 4.4.4的概念理解及搭建
1.webpack1.1概念官方文档解释：At its core, webpack is a static module bundler for modern JavaScript applications.从本质上来讲，webpack是一个现代的JavaScript应用的静态模块打包工具。从模块和打包的概念上理解就是：webpack中的模块化webpack其中一个核心就是模块化开发，并且处理模块间的依赖关系。不仅仅是JavaScript文件，CSS、图片、json文件等等在webpack中
2020-06-14 18:55:05
2741
原创 组件化开发
1.组件化思想将一个完整的页面分成很多个组件，每个组件都用于实现页面的一个功能块。而每一个组件又可以进行细分，整个页面都将变得容易管理维护。组件化是Vue.js中的重要思想它提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用。任何的应用都会被抽象成一颗组件树。组件化思想的应用：有了组件化的思想，我们在之后的开发中就要充分的利用它。尽可能的将页面拆分成一个个小的、可复用的组件。这样让我们的代码更加方便组织和管理，并且扩展性也更强。2.注册组件注册组件的基本步骤组
2020-06-08 08:35:32
916
原创 Github快速上手 从入门到上传本地项目
参考文章：https://zhuanlan.zhihu.com/p/29647329https://mp.weixin.qq.com/s?src=11×tamp=1591411593&ver=2383&signature=lG0dH9YQE5XInpFFnn5pSYZBNwNOZWJNX17oim18AyXfDLrDH91hJUpfUQOyRz1nI57Fo8M*ME-545O-qHgoQ4jgmALiuglVrfiHhLyx56Mig5DBSFl0Z93GeiqVjJ
2020-06-06 16:49:42
145
原创 YH SHOP网上商城遇到的问题及解决方案（一）
1.项目替换图片之后刷新页面无变化问题描述：将项目中的导航栏部分图片更改之后，重新运行tomcat可以发现图片已更换，但是直接在浏览器中预览网页和点击项目中的其他界面时导航栏图片依旧没变。这是IE缓存导致的为了提高访问网页的速度，浏览器会采用累积式加速的方法，将你曾经访问的网页内容（包括图片以及cookie文件等）存放在电脑里。这个存放空间，我们就称它为IE缓存。以后我们每次访问网站时，浏览器会首先搜索这个目录，如果其中已经有访问过的内容，那IE就不必从网上下载，而直接从缓存中调出来，从而提高了
2020-06-04 10:35:04
2159
原创 基于Vue的简单购物车功能实现
1.效果：2.代码实现 html，css<div id="app"> <div v-if="books.length"> <table> <thead> <tr> <th></th> <th>书籍名称</th> <th>出版日期</th> <th>价格</
2020-05-29 08:16:42
1008
原创 Vue的v-on事件监听，v-if条件判断与v-for循环遍历
1.在Vue中监听事件使用v-on指令v-on作用：绑定事件监听器缩写(语法糖）：@ （如v-on:click可简写为@click）当通过methods中定义方法，以供@click调用时，需要注意参数问题：情况一：如果该方法不需要额外参数，那么方法后的()可以不添加。但是注意：如果方法本身中有一个参数，那么会默认将原生事件event参数传递进去，如果函数需要参数,但是没有传入, 那么函数的形参为undefined情况二：如果需要同时传入某个参数，同时需要event时，可以通过$event传入
2020-05-20 21:06:37
11728
原创 Vue的基础语法——插值操作，动态绑定，计算属性
一，插值操作1.Mustache语法也就是双大括号{{}}的写法，mustache语法中,不仅仅可以直接写变量,也可以写简单的表达式<div id="app"> <h2>{{message}},妍华!</h2> //插入到标签中 <h2>{{firstName}} {{lastName}}</h2> //使用了两个Mustache <h2>{{counter * 2}}</h2>
2020-05-16 19:38:14
928
原创 初学习Vue——渐进式JavaScript 框架
一，关于Vue的基本认识1.Vue介绍Vue.js官网地址：https://cn.vuejs.org/Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。Vue有很多特点和Web开发中常见的高级功能解耦视图和数据可复用的组件
2020-05-16 10:01:29
573
原创 flex布局和垂直居中方法总结
flex布局可以参考以下的文章内容，较为详细https://www.ruanyifeng.com/blog/2015/07/flex-grammar.htmlhttp://www.ruanyifeng.com/blog/2015/07/flex-examples.html网页布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些...
2020-04-10 20:21:26
1169
原创 ajax和fetch (前后端交互的媒介）
ajax步骤：1.创建一个xmlhttprequest实例2.发出http请求3.接收服务器传回来的数据4.更新网页上面的数据优缺点：本身是针对MVC的编程,不符合现在前端MVVM的浪潮基于原生的XHR开发，XHR本身的架构不清晰，已经有了fetch的替代方案JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理（采取个性化打包的方案又不能享受...
2020-04-10 10:46:32
141
原创 The content of element type "web-app"must match……问题之解决办法
部署项目时，web.xml一直标红，如下显示鼠标移上去就能看见报错原因：The content of element type "web-app"must match……网上都是说顺序问题，然而并没有用，最后通过注释掉原本<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//E...
2020-03-31 20:14:07
2062
1
原创 CSS基本属性
background（背景）background- color /*背景色*/background- Image /*背景图片*/background- repeat /*背景图平铺方式*/简写：background: gray url(XXX/xx. png) no-repeat; /*背景色，背景图片，平铺方式*/fon...
2020-03-22 12:15:53
108
原创 url，herf, src区别用法
相对URL（relative URL）以包含URL本身的文件夹的位置为参考点，描述目标文件夹的位置。以下为建立路径所使用的几个特殊符号，及其所代表的意义。.：代表目前所在的目录，相对路径。 如：<a href="./abc">文本</a> 或 <img src="./abc" />…：代表上一层目录，相对路径。 如：<a href="../ab...
2020-03-19 18:52:43
350
原创 元素的浮动布局
浮动元素会脱离网页文档,与其他元素发生重叠，但是不会与文字内容发生重叠利用这一特性可以做出文字浮动效果浮动方式：<head> <meta charset="UTF-8"> <title></title></head><style type="text/css"> .green{ ...
2020-03-18 20:21:57
217
原创 CSS优先级问题和文本属性
CSS优先级：当样式发生冲突时，谁的权重值高谁生效。计算权重即把他们相加选择器选择的范围越小越精细优先级就越高总结：CSS由优先级决定，从上到下，由外到内，优先级由低到高，简单说就是样式离标签近的优先级高。CSS文本属性：...
2020-03-12 09:34:43
126
原创 表格标签使用技巧
1.第一个col表示第一列，同理，第二个col表示第二列，这是单标签2.可用colgroup进行列分组，如右侧就表示前六列为一组宽度为100px，最后一列为一组，宽度为200px.3.clospan列合并，表示占据表格中几列的宽度rowspan行合并，表示占据表格中几行的宽度如下表毕业院校列合并占据5列宽度，照片行合并占据4行高度过于tbody的标准写法关于标签嵌套问题...
2020-03-07 19:27:22
259
原创 JAVA使用基础
1.常用的快捷键操作Tab 缩进、Windows + D显示桌面、Windows+R运行、Alt+Tab 窗口切换、Ctrl+A全选、Ctrl+C复制、Ctrl+V粘贴、Ctrl+X剪切、Ctrl+Z撤销、Ctrl+Y反撤销。2.重要的dos命令盘符的切换 盘符：查看当前目录下的所有文件和文件夹 dir切换目录 cd 要切换的目录cd … 退到上一层cd...
2020-02-02 13:31:57
151
原创 Eclipse使用技巧
Eclipse的撤销恢复使用操作如下：1.Eclipse的上一步操作快捷键为Ctrl+Z，即可将代码回退到最近一次的代码状态。2.Eclipse的下一步操作快捷键为Ctrl+Y，这个快捷键与Ctrl+Z的组合是相反的。如果发现撤销上一步操作代码后不如原来的代码后，则可以使用Ctrl+Y来进行恢复，也就是相当于撤销操作的取消。3.如果上述默认的快捷键使用不习惯，Eclipse支持自定义快...
2020-01-30 12:44:43
390
原创 My First Jave
成功安装了Microsoft Visual Studio 2010 旗舰版，并且能够新建项目，完成工具栏下字体颜色的更改等简单操作。用eclipse创建了我的第一个 jave项目package edu.jz.tzl;public class Hello {public static void main(String[] args) { System.out.printl...
2018-07-23 14:19:22
125
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人