yaxi_yaxi_yaxi-优快云博客

原创 VUE class 用法

<div class="red" :class="[typeClass, center ? 'is-enter': '', 'is' + effect, 'four': four === true]" >  </div&...

2020-04-03 19:59:48 244

原创 vue watch的用法

vue watch的三种用法var app = new Vue({ data: { a: 1, b: 2, c: 3 }, watch: { // watch的第一种形式 a: function (val, oldVal) { // 在监听$route时，第一个参数表示to, 第二个参数表示from console.log() ...

2019-03-22 16:41:36 2747 3

原创 vue源码学习一

本篇主要为阅读源码做一些准备，相关代码参考了网上相关资料。本篇主要讲述数据的动态动态绑定与更新：1:数据的动态绑定与更新核心方法是Object.defineProperty(),下面是相关介绍。Object.definePropety(obj,property,descriptor) / * obj 需要操作的对象 * property 需要修改的属性 * d...

2019-02-27 18:34:16 271

原创递归组件的用法

先看效果图：1：先mock数据//list.jsvar list = { list: [{ title: '成人票', children: [{ title: '成人三馆联票' }, { title: '成人四馆联票', children: [{ ...

2019-02-26 15:37:37 1232

原创 slot插槽

代码模板如下： <div id="app"> <h1>插槽slot</h1> <h1>具名插槽</h1> <button-counter v-model="message"><p slot="header"&g

2019-02-26 11:25:46 114

原创 v-model的使用

组件中v-model的使用：v2.2以前的版本是这样应用的，<body> <div id="app"> <h1>组件中v-model的使用</h1> <h1>1,子组件中props要有value属性，2:子组件动态绑定value至props,3，子组件触发input事件后触发$emit&l..

2019-02-25 18:35:20 951

原创 vue祖孙组件之间的数据传递

**解决的问题：** 使用$attrs和$listeners实现祖孙组件之间的数据传递，也就是多重嵌套组件之间的数据传递。**注意：**本方法针对vue2.4版本及以上，使用$attrs和$listeners来实现的**解决方案：****首先创建父组件：** 父组件用于动态数据的绑定与事件的定义<template> <div>...

2019-02-25 18:08:04 13959 3

原创 git命令

git remote add //本地仓库关联远程仓库 name :定义一个远程仓库的名称 url：远程仓库的地址。eg： git remote add yx https://github.com/schacon/ticgitgit remote -v //显示所有远程仓库的信息git fetch [remote-name] //从远程拉取本地还没有的数据，但不会合并数...

2019-02-22 15:01:29 136

原创本地仓库如何与远程仓库交互

远程分支与本地分支的交互1：当执行完git clone克隆完某个远程仓库后，本地的仓库状态如下图：origin/master: 你克隆的时间点远程仓库master分支的指向。master:git自动为你创建master分支，并确定初始指向与远程仓库master分支是一样的。2：接着其他人向该远程仓库master分支推送了信息，于是远程仓库的指向变为了这样。3：你自己也对本地的mast...

2019-02-22 11:23:39 512

原创 webpack3构建简单的多页面应用

解决的问题1：多页面结构如何设置，2：公共样式如何配置，3：入口文件都需要导入哪些样式，4：如何自动配置入口文件而不需要手动书写。首先看下项目目录该项目有两个页面，分别位于index和login文件夹下，common.css为公共样式实现的主要功能：1：通过AutoWebPlugin提取公共代码2：通过AutoWebPlugin自动设置入口文件，再新添加文件也不用再写入口文件。...

2019-02-20 18:57:46 384

原创 webpack3构建简单的单页面应用

本文主要记载的是WebPlugin插件的用法先看目录结构下面为webpack.config.js的配置文件const path = require('path');const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin'); //压缩jsconst ExtractTextPlugin = require('...

2019-02-20 17:40:24 295

原创 promise简述

一：先看第一段代码：var p =new Promise(function(resolve,reject){ //说明传入的参数函数会立即执行。 console.log('create a promise'); resolve('success');})console.log('after new Promise')p.then(function(value){ ...

2019-02-12 11:29:38 332

转载 js对象遍历

首先创建一个可操作的对象：//首先在Object的prototype上添加属性，这样其他对象可以继承。Object.prototype.userProp = 'userProp';Object.prototype.getUserProp =function(){ return Object.prototype.userProp};var obj = { name: ...

2019-01-29 14:44:32 212

转载 js数组简述

一：Array.of()var a = Array.of(1,2);console.log(a) //a =[1,2]var b = Array.of(8.0)console.log(b) //b=[8] var c = Array(8.0)console.log(c) //c=[undefined......

2019-01-26 16:36:40 199

原创正则表达式简单记录

一：创建正则有两种方式:！：var pattern = /box/ig //第二个参数可省略!! ：var pattern = new RegExp('box','ig') //第二个参数可省略二：正则验证有两个方法：！: test() test()会根据匹配结果返回true或则falseeg：var...

2019-01-26 09:42:49 158

原创 vue 报错： [Vue warn]: Computed property "checkall" was assigned to but it has no setter.

报错如图：报错原因： computed:{ checkall:{ //购物车与checked数量一致时，全选为true get(){ return this.cartCheckedCount===this.items.length; } } }分析：该报错是和computed联系在一起的，我们知道computed动态...

2019-01-19 18:00:36 14441 1

原创简单的canvas实例

效果图：完整代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.

2019-01-17 11:28:19 3594

原创 canvas总结

canvas 绘图1：需要在div中做如下声明，注意宽高也要写于里面 <canvas id="drawingCanvas" width="500" height="300"></canvas>2:js中执行如下代码 var canvas = document.getElementById('drawingCanvas'); var context...

2019-01-16 11:24:13 236

原创 2048小游戏分析

这两天写了个2048小游戏先看效果图：现在分享一下它的逻辑：首先要关注的就是它的页面结构：容器中放置16个div用于，初始页背景的16个格子，注意class命名方式，这样命名可以用函数方便的进行布局,和其他功能操作。 <div class="container"> <div class="box--0-0"></d...

2019-01-12 11:42:48 727

原创简单抽奖系统的实现

先看效果图点击抽奖，将会顺时针旋转。停留概率，转动速率可以控制。我自己做的过程中遇到的小问题。i: 顺时针旋转。因为结构用的是li，顺时针旋转本质上是背景的变化，这里我定义了一个数组来处理顺时针旋转的问题。 var arr= [0,1,2,4,7,6,5,3]; //为了标记li使背景顺时针旋转，内容对应的是li的位置信息 document.getElem...

2019-01-10 11:54:25 1058 2

原创打开网页右下角广告栏慢慢出现，点击慢慢消失

上半年会坚持每周写几个用纯js实现的功能。篇一：功能：打开网页div慢慢从右下角出现，点x慢慢消失。效果图：js代码：window.onload=function(){ var tardiv = getElement('.content'); var addHeight=1; //每次循环增加的高度 tardiv.style.bottom='-20...

2019-01-08 18:58:53 650

原创 linux下安装node.js

说明：大部分的坑我应该踩完了吧。一：首先执行：wget https://npm.taobao.org/mirrors/node/v10.15.0/node-v10.15.0-linux-x64.tar.xz这一步就是将node.js下载到linux系统下1: 可能没有wget命令 yum -y install ****2：下载地址怎么来？看下图右键通过新窗口打开，网址就有了。...

2019-01-07 19:52:09 163

原创编程式路由

编程式路由就是通过js来跳转组件现在实现通过goods组件向购物组件的跳转，他们都挂载于app.vue上第一步： app.vue 添加挂载&lt;router-view&gt;&lt;/router-view&gt;第二步：实现goods组件的代码：&lt;template&gt; &lt;div&gt; &lt;h1&gt

2019-01-06 15:00:09 436 1

原创嵌套路由

嵌套路由使用场景：左侧为菜单，右侧为内容，当点击菜单时，切换内容组件而整个页面却不刷新.嵌套路由的知识点大致和动态路由一样，不同点如下：eg: good组件中嵌套title组件和content组件router/index.js中的配置。import goods from './../views/goods.vue';import title from './../components/...

2019-01-06 14:23:33 164

何为动态路由：动态路由就是带参数的路径，也就是不固定的路径eg: localhost:8080/user/123, 其中123就是参数动态路由用到的知识点1：&amp;amp;lt;router-view&amp;amp;gt;&amp;amp;lt;/router-view&amp;amp;gt; //作用：挂载组件2：&amp;amp;lt;router-link :to='{name:'名字',params:{

2019-01-05 22:51:04 1181

原创 vue父子组件间通信

父组件向子组件通信原理：父组件data中存在一属性，子组件通过props接收，父组件动态绑定该数据。子组件代码：&lt;template&gt;&lt;div class="child"&gt; &lt;button&gt;减一&lt;/button&gt; {{number}} &lt;button&

2019-01-05 20:48:09 154

转载 nodejs fs模块

本文转载自 https://www.cnblogs.com/starof/p/5038300.htmlnodejs模块——fs模块fs模块用于对系统文件及目录进行读写操作。一、同步和异步使用require('fs')载入fs模块，模块中所有方法都有同步和异步两种形式。异步方法中回调函数的第一个参数总是留给异常参数（exception），如果方法成功完成，该参数为null或und...

2019-01-03 15:36:22 4263

原创 css3 -preserve-3d案例

代码：html <div class="flipper"> <span class="flipper-object flipper-vertical"> <span class="panel front">The Front</span> <span class="panel

2018-12-27 10:21:39 1307

原创 jquery EasyUi的使用

一：首先需要导入一下文件：<link href="../jquery-plug/themes/default/easyui.css" rel="stylesheet" type="text/css" /><link href="../jquery-plug/themes/icon.css" rel="stylesheet" type="text/cs

2018-12-25 10:13:35 216

原创 css3 三角

如图这是带border的三角，代码如下.menu_two::after{content: ''; box-shadow: 1px 1px #ddd; height: 1rem; left: 1rem; top: -.5rem; -webkit-transform: rotate(225deg); -ms-transform: rotate(225deg); transform: r...

2018-12-18 16:46:43 114

原创 css3--media查询

今天使用media查询发现不起作用，代码如下： nav li a { text-decoration: none; font-size: 1.2em;}; @media only screen and (min-width:480px){ nav ul li{float: left}; }原因就是第一行的；造成的，把它去掉就好了。...

2018-12-17 07:53:53 116

原创 Vue-留言列表

一：该例使用到的知识点效果图：1. 注意子组件引用时名称的书写方式 eg:Vue.component(‘vInput’,{}), 这里子组件名称为vInput, 则引用时需要这样书写： <v-input :username="username" v-model="username" v-focus='jujiao' ref="names"></v-input&g...

2018-12-13 15:04:03 1481

原创 vue-可排序的列表组件

该组件的功能可排序，并且添加数据后，可以根据原数据的排序状态立即进行排序，实现的原理就是给元素绑定一个属性记录下排序后的状态

2018-12-13 13:55:42 3764 1

转载 iframe API用法

代码： parent.html<head> <script type="text/javascript"> function say(){ alert("parent.html"); } function callChild(){ myFrame.window.say...

2018-12-10 15:47:53 2064

原创正则表达式replace()小案例

**正则表达式中replace（）的一个案例String.method('news',function(){ var entity ={ quot: '"', lt: '<', gt:'>' }; return function(){ return this.replace(/&([^&...

2018-12-10 13:08:02 369

原创 HTML email

HTML邮件规则：必须使用table布局，必须使用内联样式，不要使用margin与padding，定位，等。案例：设计：这里你可以将图片分为3行，然后给有内容的部分，td设置vertical-align=top,即可快速的进行布局代码： <table cellpadding="0" cellspacing="0" border="0" align="center" sty...

2018-12-09 21:41:10 789

原创 js分页

方法一一：先看效果图二：主要功能：上一页，下一页，跳转，尾页，三：代码index.html:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="w

2018-12-04 16:01:35 1494

qq_35176916的博客