2020年12月_敢问

12月 11月

原创 Vuex-基本使用-图集展示

效果展示vuex基本使用Vuex是vue的数据管理容器、Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式安装npm install --save -dev vuex 创建store文件夹，内部创建store.js文件 --------vuex的store就是管理vue的数据仓库 store.js export default { state: { a: 100 }, mutations: { }} ...

2020-12-29 10:27:21 488

原创 Vue-过度与动画

一、过度vue提供了 transition的封装组件所有关于过度的动画都是通过transition组件设置的几种能够能够过度的场景条件渲染 (使用v-if) 条件展示 (使用v-show) 动态组件组件根节点基本使用<div> <button @click="show">显示隐藏</button> <transition> <div class="box" v-if="isSho..

2020-12-27 21:34:16 218

原创 Vue-实例属性 $attrs $listeners $refs $el

1、$attrs$attrs包含了父作用域中不作为prop被识别（且获取）的attribute绑定（class和style除外）。当一个组件没有声明prop时，这里会包含所有父作用域的绑定（class和style除外），并且通过v-bind="$attrs" 传入内部组件-----在创建高级别的组件时非常有用。简单说 $attrs就是能够获取父组件除了props传入的所有属性（除了class和style）...

2020-12-27 13:12:31 1252 1

原创 Vue-自定义指令

Vue.directive 自定义指令的入口基本使用app.vue 中设置一个h1标签 <h1 v-color='"red"'>自定义指令red</h1> <h1 v-color='"orange"'>自定义指令orange</h1> <h1 v-size='"60px"'>自定义指令显示隐藏</h1>v-color、v-size 时自定义指令的名称，red orange 60px 是属性值在main....

2020-12-27 11:15:38 957

原创 Vue-插槽

1、匿名插槽Vue插槽官方网站官方说明：vue实现一套内容分发的API，这套 API 的设计灵感源自 Web Components 规范草案，将 <slot> 元素作为承载分发内容的出口。例：自定义btn创建btn.vue<template> <div> <div class="btn"> <slot>（默认样式）Default</slot> &l.

2020-12-26 12:38:52 210 2

原创 Vue-自定义插件

1、局部插件例：安装关于时间格式的插件 moment安装 npm install --save -devmoment app.vue引入 importmomentfrom"moment"<template> <div> <table> <tr> <th>姓名</th> <th>年龄</th> <th&gt...

2020-12-26 11:15:57 102

原创 Vue-过滤器filters

vue自定义过滤器filters是通过对数据的过滤从而实现对数据的优化，得到我们需要的数据内容例：对时间的过滤，从格林威治时间转换到日常时间2020-12-26<template> <div> <table> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> &

2020-12-26 10:51:31 240

原创 vue-computed 商城购物车

computed计算属性作用是对数据计算和缓存，优点是可以提高性能基本使用<template> <div> <h1>methods:{{reversStr()}}</h1> <h1>methods:{{reversStr()}}</h1> <h1>methods:{{reversStr()}}</h1> <h1>computed:{{rev

2020-12-24 17:40:00 176 1

原创 vue-混入mixins

混入（mixins）提供了一种非常灵活的方式来分发vue组件的可复用功能，一个混入对象可包含任意组件选项，当组件使用混入对象是，所有混入对象的选项将被“”混合“进入该组件本身的选项例：创建一个混入对象 mixins.jsexport const MixIns = { data(){ return{ a:100 } }, methods:{ add(){ this.a++

2020-12-24 11:14:41 414

原创 vue-watch 百度搜索框（模拟）

例：<template> <div> <h1>{{a}}</h1> <button @click="add">++</button> </div></template><script>export default { data(){ return{ a:100 } }, methods:{

2020-12-21 15:02:12 632

原创 vue-修饰符

一、事件修饰符1.1、stop 修饰符-阻止事件冒泡<div class="outer" @click="outer"> <div class="center" @click="center"> <div class="inner" @click.stop="inner"></div> </div></div>与原生js类似event.stopPropagation()1.2self.

2020-12-20 12:25:00 345 2

原创 vue 基本指令选项卡、调色板、微博发布框

一、选项卡<style> .box{ width: 600px; margin: 50px auto; border: 1px solid #333; } .head{ display: flex; } .head p{ width: 25%; text-align: center; line-height: 35px; margin: 0; padding: 0;

2020-12-18 21:26:45 361 1

原创 vue-v-bind动态属性和v-model双向绑定

一：v-bind:属性的作用是将w3c属性变为动态属性，让属性具有动态能力1、image 的src属性案例简单轮播图<img :src="'images/'+url+'.jpg'" alt="">上下代码效果相同<img v-bind:src="'images/'+url+'.jpg'" alt=""> <div id="app"> <h1>{{url}}</h1> <i..

2020-12-18 17:29:29 464 1

原创 canvas-flappy bird

一、利用中介者模式进行业务搭建Game是游戏中介者类，它的作用就是中介者的作用 Bird小鸟类，作用是对小鸟的业务进行封装 Land大地类，封装地面的样式 Background背景类，作用是封装背景图 PiPe管子类，作用是随机出现管子二、Game类(function () { window.Game = function () { //获取画布设置上下文 this.canvas = document.querySelector("canvas")

2020-12-15 21:34:02 117

原创 canvas-旋转变形

canvas可以变形，单变形的不是元素，二十ctx,ctx是整个画布的渲染区域，整个画布在变形。所以需要在画布变形前，进行保存和恢复save()保存画布的所有状态restore()恢复画布的状态save 和 restore 方法是用来保存和恢复 canvas 状态的，都没有参数。Canvas 的状态就是当前画面应用的所有样式和变形的一个快照。可能保存的状态有：当前应用的变形（即移动，旋转和缩放，见下）以及下面这些属性：strokeStyle, fillStyle, globalAlpha

2020-12-14 22:09:13 456

原创 canvas-刮刮乐中大奖

canvas文档canvas的合成属性合成其实就是常见的蒙板状态，本质就是如何进行压盖，如何进行显示可以通过globalCompositeOperation来设置压盖顺序比如我们此时画了一个方和一个圆，第一次画的是方，第二次画的是圆，所以会出现圆压盖方的现象ctx.globalCompositeOperation = type; 默认-source-over source-in source-...

2020-12-14 21:09:13 131

原创 canvas -资源管理

在开发游戏的时候，有一些静态资源是需要请求回来的，否则如果直接开始，某些静态资源没有，会报错，或者空白，比如我们的游戏背景图，如果没有请求回来就直接开始，页面会有空白现象资源管理器就是当游戏需要资源全部加装完毕的时候，再开始游戏现在主要是图片的资源，所以我们要在canvas渲染过程中进行对图片的资源加载获取对象中属性的长度this.R = { "one": "images/17kongqiao.jpg", "two": "ima

2020-12-14 14:03:11 221 1

原创 canvas-图片的渲染

<canvas width="1000" height="600" id="mycanvs"></canvas> <script> var canvas = document.querySelector("canvas"); var ctx = canvas.getContext("2d"); //创建图片 var image = new Image(); //设置图片地址...

2020-12-14 10:43:59 2893

原创 canvas-绘制功能

中文文档1、绘制矩形<script> //获取dom var canvas = document.getElementById("mycanvas"); //获取上下文 var ctx = canvas.getContext("2d"); //设置颜色 ctx.fillStyle = "blue"; //填充矩形 ctx.fillRect(100,100,10

2020-12-13 20:27:17 396

原创 canvas-小球回弹连线

2020-12-13 18:44:10 177

原创 canvas - 炫彩小球

2020-12-13 12:13:50 209

原创 js-随机颜色

function getRandomColor(){ var colorStr = "0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f"; var colorArr = colorStr.split(","); var color = "#"; for(var i = 0;i<6;i++){ var random = parseInt(Math.rando...

2020-12-13 12:11:04 88

原创 canvas-基本使用和动画原理

1、canvas 绘图1、canvas简介：web上的动画都是Flash。比如动画广告、游戏等等，基本上都是Flash实现的。Flash是有缺点的，比如需要安装Adobe Flash Player，漏洞多，重量比较大。卡顿和不流畅等等。HTML5提出了一个新的canvas标签，彻底颠覆了Flas 的主导地位。无论是广告、游戏都可以使用canvas实现了，Canvas是一个轻量级的画布，我们使用Canvas进行JavaScript的编程，不需要增加额外的插件，性能也很好，不卡顿，在手机中也很流畅2、c

2020-12-12 13:20:46 1798

原创 VUE基本指令v-html、v-text、v-cloak、v-once、v-pro、v-on

1、v-html、v-text、{{}}上面三种都是渲染文本的方法，使用场景的区别v-text和{{}}渲染结果类似，都是以文本类型进行渲染区别：1、{{}}在渲染结果之前，会有编译之前的文本显示，v-text没有这种现象2、{{}}更加灵活，中间是可以添加内容的，v-text只能渲染data中的数据，中间不允许插入内容 <h1 v-text = "a">数值不显示</h1> <h1 >数值是{{a}}---</h1>

2020-12-11 22:54:20 528

原创 VUE基本指令v-if v-show v-for

VUE指令

2020-12-11 16:10:26 998 1

原创 js-数组冒泡排序

var arr = [1,0,5,6,3,9,22,49,20,11,78,9]; // 创建一个新数组 for(var i = 0; i <= arr.length-1; i++){ // 外层循环控制比较几轮 for(var j = 0; j <= arr.length-i-1; j++){ // 内层循环控制每轮比较几个元素 if(arr[j] > arr[j+1]){ .

2020-12-10 23:29:47 482

原创 js-俄罗斯方块-面向对象-中介模式-完整版

1.设置Game为中介者类2.方块的状态俄罗斯方块中，下落的方块形态一共有7种，每一种又有不同的状态（方向）S型、Z型、J型、L型、O型、T型、I型这些形态都用一个4*4的矩阵表示3 方块的表示使用二维数组去表示俄罗斯方比如上图的T我们使用二维数组[[0,0,0,0],[1,1,1,0],[1,1,0,0],[0,0,0,0],]块的方块状态将所有的俄罗斯方块的类型和状态都放到一个JSON中，JSON是一个三维数组4 渲染方块5 地图类

2020-12-09 17:34:47 417

原创 js 贪吃蛇-设计模式-中介模式

1、本游戏（贪吃蛇）不是像之前一样都写到一个HTML文件中，而是进行了类的拆分，单独用js表示每个类，中介类是Game类，首先引入这个类<script src="js/Game.js"></script>2、页面的初始化，初始化布局不是直接写html标签，而是通过game进行的初始化节点上树<style> *{ margin: 0; padding: 0; } table{ border-collapse: collapse; }

2020-12-07 22:50:16 326

原创 js-面向对象-设计模式-中介模式

中介模式：所有的元素包括类都是由统一的这个类（中介类）进行控制、生成、维护和改变状态。例：考试成绩的得分和评级//测试类，承接成绩和状态，返回已有的消息 function Test(name) { this.name = name; this.score = new Score(this.name); this.state = new State(this.score.result); } Test.prototype.ann

2020-12-07 15:41:09 52

原创 js-面向对象-设计模式-抽象工厂模式

抽象工厂：提供一个注册方法，然后实例这个类工厂维护一个类的清单，用一个对象来维护所有的类的内容，注册的时候可以提供预审查功能，比如我们要求所有的注册类都必须要有update和render方法，否则不允许注册 function Animale(name,color) { this.name = name; this.color = color; return this; } Animale.prototype.update = f

2020-12-07 11:41:40 109

原创 js-面向对象-设计模式-工厂模式

工厂函数能够创建对象，并且函数是（）执行不是new执行。简单工厂模式 function createStudents(name,age,sex) { return { name : name, age : age, sex : sex, study : function () { console.log("语数英理化生") }

2020-12-07 10:04:30 62

原创 js-面向对象-设计模式-外观模式

外观模式：就是为子系统中的一组接口提供一个公共接口，定义一个高层的接口外观模式下，可以通过请求外观接口，达到请求访问子接口的目的，也可以选择跳过外观接口，访问子系统<script> function start(){ console.log("开始了") } function doing(){ console.log("进行中") } function end

2020-12-06 21:16:51 86

原创 js-面向对象-设计模式-命令模式

命令模式的本质就是对命令进行封装，将发出命令的责任和执行命令的责任区分开。每一个命令都是一个操作，请求的一方发出请求操作，要求执行一个命令，接受的一方，收到请求，执行相应的操作<script> var btn = document.getElementById("btn"); //执行的事件对象 var add = { execute : function(){ console.log("增加了") }

2020-12-06 20:46:21 77

原创 js-面向对象-设计模式-装饰模式

装饰模式的哲学：不改变原来的类且不适用继承，把一个类的方法增强1、装饰一个属性 function Student(){ } Student.prototype.study = function(){ console.log("语文"); console.log("数学"); console.log("英语"); console.log("理化生"); } //装饰类 function Zh

2020-12-06 20:11:17 75

原创 js-面向对象-设计模式-组合模式

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> </body&g.

2020-12-06 10:08:40 165

原创 js-面向对象-图片loading-设计模式-代理模式

1、传统模式下渲染图片网络卡，会一点一点渲染出结果 function Myimgge(src) { this.oImg = document.createElement("img"); document.body.appendChild(this.oImg); this.src = src; this.getSrc(); } Myimgge.prototype.getSrc = function () {

2020-12-05 20:46:36 112

原创 js-面向对象-设计模式-缓存代理

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> Factorial .

2020-12-05 18:59:07 73

原创 js-面向对象-设计模式-代理模式

1、传统非代理模式实例：送花 function Flower(name){ this.name= name; } var xiaoming = (function(){ var flower = new Flower("玫瑰花"); return { name : "小明", sendFlower : function(target){ target

2020-12-05 12:32:38 70

原创 js-面向对象-设计模式-单例模式

1、利用IIFE只执行一次的机制实现var Person = (function(){ var instance = null; return function(name,age){ this.name = name; this.age = age; if(instance){ return instance } ret

2020-12-04 23:34:15 158

原创 js面向对象-设计模式-策略模式-表单校验

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> </body&g.

2020-12-04 17:57:28 234

vue 封装grid 布局-表单.zip

vue与element-ui和iview-ui结合grid布局封装万能的表单grid布局，含i18n和国际化

2021-01-21

打气球小游戏-面向对象.zip

通过切换背景图位置显示不同气球气球宽高 118* 168 位置间距X:140 Y: 176 坐标的确定:横坐标0 1 2 3 纵坐标 0 1 2（4*3的精灵图），横坐标通过下标%4 得出纵坐标通过 parseInt(下标/4)得出初始化设置：初始化 x,y→ x,y轴 x轴clientWidth取随机 y轴clientHeight div创建加类上树设置初始的left top 值设置气球背景图位置变换不同的气球初始 type 随机的 0-11 气球向上运动气球进行数组管理气球的速度随

2020-12-18

canvas游戏FlappyBird

利用中介者模式进行业务搭建 Game是游戏中介者类，它的作用就是中介者的作用 Bird小鸟类，作用是对小鸟的业务进行封装 Land大地类，封装地面的样式 Background背景类，作用是封装背景图 PiPe管子类，作用是随机出现管子

2020-12-17

canvas游戏FlappyBi

利用中介者模式进行业务，Game是游戏中介者类，它的作用就是中介者的作用 Bird小鸟类，作用是对小鸟的业务进行封装 Land大地类，封装地面的样式 Background背景类，作用是封装背景图 PiPe管子类，作用是随机出现管子

2020-12-10

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人