@半笺寄幽怀-优快云博客

原创 Vuex配置和基本使用

在学习vuex之前，我们需要先了解一下vuex是什么。在vuex的官网，他是这样定义的：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。说的非常高大尚，我个人的理解就是将数据集中管理，然后通过某些特地的api可以使用到这其中的数据，对其进行某些操作。那么这样做有什么意义呢？首先是公共的数据能够集中管理，使用api使在该项目中的每一个所需要该数据的组件都能够使用，下面我们来讲一下如何使用该插件。1、安装和配置Vuex1) vuex是一个插件，所以我们需要通过npm指令安装。npm

2021-11-17 22:22:17 777

原创 vue-router如何配置

今天我们来讲一下如何去配置vue-router，vue路由是vue全家桶中至关重要的，他来控制路由分发和跳转。1、引入vue-router首先我们需要通过 npm i vue-router 来安装我们所需要的依赖，我们在main.js中引入vue-router，并且在new Vue中触发一个属性router，原来应该 router:router 写，es6中我们就可以简写为 router 。// 引入Vueimport Vue from 'vue'// 引入App组件import App

2021-11-16 21:39:06 2061 1

原创 vue全局事件总线

vue组件间传值有很多种方法，这里我们来讲讲如何利用全局事件总线来进行组件间传值。先讲讲我们需要实现的一个案例，我们需要在兄弟组件中传值，将Student.vue中的学生信息传递给School.vue中进行使用，下面我们进行详细的操作。一、注册全局事件总线在一个创建好的vue2项目中注册全局事件总线(即在Vue的原型对象上添加一个对象$bus)，用于存放数据。我们都知道最大的组件是通过new Vue创建的实例对象，那么该组件能够通过隐式原型链访问到$bus。子组件是VueComponent的实例对象

2021-11-16 20:56:52 688

原创 ajax跨域问题

使用ajax的过程中，经常会碰见跨域。什么是跨域呢？就是在协议、域名、端口号不相同的情况下进行数据交互，这就是交互。这是违背了浏览器的自律行为。那么要怎么解决这个问题呢？1、jsonp方法有些标签是自带跨域属性的，比如script标签，使用这些标签的特性来实现跨域。话不多说，我们来看看是怎么实现的。首先我们要在8000端口起一个服务，用于接收请求，利用node.js在终端将服务启动。// 引入express模块const express = require('express');con

2021-10-24 09:58:33 168

原创 Animate动画插件

上次我们讲了一下swiper插件如何使用，这节我们来讲一下animate插件如何使用。同样，先打开官网：Animate中文网 – Animate安装、Animate使用、Animate下载。然后到代码托管平台GitHub上将文件下载：GitHub - animate-css/animate.css。便于使用，下图中圈起来的文件是我们所需要使用的文件。(animate.css文件和animate.min.css文件是一样的，带min的是压缩过后的，运行不会有任何影响)一、使用同样，我们先在一个空.

2021-10-17 10:36:29 4218

原创 Swiper轮播图

轮播图在日常的网页中非常常见，要是自己去写就非常的繁琐，那么有没有一个现成的封装好的css和js等着我们去调用就行了呢？这里我们就要讲到插件，今天讲讲这个轮播图插件如何去使用，今天讲的是swiper3的使用，这个版本比较稳定。一、如何使用1）进入官网：https://3.swiper.com.cn/2）下载插件3）获取到这个压缩包以后，解压缩，然后我们对着文档来看，先点开在线演示，里面有各色各样的动画效果。我们随便选了个动画效果来讲，这里我们可以在下载好了的文件中找到一个..

2021-10-10 21:02:43 154

原创使用for循环添加点击事件时，获取i值的方法

问题在很多时候需要为所有 li 添加一个相同的单击事件。如下：每次点击 li 都只能在最后一个有效，即不能输出对应的 i 值。这是因为es5中只有全局作用域和局部作用域，使用 var 会执行完 for 循环再执行里面的事件，所以只能一直弹出 i 的值为 5。 <body> <div class="box"> <ul> <li>1</li> <li>2</li> <li&

2021-10-08 21:12:39 980

原创 js预解析

最近看到这个预解析，非常有意思，能够帮助我们更深刻的了解这个语言在浏览器中是怎么运行的。下面我们来通过几个小案例了解一下： // 预解析 var num = 20; function fun1() { console.log(num); var num = 10; console.log(num); } fun1();这个会在控制台打印出什么呢。我们来分析一下，首先进行预解析，直接将定义提起，即像下面这样运行代码。让我们来看看运行出什么结果吧。

2021-09-25 21:44:07 93

原创 js实现锅打灰太狼

思路利用盒子将每个洞包裹起来，然后给这个盒子一个初始背景图并且隐藏。触发定时器时显示，并且利用雪碧图，通过改变图片位置实现一个灰太狼上下的动画。利用随机数来实现灰太狼从哪个洞口出来和洞口出来的是灰太狼还是小灰灰，最后通过点击事件来加减分，进图条同样利用定时器实现。话不多说，下面上代码：一、布局利用 ul>li 将每个洞包裹起来，并且给个默认类名为 htl<body> <div class="bg"> <div> <ul>

2021-09-25 21:17:12 582

原创 js实现学生系统增删改查

目录思路一、布局二、获取对象并遍历数组三、实现添加功能四、实现删除功能五、实现修改功能六、实现上下移动七、实现模糊查询思路先讲一下思路，个人认为这个是比较简单，容易理解的。首先，我们创建一个数组，里面存入一些对象数据。然后我们通过遍历数组，得到对象，放到对应的表格中。然后我们实现添加功能，通过获取对应的输入框的值，存到一个对象中，然后通过数组函数push将存储的对象添加到数组中，再将原本的表格移除以后重新遍历数组，就能够将添加过数据的数组遍历到表格当中。删除修..

2021-09-19 01:20:19 1532

qq_45848432的博客