- 博客(71)
- 收藏
- 关注
RSS订阅原创 vue用命令直接修复ESLint
在做vue-cli项目的时候，碰到空格和换行就会报错报错长这样：网上百度的方法 ：找到package.json 文件，找到里面的scripts，将"lint": "vue-cli-service lint"修改如下 ："lint": "vue-cli-service lint eslint --fix"最后如图 ：最后重新运行 ...
2019-08-02 16:02:37
5711
原创 vue通过路由跳转页面的三种方式
现有如下场景，点击父组件的li元素跳转到子组件中，并携带参数，便于子组件获取数据。父组件中：<li v-for="item in list" @click="getDescribe(article.id)"><liv-for="article in articles"@click="getDescribe(article.id)">methods：...
2019-06-27 23:19:21
3716
原创 vue严格模式报错问题
vue3.x以后，代码的格式要求更加严格，所以“use strict”的使用就必不可少了。但是经常也会遇到代码格式正确，一保存就会出现报错，在网上找的解决办法,：在script 添加如下代码即可：/*eslint-disable*/注意：/* 不能少代码如下：<template></template><script>/*eslin...
2019-06-26 22:05:10
1290
1
原创 Mint UI的使用
1、安装 npm install mint-ui -S -S表示 --save2、在main.js中引入mint Ui的css 和 插件import Mint from 'mint-ui';Vue.use(Mint);import 'mint-ui/lib/style.css'3、查看文档，直接复制文档中提供的组件代码到项目中，即...
2019-06-25 21:35:49
188
转载 webpack的使用
安装Webpack可以使用npm安装，新建一个空的练习文件夹（此处命名为webpack sample project），在终端中转到该文件夹后执行下述指令就可以完成安装。//全局安装npm install -g webpack//安装到你的项目目录npm install --save-dev webpack正式使用Webpack前的准备在上述练习文件夹中创建一个packa...
2019-06-20 21:44:25
102
原创 vue路由
1.在 VUE-CLI根目录下的SRC中的main.js中引入了路由器；//main.jsimport Vue from 'vue'import App from './App'import router from './route.js' //引入路由js文件import store from './store' //引入你的store下的js文件new Vue({ ...
2019-06-19 21:31:05
68
原创 vue组件
1.组件化在大型应用开发的时候，页面可以划分成很多部分。往往不同的页面，也会有相同的部分。例如可能会有相同的头部导航、尾部信息模块。但是如果每个页面都独自开发，这无疑增加了我们开发的成本。所以我们会把页面的不同部分拆分成独立的组件，然后在不同页面就可以共享这些组件，避免重复开发。1.1.定义全局组件我们可以使用 Vue.component 来定义一个组件：Vue.compon...
2019-06-18 22:21:51
65
原创 vue中实现动画的几种方式
一.使用vue的transition标签结合css样式完成动画 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=...
2019-06-17 22:28:21
2137
原创 vue.js
ViewModel是Vue.js的核心，它是一个Vue实例。Vue实例是作用于某一个HTML元素上的，这个元素可以是HTML的body元素，也可以是指定了id的某个元素。当创建了ViewModel后，双向绑定是如何达成的呢？首先，我们将上图中的DOM Listeners和Data Bindings看作两个工具，它们是实现双向绑定的关键。从View侧看，ViewModel中的DOM Lis...
2019-06-13 21:02:35
90
原创 初识vue
每个 Vue 应用都需要通过实例化 Vue 来实现。例子如下：import Vue from "vue";var MainCtrl=new Vue({...});new Vue({})中参数对象属性解析elel是CSS 选择器，用于查询元素的如el:"#main"或el:".test"datadata用于定义属性，其实就是和html，进行数据绑定的变量如...
2019-06-10 22:51:15
80
原创 swiper插件
swiper.min.js插件实现多种滑动效果，可在pc、手机、平板中使用。该插件官方网址：http://www.swiper.com.cn/（版本3）、http://2.swiper.com.cn/（版本2.X）里面可以下载该插件，而且有相应的实例。例外最近发现还有swiper相关的交流网址:http://bbs.swiper.com.cn/forum.php 。例：简单的轮播图效果...
2019-05-26 21:35:52
272
原创 常用的本地缓存机制
常用的几种本地缓存机制：Cookie,LocalStorge,SessionStorge1.Cookie的特点 1）cookie的大小受限制，cookie大小被限制在4KB，不能接受像大文件或邮件那样的大数据。 2）只要有请求涉及cookie，cookie就要在服务器和浏览器之间来回传送（这解释为什么本地文件不能测试cookie）。而且cookie数据始终在同源的htt...
2019-05-24 21:18:51
255
原创 jquery与zepto的异同
Zepto最初是为移动端开发的库，是jQuery的轻量级替代品，因为它的API和jQuery相似，而文件更小。Zepto最大的优势是它的文件大小，只有8k多，是目前功能完备的库中最小的一个，尽管不大，Zepto所提供的工具足以满足开发程序的需要。大多数在jQuery中·常用的API和方法Zepto都有，Zepto中还有一些jQuery中没有的。另外，因为Zepto的API大部分都能和jQuery兼...
2019-05-22 20:57:35
79
原创 less的适配
之前有些适配做法，是通过js动态计算viewport的缩放值（initial-scale）。例如以屏幕320像素为基准，设置1，那屏幕375像素就是375/320=1.18以此类推。但直接这样强制页面缩放过于粗暴，会导致页面图片文字失真模糊。Px是相对固定单位，字号大小直接被定死，所以用户无法根据自己设置的浏览器字号而缩放，em和rem虽然都是相对单位，但em是相对于它的父元素的fon...
2019-05-21 21:55:58
670
转载 less的基本用法
Rem,媒体查询适配方案Less基础语法介绍作用: 维护CSS, 按照CSS的基本语法去写.变量☞@自定义变量名: 值; 例如: @nav_bgcolor: red; nav { color: @nav_bgcolor; }☞变量的运算: @width: 10; nav { width: @width...
2019-05-20 22:32:09
300
转载 回调函数callback
什么是回调函数？我们绕点远路来回答这个问题。编程分为两类：系统编程（system programming）和应用编程（application programming）。所谓系统编程，简单来说，就是编写库；而应用编程就是利用写好的各种库来编写具某种功用的程序，也就是应用。系统程序员会给自己写的库留下一些接口，即API（application programming interface，应用编...
2019-05-19 20:40:22
94
原创 响应式布局
第一步：在网页代码的头部，加入一行viewport元标签（1）viewport是网页默认的宽度和高度，上面这行代码的意思是：网页宽度默认等于屏幕宽度 （width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。<meta name="viewport" content="width=device-width, i...
2019-05-18 23:23:58
51
原创 媒体查询
Media Queries能在不同的条件下使用不同的样式，使页面在不同在终端设备下达到不同的渲染效果。前面简单的介绍了Media Queries如何引用到项目中，但Media Queries有其自己的使用规则。具体来说,Media Queries的使用方法如下。注意：使用Media Queries必须要使用“@media”开头，然后指定媒体类型（也可以称为设备类型），随后是指定媒体特性（也可以...
2019-05-16 22:18:04
67
原创 移动端touch事件
Touch 事件首先 touch 包含三类事件，它们分别是：touchstart、touchmove、touchend 。望文生义这种本能相信你应该会有，但在这里我还是有必需对这三个词进行一翻不必要的解释。touchstart：手指触摸到一个 DOM 元素时触发。touchmove：手指在一个 DOM 元素上滑动时触发。touchend：手指从一个 DOM 元素上移开时触发。这...
2019-05-15 21:27:28
170
原创 移动web
什么是移动WEB开发，将网页更好的显示在移动端的一些设置，简单来说就两点如下：1、流式布局，即百分比自适应布局将body下的div容器的样式设置如下：div{ width:100%; }2、viewport视口在head标签中，添加如下：<meta name="viewport" content="width=device-width,initial-scale=1....
2019-05-14 21:52:27
79
原创 使用canvas绘制等分圆
代码如下 :<body><canvas width="600" height="500" id="cvs"></canvas></body> var canvas = document.querySelector('#cvs'); canvas.style.border = '1px solid blue'; ...
2019-05-13 21:55:24
1451
2
原创 H5 canvas的使用
Canvas是HTML5新增的组件，它就像一块幕布，可以用JavaScript在上面绘制各种图表、动画等。//绘制矩形 var canvas4 = document.getElementById('test_canvas4');//获取绘图区域 var ctx4 = canvas4.getContext('2d');//让我们拿到一个CanvasRenderingContex...
2019-05-12 21:56:44
295
原创 canvas绘制三角形
<body><canvas id="cvs" width="600" height="600" style="border: 1px solid #00a4ff;"></canvas></body><script> var cvs = document.querySelector('#cvs').getContext('2...
2019-05-09 21:23:34
1808
原创 stellar制作视差滚动效果
html单个元素选项中data-stellar-background-ratio比较常用。 接受一个正整数的值，可以改变它被应用到元素的影响速度。 例如，data-stellar-background-ratio="0.5"意味着改变速度为自然滚动速度的一半。 如果想使这个属性值低于1，建议在样式表里设置background-attachment: fixed;。<divclass=...
2019-05-07 19:26:17
431
原创 伸缩布局
CSS3引入了一种新的布局模式——Flexbox布局，即伸缩布局盒模型（Flexible Box），用来提供一个更加有效的方式制定、调整和分布一个容器里项目布局，即使它们的大小是未知或者动态的，这里简称为Flex。Flexbox布局常用于设计比较复杂的页面，可以轻松的实现屏幕和浏览器窗口大小发生变化时保持元素的相对位置和大小不变，同时减少了依赖于浮动布局实现元素位置的定义以及重置元素的大小。...
2019-05-06 21:10:51
147
转载 css和js实现流星雨
<template> <div > ============================流星雨============================ <div class="title"> <div id="stars"></div> </div> </div>...
2019-05-05 21:56:39
314
原创 H5动画
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style> img{ width: 150px; animation: plane 7s ease-in-out infinit...
2019-05-04 20:50:56
1136
原创 css3
2D转换：移动、缩放、转动、拉长或拉伸.注：2D转换是整个坐标系在转换，物体在坐标系中坐标并没有变化。位移：transform:translate(100px,200px);//向右移动100px,向下移动200px.附：translateX(n)，translateY(n)转动：transform: rotate(30deg);//0到360deg,顺时针转动逐渐增加.transf...
2019-04-29 23:09:44
70
原创 css3动画实例
<html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } ...
2019-04-28 20:22:57
362
转载 H5实现3D动画
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=n...
2019-04-27 20:59:27
1945
原创 css3盒子阴影
用法•box-shadow:[inset]x y blur [spread] color•参数inset：投影方式inset：内投影<style>.box{width:100px;height:100px;margin:100px;background:Red;box-shadow:inset 10px 10px 30px ...
2019-04-25 21:37:09
1721
转载 json和jsonp的区别
json返回的是一串数据；而jsonp返回的是脚本代码（包含一个函数调用）；JSON其实就是JavaScript中的一个对象，跟var obj={}在质上完全一样，只是在量上可以无限扩展。简单地讲，json其实就是JavaScript中的对象(Object)和数组(Array，其实也是对象)这倆好基友在那儿你嵌我我嵌你地套上n多层，以此模拟出许多复杂的数据结构。json易于人阅读和编写，也...
2019-04-24 22:32:45
95
原创 jquery的ajax
AJAX = 异步 JavaScript 和 XML。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。AJAX 不是新的编程语言，而是一种使用现有标准的新方法。AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。...
2019-04-23 18:47:49
67
原创 jquery常用插件
插件是以jQuery的核心代码为基础，编写出符合一定规范的应用程序，并将程序进行打包，调用时，仅需要包含该打包后的JS文件即可。如需要使用表单插件，按下列步骤就可实现插件的调用：（1）在页面中导入包含表单插件的JS文件，并确定它定位与主jQuery库后，其代码如下：<head> <script type="text/javascript" src="Jscri...
2019-04-22 20:11:40
92
原创 CSDN代码块显示颜色
很多刚开始玩CSDN的程序猿肯定都会有这样一个问题，为什么看别人的博客中的代码都是有颜色的，而自己的代码块却是没有颜色的比如这样是没有颜色的<body><input type="button" value="点击" id="btn"><input type="button" value="干掉第一个按钮的事件" id="btn2"></bod...
2019-04-21 21:00:28
306
原创 jquery基础事件
1. 事件绑定$("button").bind("click", function() {alert("ok");})$("button").bind("click mouseover", function() {//可以同时绑定多个事件alert("ok");})$("button").bind({mouseover: function() {alert(...
2019-04-18 19:04:48
160
原创 jquery笔记
一． DOM(Document Object Modle 的缩写)意思是文档对象模型。根据W3CDOM规范，Dom是一种与浏览器，平台，语言无关的接口，使用该接口可以轻松访问访问页面中所有标准组件。简单说，DOM解决了Netscape的javaScript和Microsoft的Jscript之间的冲突，给予web设计师和开发工程师一套标准的方法，能够轻松获取和操作网页中的数据，脚本和表现分离。...
2019-04-17 19:24:33
79
原创 jQuery中prop的用法
添加并移除名为 "color" 的属性：$("button").click(function(){ var $x = $("div"); $x.prop("color","FF0000"); $x.append("The color 属性： " + $x.prop("color")); $x.removeProp("color")...
2019-04-16 22:09:07
505
原创 jquery实现手风琴效果
<ul class="parentWrap"> <li class="menuGroup"> <span class="groupTitle">标题1</span> <div>我是弹出来的div1</div> </li> <li class="menuGroup"> ...
2019-04-15 21:28:48
182
转载 javascript对数组和json数组的操作
经常使用javascript对数组和json数组进行操作，但是时间久了就忘记咋操作的了，所以这里简单记录一下直接看代码吧<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>javascript数组操作</title>...
2019-04-14 22:17:55
182
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人