- 博客(49)
- 收藏
- 关注
RSS订阅原创 vue-router
vue-router安装npm install vue-router --save使用在src目录下新建一个router.js文件，在router.js中引入vue，在router.js中导入router模块，在vue中使用router。import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)export default new Router({ routes:[]})...
2021-02-09 13:59:33
175
原创 Axios
Axiosvue本身是不支持发送ajax请求，需要通过其它库来实现（vue1.0----->vue-resource、vue2.0---->axios），或者也可以通过使用jQuery来发送ajax请求。axios是一个基于promise的HTTP请求客户端，用来发送请求安装npm install axios -s使用在main.js中引入axiosimport axios from 'axios'Vue.prototype.axios = axios在组件中使用da
2021-02-07 15:55:38
206
原创 Vuex核心内容(二)
一、Action用于处理异步的数据如果通过异步操作变更数据，必须通过action，而不能使用mutation，但是在action中还是要通过触发mutation的方式间接变更数据。实例const store = new Vuex.Store({ state:{ count:0 }, mutations:{ add(state){ state.count++ } }, actions: { addAsync(context){ setTimeout(
2021-02-07 15:35:35
180
原创 Vuex核心内容(一)
vuex状态管理有5个核心内容: state、mutation、action、getter以及module一、statestate提供唯一的公共数据源，所有共享的数据都要统一放到store中的state中进行存储。实例//index.jsconst store = new Vuex.Store({ state: { count:0 }})组件访问state中数据的第一种方式： this.$store.state.xx// 组件中引入：<h3>当前最新.
2021-02-07 14:29:48
214
原创 Vuex
一、vuexvuex是实现组件状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享。1. 安装vuexnpm install Vuex --save2. 使用vuex在项目的src目录下新建一个名为store的目录，在该目录下新建一个index.js文件，用来创建vuex实例。然后在index.js文件中引入vue和vuex，创建vue.store实例保存到变量store中，最后使用export default导出store。//main.jsimport Vue from 'v
2021-02-07 13:31:04
106
原创 JavaScript控制台报错 “ Uncaught SyntaxError: Unexpected to” 解决办法！！！
报错 Uncaught SyntaxError: Unexpected token <！！！今天我在改代码的时候，发现页面报错了，虽然这个代码不是我自己写的，是别的同事写的，但是我很懵啊，第一行竟然有错。我以为是网页标签没有闭包，所以检查了一下，并不是。经过检查，发现是JavaScript的错误，引入JavaScript路径时多引入了一个echarts.js的文件，但是在我的js文件夹下我未发现这个.js文件。把下面这段代码注释后，这个问题就解决了！注意： 这SyntaxErro
2020-10-10 10:51:35
2290
原创 web前端面试题分享（一）
以下这些都是我自己在面试时遇见过的问题，有需要的话可以参考参考。HTML5 有哪些新特性？声明方式，HTML4 规定了三种声明方式，分别是：严格模式、过渡模式 和 框架集模式；而HTML5因为不是SGML的子集，只需要<!DOCTYPE>就可以了。语义化更好的内容标签：header、footer、article、section等音频、视频新增了很多表单控件：color、date、datetime、email、month、number、search、tel、url等本地存储：lo
2020-10-09 16:59:38
248
1
原创 css+html+javascript制作banner自动轮播图
banner自动轮播图设计思路banner自动轮播图是根据之前的点击切换图片之上进行了修改；在其之上加上了setInterval（）自动调取函数，加上这个函数后，就不用通过点击图片来实现图片的切换。...
2020-10-09 15:53:45
2364
原创 uni-app入门（pages.json配置项列表）
一、tabBar如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页。注意：当设置 position 为 top 时，将不会显示 icontabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。tabbar 切换第一次加载时可能渲染不及时，可以在每个tabbar页面的onLoad生命周期里先弹出一个等待雪花（hello uni-app使用了此方式）tabbar 的页面展现过一次
2020-10-09 13:33:22
866
原创 uni-app入门（uni-app项目结构介绍、pages.json配置项列表）
一、uni-app项目结构上一篇博客咱们介绍了如何创建一个uni-app项目，项目创建完成后的目录样式如图所示：pages 业务页面文件存放的目录pages里面可以存放.vue的页面，如下图所示：index的页面static 存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此App.vue 应用配置，用来配置App全局样式以及监听 应用生命周期main.js Vue初始化入口文件manifest
2020-10-09 13:06:25
1305
原创 uni-app入门（uni-app基础介绍，软件安装，微信开发者工具安装）
一、什么是uni-appuni-app 是一个使用 Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。二、创建uni-app项目uni-app支持通过 可视化界面、vue-cli命令行 两种方式快速创建项目。以下是通过 HBuilderX 可视化界面进行使用的（可视化的方式比较简单，HBuilderX内置相关环境，开箱即用，无需配置nodejs。）注意：如需了解其他方法
2020-10-09 10:29:03
1280
原创 Vue项目控制台 报sockjs.js?9be2:1606 GET http://192.168.43.226:8080/sockjs-node/info?t=1584966826465
在做Vue项目时，打开控制台看见报sockjs.js?9be2:1606 GET http://192.168.43.226:8080/sockjs-node/info?t=1584966826465 net::ERR_CONNECTION_TIMED_OUT这个错误，虽然它不影响咱们程序的运行，但是它也是一直存在，看着也不舒服，所以咱们今天来解决这个错误。网上找到的原因说是：sockjs-node是一个JavaScript库，提供跨浏览器JavaScript的API，创建了一个低延迟、全双工的浏览器.
2020-07-12 16:48:50
4031
7
原创 Vue------shortid组件的安装及使用
一、shortid组件安装步骤插件shortid是生成随机ID的cmd 进入到项目目录中，输入npm i shortid --save 或 在webstorm项目中右击，Open in Terminal中输入：npm i shortid --save导入shortid模块 : import shortid from ‘shortId’定义数组，装安装的idshortId.generate()卸载shortid的命令：npm uninstall shortid二、使用shortid
2020-07-07 13:26:56
1266
原创 AJAX
一、AJAX简介Ajax：异步的JavaScript和XML，web开发的一种技术，可以用来异步发送和请求数据，不需要重新刷新整个页面。二、创建 XMLHttpRequest 对象XMLHttpRequest 是 AJAX 的基础。var xml = new XMLHttpRequest();三、向服务器发送请求向服务器发送请求，使用XMLHttpRequest对象的open()和send()方法语法：open(type(post,get),url,async(true,fal
2020-07-05 22:15:39
118
原创 Vue脚手架安装
Vue脚手架安装一、安装npm安装node.js打开cmd （Windows+R）输入 npm -v 查看npm版本输入 npm install npm -g 升级npm版本国内直接使用 npm 的官方镜像非常慢，这里推荐使用淘宝 NPM 镜像。淘宝 NPM 镜像是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:
2020-07-05 21:28:23
298
原创 JavaScript----正则表达式
正则表达式定义让字符串按照我们指定的规则执行。定义规则var reg01 = new RegExp("规则");var reg02 = /规则/;边界^ 以…开头$ 以…结尾. 句号符 匹配任意一个字符[] 匹配出现过的任意一个字符() 匹配出现过的任意一个字符串连接符-a-z 表示字符a-zA-Z 表示字符A-Z0-9 表示字符0-9（所有...
2020-04-06 21:34:04
147
原创 JavaScript---Node节点方法
Node节点方法appendChild() 向节点的子节点列表的结尾追加一个新的子节点例子 <style> #box{width: 1000px;height:200px;background: #2b669a;} img{width: 40px;height: 40px;float: left;margin-right: 10px;} ...
2020-03-19 15:52:09
394
原创 JavaScript 节点（node）知识
一、节点概念DOM : Document Object Model 文档对象模型定义了访问和处理HTML文档的标准方法根据DOM，文档中每一个成分都是一个节点DOM节点整个文档是一个文档节点HTML标签是元素节点 包含在元素中的文本，叫文本节点 属性，属性节点 注释，注释节点节点级别：在节点树中，顶端对应的节点为根节点根节点以外的每一个节点都有一个父节点节...
2020-03-19 11:20:10
467
原创 原生JS写轮播效果
一、设计概述这次的轮播图功能很全面，里面有鼠标事件效果，比如鼠标移入，停止自动播放，鼠标离开图片开始自动播放，当鼠标移入是会有箭头出现，鼠标离开始时箭头就会消失，图片可以通过点击左右箭头来切换，也可以通过点击li里面的小圆点来切换。这个轮播图主要运用到DOM，事件，Date对象里面自动调用函数和清空自动调用函数的知识了。二、程序运行效果三、代码body代码<div id="...
2020-03-18 16:29:45
1014
原创 Vue入门第4天----模板语法(循环)
一、分支循环结构1.1 分支结构v-ifv-elsev-else-ifv-showv-if、 v-else、 v-else-if这三个使用的方法和js里面的if 、else if、else的使用方法其实一样的；v-show其实和v-show差不多。1.2 v-if与v-show的区别v-if控制元素是否渲染到页面v-show控制元素样式是否显示（已经渲染到页面）...
2020-03-03 17:07:55
447
原创 Vue入门第3天------模板语法（二）
一、属性绑定1.1 Vue如何动态处理属性v-bind指令用法<a v-bind:href='url'>跳转</a>缩写形式<a :href='url'>跳转</a>1.2 v-model的底层实现原理分析<input v-bind:value='msg' v-on:input="msg=$event.target....
2020-03-03 15:56:28
130
原创 Vue入门第2天-------Vue模板语法(一)
一、Vue模板语法1.1前端渲染前端渲染把数据填充到HTML标签中前端渲染方式原生js拼接字符串使用前端模板引擎使用Vue特有的模板语法1.2指令什么是指令？自定义属性就是指令指令的格式：以v-开始（比如：v-cloak）v-cloak指令的用法提供样式 [v-cloak]{ display:none; }在插值表达式所在的标签中添加v-clo...
2020-02-23 17:45:02
382
原创 Vue入门第一天-----Vue概述及基本使用
一、Vue概述Vue是国产框架，尤雨溪是Vue.js的创建者。2014年2月，Vue.js正式发布；2015年10月27日，正式发布1.0.0版本；2016年4月27日，发布2.0的预览版本。Vue:渐进式JavaScript框架声明式渲染---->组件系统---->客户端路由---->集中式状态管理---->项目构建官网：https://cn.vuejs.or...
2020-02-23 16:41:14
367
原创 jQuery其他方法
jQuery其他方法主要包括：jQuery拷贝对象，多库共存和就去而已插件。下面将详细介绍它们三个！一、jQuery拷贝对象如果想要把某个对象拷贝（合并）给另外一个对象使用，此时可以使用$.extend()方法。语法$.extend([deep],target,object1,[objectN])参数deep:如果设置为true为深拷贝，默认为false浅拷贝target:要...
2020-02-18 19:03:14
294
原创 jQuery事件
一、事件注册语法：element.事件(function(){})$('div').click(function(){事件处理程序})二、事件处理on()绑定事件 on()方法在匹配元素上绑定一个或多个事件的事件处理函数语法：element.on(events,[selector],fn)参数：events:一个或多个用空格分隔的事件类型，如：click或keydo...
2020-02-17 21:09:55
157
原创 在开发中常遇见的问题（一）
焦点图实际开发中焦点图是由ul li a img组成的 <div class="focus"> <a href="#" class="arrow-l"></a> <a href="#" class="arrow-r"></a> <ul> <li> ...
2020-02-14 22:00:39
259
原创 jQuery内容文本值及元素操作
一、jQuery内容文本值主要针对元素的内容还有表单的值操作1. 普通元素的内容html()相当于原生innerHTML语法：html() //获取元素的内容html("内容") //设置元素的内容2. 普通元素文本内容text()相当于原生innerText语法：text() //获取元素的文本内容text("文本内容") //设置元素的文本内容3. 表单...
2020-02-10 16:49:50
456
原创 jQuery样式操作（Tab栏切换）
一、操作方法主要有两种方法：一种是操作css方法，另外一种是设置类样式。操作css方法参数只写属性名，则返回属性值参数是属性名，属性值，逗号隔开，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不加引号$("div").css({width:400,height:400,backgroundCo...
2020-02-07 11:04:11
797
原创 jQuery效果高亮显示案例
一、设计思路高亮显示案例，主要是对之前的jQuery效果做的巩固。它的主要思路是当点击其中一个图片时，其他的图片都变暗。主要是一个大盒子里面放着许多小的li。通过改变他们之间的透明度来实现效果。二、代码css *{ margin: 0; padding: 0; list-style: none; text-decoration: none; }...
2020-02-06 17:09:17
1317
2
原创 jQuery效果
jQuery给我们封装了很多动画效果，最为常见的有四种：显示隐藏、滑动、淡入淡出和自定义动画。下面将详细的为大家介绍这四种动画！一、显示隐藏显示语法规范show([speed,[easing],[fn]])参数参数都可以省略，无动画直接显示speed：三种预定速度之一的字符串（“show”,“normal”,or “fast”）或表示动画时长的毫秒数值（如：1000）easi...
2020-02-06 16:58:28
188
原创 jQuery-----淘宝精品服饰案例
一、设计思路 主要的设计思路是把这个分为几部分了解好，每一部分又包括什么都要弄明白。 咱们要做的效果图如下图所示：设计思路：这个效果分为两部分，左边是9个小的li，里面放物品名称；右边是盒子，盒子里面放的图片。当我们鼠标再女靴上时右边的图片就要变成女靴的图片，当我们鼠标在呢大衣上时右边图片就要变成呢大衣的图片，同理每一个都是这样变化的。所以得出结论就是：当我们得到左侧索引值in...
2020-02-05 14:07:17
2713
原创 jQuery-----选择器
一、jQuery选择器选择器的书写方式：$("选择器")//里面选择器直接写CSS选择器样式即可，但是要加引号选择器分为以下这几种：一种是基础选择器，一种是层级选择器，还有一种是筛选选择器，下面将会详细介绍！基本选择器名称用法描述ID选择器$("#id")获取指定的ID元素全选选择器$("*")匹配所有元素类选择器$(".class")获...
2020-02-04 21:04:36
1880
2
原创 jQuery的基本使用
一、jQuery对象和DOM对象用原生js获取来的对象就是DOM对象var div = document.querySelector('div');jQuery方法获取的元素就是jQuery对象$('div');jQuery对象只能使用jQuery方法，DOM对象则使用原生的JavaScript属性和方法div.style.display='none';//DOM$(...
2020-02-03 14:53:13
469
原创 jQuery-----概述及基本使用
一、jQuery概述jQuery的概念 jQuery是一个快速、简洁的JavaScript库，其设计的宗旨是“ 写更少的代码，做更多的事情。” j就是JavaScript；Query查询；意思就是查询js,把js中的DOM操作了封装，我们可以快速的查询使用里面的功能。 jQuery封装了JavaScript常用的功能代码，优化了DOM操作、事件处理、动画设计和Ajax交互。 学习...
2020-02-03 14:16:25
2897
1
原创 移动WEB开发-----flex子级常见属性
一、flex属性flex属性定义子项目分配剩余空间，用flex来表示占多少份数。flex:<number>;//默认值为0flex:1;二、align-self属性align-self控制子项自己在侧轴上的排列方式align-self属性允许单个项目有其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-it...
2020-01-31 14:11:36
406
原创 移动WEB开发------flex布局
一、flex布局体验传统布局与flex布局传统布局兼容性好布局繁琐局限性，不能再移动端很好的布局flex弹性布局操作方便，布局极为简单，移动端应用很广泛PC端浏览器支持情况较差IE 11或更低版本，不支持或仅部分支持注意：如果是PC端页面的布局，我们还是传统布局；如果是移动端或者不考虑兼容性问题的PC端页面布局，我们还是使用flex弹性布局。二、flex布局原理...
2020-01-30 17:15:03
313
原创 移动WEB开发----flex父级常用属性
主轴与侧轴在flex布局中，是分为主轴和侧轴两个方向即x轴和y轴。默认主轴是x轴 行 row，侧轴是y轴 列 column ；我们的元素是根据主轴来排列的。flex父级常见属性1. flex-direction：设置主轴方向flex-direction:row;//设置x轴为主轴（从左到右）flex-direction:row-reverse;//翻转（从右到左），...
2020-01-30 17:14:14
294
原创 JavaScript----DOM
一、DOMDOM定义DOM全称：Document Object Model 文档对象模型。JS中通过DOM来对HTML文档进行操作。文档： 表示的就是整个HTML网页文档；对象： 表示将网页中的每一个部分都转换为了一个对象；模型： 使用模型来表示对象之间的关系，这样方便我们获取对象。二、节点节点定义节点（Node）------构成HTML文档最基本的单元。常用节点分为四类：...
2020-01-12 14:27:26
248
原创 JavaScript ---- 数组（Array）
一、数组的简介数组的定义数组也是一个对象，它和我们普通对象功能类似，也是用来存储一些值的；不同的是普通对象是使用字符串作为属性名的，而数组是使用数字作为索引来操作元素。索引（index）：从0开始的整数就是索引数组的存储性能比普通对象要好，在开发中我们经常使用数组来存储一些数据。创建数组的对象var arr = new Array();向数组中添加元素语法：数组[索引] =...
2019-12-23 20:45:07
178
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人