- 博客(42)
- 收藏
- 关注
RSS订阅原创 vue-vuex
一、vuex基本概念vuex 是一个专为 vue.js 应用程序开发的状态管理模式。可以理解为我们项目中需要共享的一些数据进行集中管理的容器。把这些数据称为属性状态。比如一个用户的用户名，性别，权限级别等等。一般小项目里只用简单的状态管理，中型大型项目里用的多。二、引入挂载import simpleStore from './store/simpleStore'Vue.prototyp...
2020-04-02 13:18:40
200
原创 vue数据请求---（fetch-jsonp）
fetch-jsonp 数据请求跨域一、安装、配置1. 安装 npm install fetch-jsonp2. main.js文件导入 import fetch from 'fetch-jsonp'3. 当前组件使用 import FetchJsonp from "fetch-jsonp";二、使用FetchJsonp(src, { jsonpCallback: "...
2020-04-02 13:07:13
1030
原创 vue数据请求---（axios）
一、配置import Axios from "axios";Axios.get("/getuser") ||.post("/gettable") .then((res) => { console.log(res.data.result); }) .catch((error) => { console.log(...
2020-04-02 13:03:43
256
原创 vue数据请求---（vue-resource）
一、安装 cnpm install vue-resource –save二、配置//配置vue-resource、使用插件import vueResource from 'vue-resource'Vue.use(vueResource);//引入mock.js 加载mock数据文件require("./mock/mock");三、请求数据相应组件挂载完成后 get/post...
2020-04-02 12:57:41
176
原创 vue数据请求---（mock）
mock模拟数据步骤：安装 cnpm install mockjs --save-devmock.js配置模拟数据的文件 import Mock from ‘mockjs’在整个项目mian.js引入mock 数据 require("./Mock/mock");在组件引入mock 数据: 将axios绑定到vue的原型对象（Vue.prototype.axios=Axios）所有...
2020-04-02 12:54:12
232
原创 vue路由（router）---守卫
本篇总结vue router中的守卫。vue router提供的导航守卫主要用来通过跳转或取消的方式守卫导航。可分为以下几种：1、全局的2、单个路由独享的3、或者组件级的一、全局前置守卫router.beforeEach((to,from,next)=>{ //to() 进入目标路由 //from() 离开的路由 //next() 下一个路由 /...
2020-04-02 12:43:39
798
原创 vue路由（router）---动态绑定
本篇介绍vue router的动态绑定。动态传值。之前一篇vue router基础讲了页面内路由的配置方法以及路由的入口，在这里就不多陈述了。1、配置路由2、路由入口3、动态获取对象传值mouted(){ this.$route.params;}编程实现路由获取对象gorouter() { this.$router.push("/"); //1.p...
2020-04-02 12:28:20
2025
原创 vue路由（router）---基础
本篇总结vue路由的基础。一、特点：1、Vue.js 路由允许我们通过不同的 URL 访问不同的内容。2、通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）。3、Vue.js 路由需要载入 vue-router 库。二、安装方式一：直接下载https://unpkg.com/vue-router/dist/vue-ro...
2020-04-02 12:10:18
220
原创 vue动画
本篇博客总结一下vue中的动画。其实准确的来说是vue中的过渡效果和动画效果。过渡Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。Vue 提供了内置的过渡封装组件，该组件用于包裹要实现过渡效果的组件。<transition name = "nameoftransition"> <div></div></trans...
2020-04-02 11:48:19
120
原创 vue钩子
本篇博客总结一下钩子。vue中的钩子函数：指令定义函数提供了几个钩子函数（可选）。例如：bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后...
2020-04-02 11:09:52
276
原创 vue组件
组件（Component）是 Vue.js 最强大的功能之一。它可以扩展 HTML 元素，封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树。组件创建vue当中创建单文件组件App.vue 是vue项目的主模板 （组件 主组件）自己定义一个文件 component 放置子组件1.如何创建组件 直接建立对应的vue...
2020-04-02 11:00:07
103
原创 vue语法
上一篇介绍了vue的环境搭建安装以及项目的创建配置，这篇博客开始学习总结vue的语法。一、数据绑定数据绑定 ：{{}} 绑定表达式 表达式里面可以进行运算绑定属性使用的指令是 v-bind 指令 ，方式：v-bind:title=“变量” ，也可以简写：:class=“变量”。循环渲染数据使用的v-for 指令 ，进行数据的循环渲染，数据渲染。<!-- 绑定变量之类的 --&...
2020-04-02 10:25:09
285
原创 vue入门
最近学到了vue的部分，边学边总结。一、vue的基本背景vue.js是一套用来构建用户界面的渐进式框架。它只关注视图层， 采用自底向上增量开发的设计。此外，Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。二、vue的下载以及安装我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 配置环境安装命令：1、安装Nodejs 。http://no...
2020-04-02 09:59:46
121
原创 video属性及操作
video属性较多，这篇博客总结一下几个常用的，然后再写一个例子练习一下。video apivar video = document.querySelector("#video");加载播放路径video.src = "./mp4/mov_bbb.mp4";当浏览器加载媒体数据的时候执行的video.onloadstart = function () { conso...
2020-03-19 12:55:18
2636
原创 缓存（cookie）
cookie：主要用于缓存web 页面用户的信息的。cookie 是一种数据 缓存到电脑上的文本文件，在web页面上，用户的信息不回存储在后端，在页面上使用缓存 来存储。在用户访问页面的时候存储用户的信息到cookie，下次访问的时候，直接从cookie读取信息。另外，cookie 缓存 存在有效期。一、JavaScript中的缓存创建cookiecookie的简单建立documen...
2020-03-19 12:44:18
3416
原创 HTML5之canvas
canvas 是 HTML5 新增的，一个可以使用脚本(通常为 JavaScript) 在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。一、canvas apivar canvas=document.querySelector("#canvas"); canvas.width=700; canvas.h...
2020-03-19 12:29:07
186
原创 ECMAScript6
ECMAScript6简称ES6，和ECMAScript5简称ES5一样，代表了不同的标准。es6的语法接近于后端语法，而另一种脚本语言TypeScript更接近后端。一、let和constlet ：1、let声明的变量只在 let 命令所在的代码块内有效。2、let不能重复声明。3、不存在变量提升。const ：声明一个只读的常量，一旦声明，常量的值就不能改变。意味着，一旦声明必须...
2020-03-19 12:16:54
157
原创 JavaScript之模式
JS中有许多种模式，被用来解决不同的问题，下面就总结一下。一、工厂模式工厂模式用来实例化对象和返回对象，它可以解决创建多个对象的问题，但是所创建的对象类型都一致，没办法区分对象的类型。操作实例： function Factory(n,s){ //创建一个对象 var obj={}; obj.name=n; obj.sex=s;...
2020-03-19 11:01:35
120
原创 JavaScript之继承
这篇博客总结一下JavaScript中的6种继承方式。一、原型链继承prototype指的是原型对象。例如：实例化的数组对象继承的Array 的原型对象console.log(Array.prototype);所有的javascript都会继承一个prototype原型对象，继承原型对象上的属性和方法。例如：date 对象 从Date.prototype 原型对象上继承属性和方法...
2020-03-19 10:23:22
109
原创 echarts入门
最近在学习用echarts来建立一些图表，其实echarts就是JavaScript的一个图表库，用来画一些数据图表等等。一、获取echarts库echarts有四种获取方法：1、 从 Apache ECharts (incubating) 官网下载界面 获取官方源码包后构建。2、在 ECharts 的 GitHub 获取。3、通过 npm 获取 echarts，npm install ...
2020-03-19 09:28:44
703
原创 jQuery之插件机制
在jQuery的高级语法里面有个插件机制，换句话说就是扩展jQuery，提供新的方法。一、插件机制jQuery.fn.extend(object) 扩展 jQuery 元素集来提供新的方法（通常用来制作插件）。jQuery.extend(object) 扩展jQuery对象本身。用来在jQuery命名空间上增加新函数。// 扩展jquery 元素集 $.fn.extend({ ...
2020-03-05 15:52:59
161
原创 Ajax
这篇博客用来总结Ajax，包括了挺多新的知识。一、Ajax基本信息Ajax被用在前后端分离开发，连接在数据接口（api）上，它运用了异步请求的方法（请求和后续代码同时执行）。所以总结来说，Ajax是专门做后台数据的访问的。首先学习原生js的ajax，面向的是XMLhttprequest对象，也是后台数据访问的对象。原生js用Ajax访问后台数据一般分为5个步骤：1.实例化对象2.open...
2020-03-05 15:46:13
191
原创 jQuery的动画效果
jQuery里面有一些简单的动画效果，下面就总结和实践一下。一、基本效果jQuery里的基本动画效果有显示、隐藏和显示隐藏切换1、show([s,[e],[fn]]) 显示2、hide([s,[e],[fn]]) 隐藏3、toggle([s],[e],[fn]) 显示隐藏切换下面是用法练习：<!DOCTYPE html><html><head l...
2020-03-05 15:08:37
417
原创 jQuery基础之正则表达式及表单验证
这篇博客就来总结一下jQuery里面的正则表达式以及表单验证。一、正则表达式正则表达式的作用是用来验证字符串的格式。虽然它的内容比较繁琐，但是功能很强大。它的写法很随意，但是要注意语法规则，在此前提下就可以自己随意拼接。...
2020-02-23 15:05:58
1801
原创 jQuery的应用实践之分页
本篇博客主要研究一下用jQuery实现的分页效果。一、隐藏类型的分页由于是对jQuery的练习，所以能用jQuery实现的功能尽量用jQuery实现。效果图：这其中主要的部分是对按钮功能的实现，利用jQuery搭建的分页栏然后对每个按钮进行功能的嵌入。<!DOCTYPE html><html><head lang="en"> <me...
2020-02-17 17:28:24
317
原创 jQuery的应用实践之购物车
最近学习了jQuery的内容，做一个小型购物车来练习巩固一下。基本样式搭建首先进行基本样式的搭建，在页面里添加几个div用来布局一些购物车所需要的模块。<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8">...
2020-02-17 15:56:57
390
原创 jQuery基础（3）
今天总结一下jQuery筛选中的过滤、查找以及串联。一、jQuery筛选中的过滤eq(index|-index)：获取子元素里面的其中某一个，根据索引来获取。$("ul>li").eq(0)；//获取子元素中索引为0的元素first()：获取第一个子元素$("ul>li").first();...
2020-02-17 14:40:18
126
原创 jQuery基础（2）
这次博客总结一下jQuery中的事件以及事件的处理。一、jQuery中的事件在jQuery中绑定或者移除事件，首先得页面载入完成，即：$(document).ready(function () { });这样会让事件不受影响，正常触发。事件的绑定和移除参数eve：事件，类似js里面的事件参数sel：执行该事件调用...
2020-02-14 16:47:14
104
原创 jQuery基础（1）
最近学习到了jQuery，边学习边总结，东西比较多请耐心看，但大多还是js和css的东西，需要区别和加深记忆。一、jQuery基本信息1、jquery 是 js用于快速开发而封装的一个框架，相对来说代码量较少，但实现功能比较多，还可以处理不同浏览器之间的兼容性问题。通俗的来说，jQuery其实就是把JS的大量语...
2020-02-14 15:59:45
137
原创 JavaScript基础总结（4）
最近在写一些JavaScript的实践例子，发现了一些知识点，总结一下。一、JavaScript中的数据类型es5中一共有6种数据类型，分别是：Number、String、Boolean、Null、undefined、object。es6中新增了一种：Symbol 。这种类型的对象是永不相等的，即始在创建时传入相同的赋值，可以解决属性名冲突，设置为标记。谷歌67版本中还出现了一种 bigI...
2020-01-08 14:20:32
201
原创 JavaScript基础总结（3）
总结一下最近学习的内容。一、bom对象 bom指的是浏览器对象模型。1、window对象 所有浏览器都支持 window 对象。它表示浏览器窗口。所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的...
2020-01-02 09:58:21
326
1
原创 JavaScript基础总结（2）
之前总结到JavaScript事件的绑定，下面进行后面知识点的总结，并且穿插几个案例。一、JS事件的委托 首先要鲜明白一个问题，为什么JS里对集合的操作只能是用方括号【】进行单个操作？&nbs...
2019-12-25 10:52:13
122
原创 Javascript基础总结（1）
经过这段时间的学习，我将目前所学的JavaScript的基础部分做一个总结。一、JavaScript基础知识1、JavaScript是一个脚本语言，也是前端开发的核心语言，目前所学的是ecmascript5.0的版本，企业里用的是ecmascript6.0/es7，基本上是在5.0的基础上对语句进行了一些优化等...
2019-12-17 13:41:22
113
原创 Javascript基础（2）
上周进行了JS的进一步学习，学习了几个对象，以及数组的操作还有冒泡事件，下面就做一下总结。一、知识点内置对象number对象：.toString(进制数) 转换成不同进制数.toFixed(小数位数) 保留小数倍数string对象.length 字符串长度indexOf()查找字符串返回字符串位...
2019-12-11 11:05:18
22883
原创 Javascript入门
最近几天开始了Javascript的学习，从最基础的语句语法入手，边学习边实践，效果还不错。一、基本知识输出：alert() 弹框输出confirm() 带确定取消按钮的弹框document.write() 在文档流中输出document.getElementById.innerHTML修改页面中的html元素console.log() 在调试平台中输出输入：1、prompt(“...
2019-12-02 18:50:11
122
原创 手机页面的布局及搭建
最近进入了手机页面的布局和搭建这方面的练习，对于布局这里还是收获颇丰。一、布局布局的时候要注意图层的优先级。好多界面有底部的菜单，对于这些头部和底部的菜单都用固定定位，并用z-index提高图层的优先级，达到预期的结果。其次要注意的是对图片和div这些元素的宽度定义，一般是选用根元素rem来作为单位定义的，而且用百分比来定义宽度的时候要考虑不同手机的分辨率不同，可能对自己分好的模块有...
2019-11-27 16:55:42
528
原创 CSS3标签语句使用（1）
一、弹性盒子及元素操作多列column-count:分列数column-gap:栏间距column-rule:分隔线弹性盒子父元素中添加display:flex; display:-webkit-flex;添加方向祖先元素添加:direction:ltr/rtl 排列方向父元素：flex-direction:row/row-reverse/column/column-re...
2019-11-20 15:46:39
99
原创 渐变色及H5入门
一、渐变色在网页设计的时候会用到渐变色，比如间隔线，或者是渐变透明图，那么具体是怎么用呢？首先，渐变色在HTML中的编译语句是：background:linear-gradient(180deg,rgba(255,255,255,0),white 50%,white) ;上面这语句意思是从上至下为透明向白色渐变，另外，间隔线为：background:linear-gradient(18...
2019-11-13 18:02:15
1943
原创 固定定位的使用
在网页中会有一些样式需要用到固定定位，对于它的使用，我们来作以练习。一、介绍固定定位的标签语句为：position：fixed；和其他定位方法一样，都是需要先在父级元素进行相对定位，然后才能定位到想要定位的地方。配合使用图层级数来使定位显示的效果更好，图层级数：z-index：n；还有一些小技巧：溢出省略号：overflow:hidden;text-overflow:eclipse...
2019-11-06 19:05:40
2378
1
原创 网页布局标签《1》
一、标签及指令《1》颜色：red#f00rgb(255,0,0)rgba(255,0,0,0.5) 带透明度的色彩值opacity: 50%;透明度border-radius:圆角border-radius：值值：a 表示四角都为相同的圆角状态值：a b 表示 左上，右下都为a，右上，左下都为b值：a b c 表示左上为a 右上和左下为b 右下为c值：a b c d...
2019-10-31 14:05:02
794
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人