痴心的萝卜-优快云博客

原创 git push出现ssh_dispatch_run_fatal错误

报错信息：ssh_dispatch_run_fatal: Connection to 52.74.223.119 port 22: Software caused connection abortfatal: Could not read from remote repository.Please make sure you have the correct access rightsa...

2020-04-04 22:40:04 3424 2

原创 2.3 Vue Vuex的使用及设计思想

Vuex是什么Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则,保证状态以一种可预测的方式发生变化默认的五种基本对象：state：存储状态（变量）getters：对数据获取之前的再次编译，可以理解为state的计算属性。mutations：修改状态，并且是同步的。在组件中使用$store.commit('',param...

2020-03-17 09:44:47 693

原创 2.2 Vue 组件化的深入

组件化组件是Vue.js最强大的功能之一可以扩展HTML元素,封装可重用代码。在较高层面上是自定义的元素,Vue.js的编译器为它添加特殊功能。在有些情况下也可以是原生HTML元素的形式,以is特性扩展。组件创建调用 Vue.extend(),创建名为myComp的组件, template定义模板的标签,模板的内容需写在该标签下。var myComp = Vue.extend({...

2020-03-10 14:35:33 356

原创 2.1 Vue 初始Vue-cli

了解Vue-clivue-cli是vue.js的脚手架,是一个基于Vue.js进行快速开发的完整系统,用于自动生成vue.js + webpack的项目模板,分为两种:vue init webpack-simple项目名vue init webpack 项目名vue-cli可以快速构建单页应用,但涉及内容很多,如 webpack、npm、nodejs等。Vue CLI 系统包含...

2020-03-09 22:56:10 220

原创 1.10 Vue 自定义指令

为什么使用自定义指令在vue2中,代码复用和抽象的主要形式是组件。然而,有的情况下,我们仍然需要对普通DOM元素进行底层操作,这时候就会用到自定义指令除了内置指令(v-for/v-if/v-else/v-else-if/v-model/v-bind/v-on/v-show/v-text…), Vue. js也允许注册自定义指令。自定义指令提供一种机制将数据的变化映射为DOM行为。可以用v...

2020-02-11 09:30:35 208

原创 1.9 Vue 生命周期

钩子函数钩子函数(Hook)在Vue中是一种事件劫持机制。它会比定义的事件更早进行执行处理,而且可以让你自己去配置。钩子描述beforeCreate实例创建前状态 el与data都为 undefinedcreated创建完毕状态 el为undefined,data里面已经有数据beforeMount挂载前状态 el:undefined data里面已...

2020-02-10 08:58:46 172

原创 1.8 Vue 过滤及动画

Vue过渡动画Vue在插入、更新或者移除DOM时，提供多种不同方式的应用过渡效果。Vue提供了内置的过渡封装组件，该组件用于包裹要实现过渡效果的组件。过渡时，会有6个类名在enter/leave的过渡中切换v-enter：定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。v- enter-active：定义进入过渡的结束状态。在元素被插入时生效，在 transition/...

2020-02-10 07:51:51 233

原创 1.7 Vue 渲染函数及JSX语法

1. 渲染函数渲染函数（render函数）通过 createElement 函数来创建虚拟DoM(VirtualDom)，这个虚拟DOM包含的信息会告诉Vue页面上需要渲染出什么元素。可以解决有些场景中用 template 实现起来代码冗长繁琐，而且有大量重复的问题。渲染函数解析render函数的返回值 VNode (即:虛拟节点)，也就是我们要渲染的节点。render函数的参数...

2020-02-08 13:56:37 358

原创 1.6 Vue 组件

1. 组件基础为什么要使用组件组件(Component)是对数据和方法的简单封装。Vue组件可以扩展HTML元素，提高重用性的，让代码可复用。组件的使用组件命名两种方式：1）使用kebab-case（短横线分隔命名）<my-component>2）使用PascalCase（首字母大写命名）<MyComponent>组件复用可以将组件进行任意次数的复用，每...

2020-02-08 00:12:14 178

原创搭建webpack +babel + vue项目以及编写单文件和自定义组件

搭建webpack +babel + vue项目的操作步骤1. 新建一个存放项目的文件夹我新建的文件名为demoVue2. 打开cmd，执行cd指令到该文件夹下3. 可执行npm init命令，自己配置一下，我这边直接执行npm init -y，使用默认配置可以看见文件夹下面生成了一个package.json3. 执行指令：cnpm i webpack webpack-cli vu...

2020-02-08 00:09:18 578

原创 VSCode webpack : 无法将“webpack”项识别为 cmdlet...解决方法

问题：在VSCode下运行webpack命令无效这个问题搞了我几个小时，找了很多博客，全局安装webpack和webpack-cli npm i webpack webpack-cli -g没有用；把node_global加入到环境变量没有用；在package.json中的script进行配置 “build”: “webpack” 或者是"dev":"webpack"没有用；我甚至重启了电脑...

2020-02-07 00:24:17 5328 3

原创 1.5 Vue 表单处理

1. 基础用法文本输入绑定使用v-model和{{}}实现对表单元素的双向数据绑定单行文本<input v-model="message" placeholder="输入">多行文本<textarea v-model="message" placeholder="输入"></textarea>2. 绑定值选择性框输入绑定值需要动态数据时...

2020-02-05 23:45:32 199

原创 1.4 Vue 条件渲染和列表渲染

1. 条件渲染v-if、v-else-if、v-else / v-showv-if、v-else-if、v-else与 JavaScript的条件语句if、else、else if类似，Vue.js的条件指令可以根据表达式的值，在DOM中渲染或销毁元素/组件；v-show 不管初始条件是什么，元素总是会被渲染，并且只是简单地基于CSS进行显示隐藏切换。注意：v-else-if要紧跟...

2020-02-05 18:52:44 259

原创 1.3 Vue 计算属性及watch

1. 计算属性的作用及使用计算属性(Computed)的作用当模板內的JS表达式复杂到让我们难以维护时，我们应当要引入计算属性。<div id="app"> {{text.split('').reverse().join('')}}</div>对于任何复杂逻辑，都应当使用计算属性。在一个计算属性里可以完成各种复杂的逻辑,包括运算、函数调用等,只要最终返...

2020-02-04 21:32:03 300

原创 1.2 Vue 模块语法，常用指令，事件绑定

1. 前置准备使用npm方式创建一个vue项目开发工具：Visual Studio Code手动创建package.json创建一个文件夹，用来放这个项目，在该文件夹中创建一个index.html文件有终端的跳过该步骤点击插件，搜索terminal，点击install安装右击index.html文件选中终端进入命令行终端输入命令npm init创建的步骤还有一种快捷的...

2020-02-04 21:31:28 469

原创 1.1 初始vue

什么是VueVue(读音类似view)是一个构建数据驱动的web界面的渐进式框架,它是用来快速构建前端应用的Vue简史2013年7月28日作者尤雨溪( Evan you)首次提交代码到 github名为 Element随后更改为 Seed. js2014年2月1日新版本0.6.0正式改名为 Vue.js2015年10月26日Vue1.0.0发布2016年10月1日Vue2...

2020-02-04 21:31:06 290

原创 jQuery概述

目录jQuery 基础jQuery 选择器jQuery 属性与样式jQuery 筛选（过滤、查找、串联）jQuery DOM操作jQuery 事件处理jQuery 动画jQuery 核心jQuery 插件什么是jQuery？jQuery是一个快速、小巧、功能丰富的JavaScript库（JavaScript类库）。它使HTML文档遍历和操作、事件处理、动画、Ajax等操作...

2020-02-02 17:01:30 161

原创 jQuery 动画

1 基本效果hide() 隐藏show() 显示toggle() 隐藏显示来回切换2 滑动效果3 淡入淡出效果4 自定义动画5 动画设置

2020-02-01 12:53:13 191

原创 jQuery 放大镜效果

效果图：代码<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>放大镜</title> <style> /** {*/ /* margin: 0px;*/ /* padding: 0...

2020-01-24 12:21:47 235

原创 jQuery事件处理

1. 事件绑定on(event,fn) 标准的绑定方式one(event,fn) 事件只能绑定一次on({}) 同时绑定多个事件把事件名作为方法2. 解除事件绑定off()** demo**<!doctype html><html lang="en"><head> <meta charset="UTF-8"> &l...

2020-01-23 14:28:04 226

原创 jQuery 选项卡

效果图代码<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>选项卡</title> <style> body { font: 16px "Microsoft YaHei",sans-ser...

2020-01-21 12:17:18 197

原创 jQuery DOM操作

1. 创建元素$("")2. 内部插入append()appendTo()prepend()prependTo()demo<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>jQuery DOM操作</title&...

2020-01-21 11:54:36 186

原创 jQuery 筛选（过滤、查找、串联）

1. 过滤操作first()last()eq()not()filter()slice()has()demo<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>jQuery筛选操作</title> <s...

2020-01-16 18:33:03 776

原创 jQuery 菜单收缩展开和手风琴菜单

效果图：代码：<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>菜单收缩展开</title> <style> body { font:16px "Micro...

2020-01-15 18:45:55 664 1

原创 jQuery 属性与样式

jQuery属性操作1. 属性attr(attrName [,attrValue]) 操作所有属性（自定义和内置的,中括号为可选内容）prop(attrName [,attrValue]) 操作HTML元素内置属性removeAttr(attrName) 删除属性removeProp(attrName) 并不能删除HTML元素上的属性demo <img style="wi...

2020-01-14 13:03:59 134

原创 jQuery选择器

先给个demo，下面给出的jQuery语句请逐行注释看效果<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>jQuery选择器 - 选择器</title> <style> ul { ...

2020-01-13 12:13:49 130

原创 jQuery 基础

获取jQuery官网下载npm 下载npm install jqueryCDN方式推荐国内的CDNhttps://www.bootcdn.cn/jquery/jQuery版本介绍jquery2.0以上的版本是不兼容IE8及以下浏览器的后缀为.js和.min.js有什么区别？.js是未压缩的开发版本，通常用来学习参考用的，可以研究jQuery的设计模式、思想等。而.min....

2020-01-13 08:48:21 246

原创 11_js json、js加载时间线、DOM、正则表达式

jsonjson是一种传输数据的格式（以对象为样板，本质上即使对象，但是用途有区别，对象就是本地用的，json是用来传输的）JSON.parse(); string—>jsonJSON.stringifg(); json—>string异步加载jsjs 加载的缺点：加载工具方法没必要阻塞文档，过多 js 加载会影响页面的效率，一旦网速不好，那么整个网站将等待 js 加载...

2019-12-17 17:05:43 209

原创 10_js 事件

如何绑定事件ele.onxxx = function (event) {}兼容性很好，但是一个元素只能绑定一个处理程序基本等同于写在HTML行间上obj.addEventListener(type, fn, false);IE9以下不兼容，可以为一个事件绑定多个处理程序obj.attachEvent(‘on’ + type, fn);IE独有，一个事件同样可以绑定多个处理程序a...

2019-12-04 16:59:30 168

原创基于jQuery的微量级表单验证插件

代码仅供学习，主要的地方都写上注释了，写的不好请大佬们指出，谢谢<!DOCTYPE html><html lang="en"><head> <title>微量级验证插件</title> <style type="text/css"> * { margin: 0; ...

2019-12-04 10:48:19 173

原创基于jQuery的图片懒加载插件

代码仅供学习，主要的地方都写上注释了，写的不好请大佬们指出，谢谢<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>图片懒加载</title></head><style type="text/css"...

2019-12-04 10:43:48 192

原创关于封装div拖动事件

<!doctype html><html lang="en"><head> <title>Document</title></head><body> <div style="width: 100px;height: 100px;background-color: red;positio...

2019-11-25 11:15:57 139

原创 9_js 日期对象Date()、js定时器、获取窗口属性、获取dom尺寸、脚本化css

日期对象Date()封装函数，打印当前是何年何月何日何时，几分几秒

2019-11-21 09:34:13 316

原创 8_js try...catch及错误类型、dom操作

try…catch try{ console.log('a'); console.log(b);// error console.log('c'); }catch(e) {// error error.message error.name --> 系统会封装到error对象中，然后传到这个变量e来供我们使用 console.lo...

2019-11-18 15:27:26 462

原创 7_js this、callee、caller、克隆、三目运算符、数组、类数组、判断类型、数组去重

函数预编译过程this–> window全局作用域里this–> windowcall/apply可以改变函数运行时this指向obj.func(); func()里面的this指向obj)

2019-11-12 12:04:24 224

原创 6_js继承模式、命名空间、对象枚举

传统形式一>原型链今过多的继承了没用的属性Grand.prototype.lastName = "Yin";function Grand () {}var grand = new Grand();Father.prototype = grand;function Father () { this.name = 'haha';}var father = new Fat...

2019-10-29 10:29:38 141

转载 vue run build 错误 CssSyntaxError错误

原文链接：https://blog.youkuaiyun.com/weixin_44023519/article/details/97103637vue打包出现的错误，记录一下错误代码Error processing file: static/css/app.4ce01a6050060bff9b33c64750b6bd11.css(node:6544) UnhandledPromiseRejectio...

2019-10-28 08:40:55 2256

原创 canvas时钟

代码：《精通HTML5+CSS3+JavaScript网页设计》做个笔记<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title></head><body> <canvas id="canvas" ...

2019-10-22 17:35:25 168

原创 canvas 2d基础

绘制直线<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> canvas{ border: 1px solid red; } </...

2019-10-22 11:28:45 529

原创 5_js对象、包装类、原型、原型链、call/apply

构造函数内部原理在函数体最前面隐式的加上this = {}执行 thisxxx=xxx;隐式的返回this构造函数只要在函数前面加个new function Student (name, age, sex) { //第一步：隐式生成 var this = {}; //第二步：将this中赋值zhangsan、18、male this.name...

2019-10-19 11:49:48 271

空空如也

空空如也