前端的小恬儿妹-CSDN博客

原创你不知道的css之标签选择器效果

今天自己在学习的时候无意间发现CSS的世界是神奇的。总有一些实用的CSS技巧，来解决我们在实际项目开发中遇到的的问题。不知什么原因，在很多项目中，实现诸如单选，复选等（类似）功能（包括如图标签选择器）时，为了美化其样式，往往使用JS去实现，实际上，利用label标签和css的兄弟选择器完全可以实现类似效果。其兼容性也并不差，至少兼容IE8及其以上浏览器了。实现类某东标签选择器效果> htm

2017-09-05 13:57:30 574

原创利用 vue 过渡效果（transition）定时器实现轮播

轮播图相信都不会陌生，很多的网站都会有，本文就是用 vue 自带的 transition 动画过渡效果加上定时器来编写一个轮播图。1、功能分析。从轮播常用功能来说有四个功能：自动的轮播的功能；点击左右箭头（pre、next）进行的切换；点击数字切换到对应的图片的功能；鼠标悬停、移出控制轮播图的开始、暂停；2、场景介绍、分析。环境是 vue 组件的形式，轮播图模块是以...

2018-03-17 10:24:19 3517

原创 json-server模拟服务器API测试数据的使用方法

emmmmmmm

2018-03-07 09:48:21 943

原创 Tab选项卡下实现Swiper嵌套Swiper

在开发移动端轮播图特效首选的插件就是Swiper。近期在开发移动端项目中需要实现选项卡嵌套Swiper多tab联动实例这么一个功能，如图所示：首先呢，要在项目的head标签内引入swiper.min.css<link rel="stylesheet" href="./css/swiper.min.css"> 在body内引入swiper.min.js 。（最好是在这个功能模块div结束标签

2018-02-25 10:46:34 8654 1

原创用Swiper嵌套Tab切换时，需要注意的问题。

1、当进行切换多个swiper时，根据swiper里面内容的高度，来撑开slide的高度 2、当多个swiper切换时，有可能导致其余的swiper失效这需要在Swiper初始化的时候加上两行初始化代码：observer:true,observerParents:true,...

2018-02-10 16:17:52 3654

原创 css—文字效果

html:<div class="main"> <div> <h5>1️⃣ 浅色底深色字</h5> <p>You-need-to-know-css-tricks</p> </div> <div> &l

2018-02-03 17:13:25 784

原创 css—闪烁效果

html：<div class="main"> <span>animation-direction: 默认<code>normal</code></span><p>info~</p> <span>animation-direct

2018-01-24 10:40:57 638

原创 css—弹性过渡效果

html:<div class="main"> <label> 用户名: <input id="username" /> <span class="poptip">仅支持字母、数字和下划线组合！</span> &

2018-01-22 09:05:18 325

原创 CSS—延轨迹平滑效果

html：<div class="main"> <div class="path"> <img class="logo" src="./img/vue-logo.png" /> <div class="avatar"> <span

2018-01-19 09:18:28 558

原创 vue中npm run dev 不能自动打开浏览器运行项目

最近用vue2.0 + webpack搭建了环境创建新的项目。出现一个很蹩脚的问题：这段话的意思是：你的应用程序运行地址是:http://localhost:8080但是，在之前运行npm run dev 之后会默认自动打开浏览器运行的。百度之后，找到了解决的办法：找到根目录下config文件夹下index.js文件autoOpenBrowser: true, //是否默认打开浏览器,默

2018-01-16 10:43:13 4947 2

原创 vue2.0 + webpack 引用bootstrap打包后出现的问题

vue2.0的项目里如何引用bootstrap？（配置vue环境等步骤在此略过，大家可以去本篇文章学习搭建vue-cli环境预热部分Vue2 + webpack 项目实战（一）环境搭建）好，下面上货。 1、首先按照上面文章中的内容，新建一个vue工程。 2、命令行找到你创建的工程目录下，使用命令npm install jquery –save-dev 引入jquery。注：如果想查看np

2018-01-11 09:20:02 854 2

原创解决Vue.js遇到的问题--Eslint

eslint是语法检查工具，限制太过于严格。所以在产生了这个需求的时候，如果不符合规范就会报错，有时候我们不想按照他的规范去写。这时我们需要关闭eslint。这里有两种方法。在搭建vue脚手架时提示是否启用eslint检测。 Use ESLint to lint your code? n如果项目已经生成，还可以这样：在项目中打开目录下bulid 文件夹中的 webpack.base.con

2018-01-10 09:05:48 4116

原创终端必备神器Cmder

之前一直用Git 。今天无意间发现一款比Git还要好用得工具 —— Cmder 。使用了之后才觉得有相见恨晚的感觉。是 windows 下面一款非常棒的命令行取代工具，完整版还集成 git 功能。戳我配置第一次使用时，会有个初始化过程，请等待。。。把 cmder 加到环境变量系统变量变量名 CMDER_HOME 变量值安装绝对路径Path 里添加一条 %CMDER_HOME%

2018-01-09 15:11:34 391

原创 Vue2 + webpack 项目实战（一）环境搭建

1 、准备工作首先，在开始做项目之前，还是需要把项目的环境搭建好。（我这里是Windows环境）安装好nodejs 之后，在终端输入命令node -v 会出现相应版本号。就说明安装成功了。输入npm -v也会有相应版本号出现，npm也已经安装好了。以上都是全局安装安装了Node.js 环境。那么就可以开始项目的前期搭建工作了 2 、 vue-cil构建项目Vue-cli是快速构建这个

2018-01-08 11:18:29 434

原创基于vue-cli打包出现的问题

因为不可能将创建的项目直接部署上去，需要将页面打包。打包命令为：npm run build打包完成之后，会在根目录下生成一个dist文件夹，这就是最后的成品页面，在打包好的最底下为什么会看到两行警告的内容当直接使用浏览器打开文件时，浏览器控制台会报错很多资源都加载失败，仔细看一下路径，绝对路径。E盘下哪有static文件夹，那就要将打包的路径改为相对路径，这个根据build命

2017-12-25 12:01:57 496 1

原创贝赛尔曲线在线生成

在前端开发过程中Canvas应用也愈发的广泛。当然也不可避免贝赛尔曲线的制作。简单粗暴的线上生成贝赛尔曲线。传送门

2017-12-22 09:10:00 901

原创 nginx 反向代理

前端中的跨域是不可避免的，当然跨域也有很多种方法。可谓条条大道解跨域。今天了解了nginx 反向代理跨域的方法，在此学习记录一下。步骤一：在网站上找个接口，我这里使用的是百度贴吧post接口。步骤二：创建index.html发起AJAX请求注意这里创建的html页面要放在server.js文件的path路径下的目录中的。<!DOCTYPE><html> <meta charse

2017-12-19 17:04:20 210

原创 v-bind 绑定标签属性

v-bind 主要用于属性绑定v-bind指令可以在其名称后面带一个参数。中间是一个冒号隔开。例如比较常用的是v-bind:class。由于比较常用，所以有缩写的用法：缩写的语法：<a :href="link">To BaiDu</a>完整的语法：<a v-bind:href="link">To BaiDu</a>JS代码：<script> export default {

2017-12-15 17:01:10 868

原创 HtmlWebpackPlugin以inine方式引入JS/CSS文件

当我们使用HtmlWebpackPlugin生成html的时候，一般结构如下所示：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>my webpack</title> <script type="text/javascript" src="js/main-d641c2a0

2017-12-12 15:30:11 1562

原创 html-webpack-plugin 移除代码中的空格

html-webpack-pluginnew htmlWebpackPlugin({ // 传参 filename:'index.html', template:'index.html', inject:'head', title:'my webpack', minify:true}) /* 对 plugin 插件进行初始化 */添加了 minify

2017-12-11 12:01:22 2373 1

原创小程序之显示隐藏功能（二）

我的需求很简单，点击close按钮隐藏掉遮罩层。实现方法：register.wxml:使用变量控制隐藏类名<view class="b1 view_hide{{showView?'view_show':''}}"> <view class="t_w"> <image src="../../images/register/close.png" bindtap="onChangeSho

2017-12-01 17:46:12 3676 3

关于vue环境的搭建，这里强烈推荐官方命令行工具。这个命令行工具可快速下载一套基于vue.js开发的模板。里面不仅包含了最基础的vuejs的一个框架，而且还包含了vuejs打包的工具，以及测试的工具。所以非常的简单。• 如何安装vue.js的命令行工具NPMnpm是node的包管理工具。现在很多前端项目都会用到它，同时你是Windows系统的话，还需手动安装git，如果没有安装过node或者git的

2017-10-09 14:19:06 989

原创小程序之隐藏显示功能

本文就input输入框的显示影藏功能来絮叨一下，顺便让自己更深的记忆。结构层<view class="section {{reply?'on':'off'}}"> <input placeholder="请输入所预约项目" type="text"/></view>是的，没错！上面用了三元运算符。与wx:if标签写法相比，显然更加简洁优雅。表示层.on{display: block}

2017-09-22 11:10:51 1015

原创轻松学会Git

在日常工作中，经常会用到Git操作。但是对于新人来讲，刚上来对Git很陌生，操作起来也很懵逼。本篇文章主要针对刚开始接触Git的新人，理解Git的基本原理，掌握常用的一些命令。一、Git工作流程以上包括一些简单而常用的命令，但是先不关心这些，先来了解下面这4个专有名词。Workspace：工作区Index / Stage：暂存区Repository：仓库区（或本地仓库）Remote：远程仓库

2017-08-26 10:16:10 273 2

原创小程序的注册及页面的编写

编写小程序小程序文件类型与目录结构注册小程序页面，View、Image、Text等基本组件的用法Flex弹性盒子模型（在C3中已存在，但在小程序布局中会大量使用弹性盒子技术，本章节不会涉及，后续会详细讲解）移动端分辨率及小程序自适应单位RPX（注：以上四点是学习中的主要内容，当然后续的学习中还会有零散的小知识）注册：小程序注册地址：https://mp.weixin.qq.com/cgi

2017-08-25 11:18:48 2491

qq_39513971的博客