ybilss的博客

使用el-button 按钮点击之后, 没有恢复到之前的颜色, 还是保持点击之后的颜色

获取浏览器地址,把参数转换为对象

使用div 水平垂直居中方法一: 使用 flex 布局 <div class="box"> <div class="dv"> 111</div> </div> <style> *{ margin: 0; padding: 0; } .box{ width: 100vw; height: 100vh; b

浅拷贝: 创建一个新的对象,赋值给新的函数; 如果这个对象是基本数据类型,就是复制一份给了新的函数, 如果是引用类型,就是复制一份内存中的地址,改变一个值肯定会影响另一个对象深拷贝:先看看:浅拷贝方法一: object.assignobjetct.assign 是 ES6 中object 的一个方法,可以用来浅拷贝 // 方法一 object.assign // Object.assign(target, ...source) target:目标, source:目标源.

GridSome: 一个免费,开源,基于vue.js 技术栈的静态网站生成器官网:https://gridsome.org/

Vuex 是一个专为 Vue.js 提供的状态管理模式，多个组件要共享状态，使用vuexvuex 有五种属性:分别是State , Getter , Mutation , Action , Module

Diff是一种算法,类似排序算法;当数据变化之后,如果直接操作DOM,浏览器会重新渲染页面,消耗性能比较大,使用Diff算法,它不直接操作DOM,而用js对象来描述真实DOM,比较js对象是否发生变化,找到变化的位置,最小化的更新变化的位置,提高了性能,它的执行过程是:在比较开始时首先对新老节点数组的开始和结尾节点设置标记索引，遍历比较时会出现四种情况:a.oldStartVnode/newStartVnode比较:旧节点和新节点从第一个开始进行比较b.oldEndV...

1.创建目录 如: mode2. cnpm init -y3. cnpm install parcel-bundler -D4.

1.虚拟DOM : 就是普通的 JS对象来描述DOM对象, 虚拟DOM 比真实DOM 开销要小很多2.为什么使用虚拟DOM: 当数据变化之后,才操作DOM,数据没有发生变化使用上次

数据响应式: 数据模型是JavaScript 的普通对象,当我们修改数据时,视图会进行更新,避免了操作DOM,提高了开发效率双向绑定:数据改变,视图也会跟着变化;视图改变,随之数据也会改变数据驱动:开发过程中需要关注数据本身,不需要关心数据是怎么渲染到视图的直接看案例 vue2.0 双向绑定原理<!-- body --> <div id="app">app</div> <script> let data={ msg

1.创建项目 vue create vueRouterMode2.选择自己的配置3.安装vue-router :cnpm install vue-router --dev4.在 src 目录新建router文件夹,再新建 index.js5.在index.js 中编辑:import Vue from "vue"import VueRouter from "vue-router"Vue.use(VueRouter)const Index = ()=> import("...

1.Vue生命周期有8个分别是:beforeCreate : 创建vuecreated: 实例化vuebeforeMount: 元素挂载dom树之前mounted:元素挂载dom树之后beforeUpdate: 修改数据之前updated:修改数据之后beforeDestroy:销毁之前destroyed:销毁之后2.常用指令,累计13个v-if v-else-if v-else : 这三个很好记,if else,控制元素在DOM树显示不显示v-s...

从性能方面看:变量局部: 使用局部变量 比 全局变量 性能好一点缓存数据: 放回的数据,使用多次,用变量保存,使用变量减少访问层级: 访问对象属性,直接对象.属性, 如:Pro.age减少判断层级: 减少if 语句嵌套if ,使用 return 返回上面的比较好理解,就没有写案例,接下来看防抖防抖: 对于高频操作,我们只希望识别一次点击,可以人为是第一次或者是最后一次案例:<div id="app">点我点我</div> <script..

1.新建项目:webpack2.项目初始化:yarninit-y3.安装webpack依赖:yarnaddwebpackwebpack-cli--dev4.在根目录下,新建配置webpack文件:webpack.config.js5.在根目录下,新建src文件夹,在src目录下新建index.html,index.js,index.css6.先尝试一下打包:yarnwebpack,ok继续往下走7....

什么是闭包？一个可以访问到别的函数作用域中变量的函数优点：闭包可以让一个局部变量不会被回收，方便长期使用缺点：闭包使用过多会造成内存泄漏代码如下： function show() { let sum = 100; return function () { sum++; console.log(sum); } }

高阶函数：使代码更加简洁，使代码很灵活，我们调用函数时，只要关注实现的目标高阶函数：有哪些 forEach filter map every some我们一个一个来说1.foreach 它是一个循环数组；let arr = [1, 2, 3, 4]arr.forEach(item => { console.log(item);})// 这打印结果 1 2 3 4...

1.什么是函数：一般来说，一个函数是可以通过外部代码调用的一个“子程序”（或在递归的情况下由内部函数调用）,注意引用mdn2.为什么要学函数式编程，2.1：函数式编程是随着React的流行受到越来越多的关注2.2：Vue3也开始使用函数式编程简单来说： 函数式编程使用越来越广泛，使用者来越来越多3.函数式编程： 把现实世界中事物和事物之间的联系抽象到程序世界，对运算过程进行抽象从思维来说： 面向对象编程是对事物的抽象 而函数式编程是对象运算过程的抽象...

在vue中,如登录界面,最外的div 高度给100%,底部还是有留白,今天特意去查了一下,解决方案: 宽度给了100vw,高度给了100vh,就解决了这里说到适配问题,只谈100%和100vh的区别:vh就是当前屏幕可见高度的1%,也就是说100vh == 100%,如果当元素没有内容的时候，设置height:100%该元素不会被撑开，但是设置height:100vh，该元素会被撑开屏幕高度一致。...

1.配置通用的样式:normalize,1.1 github网站:https://github.com/search?q=normalize1.2 下载或者 复制这里面的代码1.3 在 项目src --> assets 目录中,新建css文件夹,新建normalize.css和base.css1.4 normalize.css是刚才复制github中的代码,base.css 则是自己配置全局样式的文件2.在App.vue, style中引入3. 在Login 中使用:4. 在...

1.vue 肯定要适配移动端,移动端的手机大小不一,这里用到postcss-pxtorem, 先添加cnpm install postcss-pxtorem -D 或者npm install postcss-pxtorem -D2.在项目根目录下添加postcss.config.js 文件,配置module.exports={plugins:{'autoprefixer':{overrideBrowserslist:[...

1.现在vue 基本都会配置别名, 在项目目录下, 新建 vue.config.js 文件,2.如,路由配置,轻松搞定

1.安装 node.js,官网:https://nodejs.org/zh-cn/下载, 与自己电脑匹配的版本,然后一直下一步就ok,输入 node -v2.npm包管理器是在node.js中,直接输入npm -v3. npm 是国外的镜像,推荐 使用cnpm , 国内淘宝镜像,它比npm 下载更快,npm install -g cnpm --registry=https://registry.npm.taobao.org4.需要全局安装 vue-cli 脚手架构建工具，输入命令 cn...

1.要实现页面跳转,使用路由;安装 cnpm install vue-router --save-dev2.新建路由文件 router,在router 文件中在新建 index.js (配置路由);同时新建 views 文件放一些界面,在views文件中新建home.vue 用来测试3.配置路由,在router 文件夹中 index , 先引入 vue 和 vue-router, 将路由 加vue 中,下图详情4.在main.js 中 导入 路由,5. 在App.vue 文件中,加入...

新建vue 项目 从0到1:1.安装 node.js,官网:https://nodejs.org/zh-cn/下载, 与自己电脑匹配的版本,然后一直下一步就ok,输入 node -v2.npm包管理器是在node.js中,直接输入npm -v3. npm 是国外的镜像,推荐 使用cnpm , 国内淘宝镜像,它比npm 下载更快,npm install -g cnpm --registry=https://registry.npm.taobao.org4.需要全局安装 vue-cli 脚...

在 商城中搜索1.Material Theme 皮肤插件2.prettier 一键格式化（对齐）3.Bracket Pair Colorizer 2 ，找到某一个区域内，或者范围内4.auto renametag ， 修改标签，和自动补齐标签5.css peek ,快速找到css 样式...

1.码云下载项目vue_shop git clonehttps://gitee.com/yuqi10/vue_shop.git2. 下载依赖 npm install3.运行项目 npm run serve 出现错误:4.解决错误 4.1 先安装 npm install yarn -g 4.2 再删除项目中public文件 4.3 yarn build 4.4 再次启动项目npm run serve 就ok...

例如一个网络请求，获取数据，大组件（父组件）将数据传递给小组件（子组件）分为两种：1.通过props 向子组件传递数据 （简称 父传子 props）2.通过事件向父组件发送消息 （简称 子传父 $emit）父传子组件：子传父组件案例：...

组件分全局组件和局部组件：注册组件分三步骤：1.创建组件构造器 （Vue.extend）2.注册组件()3.使用组件()全局组件：局部组件：下面看一下复杂一点的组件：简单地来说，组件中包含另外一个组件，简称父子组件这个是使用两个局部组件，重点来了...

这里只讲代码提交到码云,码云的注册登录和新建一个库不再详细介绍,1.查看当前的分支:git branch2.新建一个分支: git checkout -b 分支名称3.再次查看分支4.当我们已经确认在新分支上,可以将新分支提到码云分支上,建议码云分支和新建分支保持一致注意:4.1:如果码云有相同的分支名称就:git push,4.2:如果码云分支名称是新建的:git push -u origin 码云分支5.在项目新建一个文件夹名为:goos,文件夹下面创建一个 Cate.vue 文件,..

用vue ui 命令 引入插件elementui 样式不生效步骤一：执行如下命令，安装babel-plugin-componentnpm install babel-plugin-component --save步骤二：在vue项目的.babelrc文件中增加如下JSON"plugins": [ [ "component", { "libraryName": "element-ui", "style..

下面是个人总结思维导图链接 动动你的小手点击一下哦：http://naotu.baidu.com/file/90423eb4c9b366f9e3e10991b18434b3?token=e0b25eb366f5253dDate类型：提供了有关日期时间的信息，是从 1970年1月1日 0：00：00 开始下面常用的的方法：getTime() : 返回表示日期的毫秒数getFullYear(): 取得4位数的年份getMonth(): 返回...

下面是个人总结思维导图链接 动动你的小手点击一下哦：http://naotu.baidu.com/file/90423eb4c9b366f9e3e10991b18434b3?token=e0b25eb366f5253d引用类型：Object类型，创建object两种方式：1.使用newvar person = new Object()；person.name="张三"；2.对象字面量var person={ name="张三"；}Array类型:创建数组2种方式...

下面是个人总结思维导图链接 动动你的小手点击一下哦：http://naotu.baidu.com/file/90423eb4c9b366f9e3e10991b18434b3?token=e0b25eb366f5253d思维导图：javaScript 是一种专为网页交互而设计的脚本语言，有三部分组成：1.ECMAScript (javaScript 前面的称呼) 提供核心语言功能(指的是语法，类型，语句，对象等)2.文档对象模型（DOM）,提供访问和操作页面内容的方法和接口3.浏览器对.

CSS 指层叠样式表注解 ： /*注解*/选择器分为三种：1.id选择器2.class(类)选择器3.标签选择器插入样式表分为三种：1.外部样式表 如：<link rel="stylesheet" type="text/css" href="mystyle.css">2.内部样式表 <style> p {margin-left:20px;}</style>3.内联样式<p style="color:sienna;margin-left:..

HTML 是一种用于创建网页的标准标记语言。html 常用的标签和表单：html 推荐网站：https://www.runoob.com/html/html-tutorial.html下面是个人总结思维导图链接 动动你的小手点击一下哦：http://naotu.baidu.com/file/90423eb4c9b366f9e3e10991b18434b3?token=e0b25eb366f5253d了解一下：<!DOCTYPE html>声明为 HTML5 文档&l..

切记：先明确目标，再去行动！！！会时常更新：推荐网站：web前端学习图：https://objtube.github.io/front-end-roadmap/#/

vue 网络请求vue-resource：1.win+r 输入 cnpm install vue-resoutce2.在main.js 文件配置importVueResourcefrom'vue-resource';Vue.use(VueResource);3.引用：

实用干货:配置步骤:1. 先 win+R 输入 cmd 安装在vue目录下: 如cdD:\vue\vue01cnpm install vue-router --save 或者npm install vue-router --save2. 在 main.js 引入并 Vue.use(VueRouter) import VueRouter from 'vu...

vue简单安装:简单实用1.node.js不可少: node.js nodejs官网（https://nodejs.org/en/） win+r 输出cmd命令: node -v 查看node.js版本2.安装淘宝镜像 cmd命令: npm install -g cnpm --registry=https://registry.npm.taobao.or...