- 博客(64)
- 收藏
- 关注
RSS订阅转载 Vue数据响应式
原文链接：https://www.jianshu.com/p/4394009f53b9Vue是怎么做到在我们更新了data之后就更新视图的呢?在我们new Vue 之后,生成的实例就是data的代理,data一发生改变,就会被setter知道这个时候就帮我们去更新视图。什么是getter&setter？let 我 = { 姓: "孙", 名: "笑川", get 姓名(...
2019-12-22 15:24:34
169
1
转载 JQuery的设计思想
原文链接：https://jinchao1992.github.io/2019/11/jquery-的设计思想/jQuery 是全世界使用最广泛的 JavaScript 库。虽然前端现在是「三大框架」的天下，但是不可否认，jQuery 曾经支撑了前端很多年，它使用之久，运用之广是其他框架无法企及的。所以，时至今日我们还是有必要学习一下 JQuery的一些用法， 以及在这些用法中包含的一些思想。...
2019-12-03 12:10:53
250
转载 Axios作弊表
原文链接：https://juejin.im/post/5a9cddb46fb9a028bc2d3c2fGET 请求// Make a request for a user with a given IDaxios.get('/user?ID=12345') .then(function (response) { console.log(response); }) .ca...
2019-11-29 15:51:45
195
原创 JS函数的执行时机
1. 为什么如下代码会打印 6 个 6let i = 0for(i = 0; i < 6; i++){ setTimeout(()=>{ console.log(i) },0)}当setTimeout()的毫秒数设置为0的时候，是要先执行完函数调用栈中的代码，然后立即调用定时器。因为定时器都被放在了一个队列中，等待上下文的可执行代码运行完毕后，才开始运行定时...
2019-11-07 19:57:23
261
原创 JS对象基本用法
1：声明对象的两种语法第一种：let obj = {name:‘jack’,age:18}第二种：let obj2 = new Object({name:‘jack’,age:18})2：如何删除对象的属性delete obj.xxx 或 delete obj[‘xxx’] 即可删除 obj 的 xxx 属性需要注意的是：“属性值为undefined"和"不含属性名”不含属性名：‘x...
2019-11-07 19:36:08
115
原创 javascript的诞生
JavaSciript 的产生与浏览器息息相关。想要说明 JavaScript 的历史，就要讲一下浏览器相关事件。1994年10月，NCSA的一个主要程序员Marc Andreessen联合风险投资家Jim Clark，成立了Mosaic通信公司（Mosaic Communications），不久后改名为Netscape。这家公司的方向，就是在Mosaic的基础上，开发面向普通用户的新一代的...
2019-09-28 11:45:02
198
原创 JS的基本语法
1、什么是表达式和语句表达式是可以被求值的代码,而语句是一段可执行代码。2、标识符的规则标识符可以由大写字母、小写字母、下划线（_）和数字0~9组成，但必须是以大写字母、小写字母或下划线 _ 开头3、if else语句语法：if (条件) { 条件为 true 时执行的代码块} else { 条件为 false 时执行的代码块}例子：if(a=1){ co...
2019-09-28 11:38:47
104
原创 浅析 URL
回顾了一下URL，写一篇博客记录一下，其中内容包括以下几点：URL 包含哪几部分，每部分分别有什么作用DNS 的作用是什么，nslookup 命令怎么用IP 的作用是什么，ping 命令怎么用域名是什么，分别哪几类域名1.URL 包含哪几部分以 https://www.baidu.com/s?wd=hello 为例子：其中URL包括1、传输协议：http，https2、域...
2019-09-03 12:04:46
263
原创 HTML常用标签（a/img/table）
简单回顾：a标签target属性的值_blank：新开一个页面打开<a>指向的页面_self：在自身窗口打开<a>指向的页面_top：在最顶级的窗口打开<a>指向的页面_parent：在父元素的窗口打开<a>指向的页面比较：_self _top _parent这三个值，要在嵌套关系下理解例子：在index1.html文件中，使用&...
2019-08-22 10:46:48
374
原创 报错：[Vue warn]: Failed to resolve filter: formatDate
使用Vue的时候突然报错这个，[Vue warn]: Failed to resolve filter: formatDate后面再网上查了才知道这是因为顺序问题：过滤器应该先执行，写在上面，再绑定vue实例错误的代码：调整后的代码：...
2019-06-24 20:21:31
15594
1
原创 VUE进阶篇Part11（vue-route和vuex前端状态管理）---下
此章节涉及到的内容：1、vuex的store用法2、vuex的相关操作和核心用法什么是 vuex？vuex 是一个状态管理模式，可以用来共享数据。以淘宝为例，如果在首页登录了自己的账户，当点击首页的链接跳转到其他页面时，仍然会是登录状态。这就是vuex，而实现这些的是因为用到了vuex中的store（仓库），这个 store 会让各个组件获取到你当前的状态，根据状态去判断渲染出什么。...
2019-06-13 00:08:35
207
原创 VUE进阶篇Part11（vue-route和前端状态管理）---中
此章节内容包括：1、Axios中的get请求2、Axios中的post请求3、vuex的store用法4、vuex的相关操作和核心用法1、Axios的get请求ajax的作用是与服务端进行数据交互，并且从服务端拿到所需要的数据，说白了就是两句话：发送请求，拦截响应。这里的 axios 的作用和 ajax 的作用基本上是一样的，用法上可能会有点区别。官方一点的说法是：axios 是...
2019-06-12 22:01:54
153
原创 VUE进阶篇Part11（vue-route和前端状态管理）---上
前端路由的基本用法此章节一定要先看前面写的Part10（vue-cli搭建脚手架）或者用过vue-cli的再看，不然可能会的有点蒙什么是路由？----通俗的来讲，其实就是网址。比如 http://www.baidu.com/111 ，这个后缀 /111 的网址无论能否显示出来都是一个网址，这就是一个路由，访问不同的路由，就会加载不同的组件。用一个例子去理解用法：需求：使用npm run...
2019-06-11 22:04:41
195
2
原创 VUE进阶篇Part10（使用vue-cli脚手架一键搭建工 程）
按照这个来配置就好了，这里相当于是帮你把webpack需要的繁琐的配置给你都弄好了，然后你直接从那里全部下下来就可以记得先下好nodejs，安装的代码记得全都c v，不要自己敲安装完nodejs之后再安装淘宝npm镜像，安装完了之后后面的安装速度会快一点npm install -g cnpm --registry=https://registry.npm.taobao.org然后按照下面...
2019-06-11 20:39:15
3304
原创 VUE进阶篇Part9（render函数）
这里介绍一下render函数。作用：使用render函数就不需要在template中一点点的写html了，可以通过函数去构建，实际上render函数就是用来构建一个组件的这里分为以下几点去讲解，每个都有一个小例子：1、render函数的初步了解2、render函数的第一个参数3、render函数的第二个参数4、render函数的第三个参数5、this.$slots在render函数中...
2019-06-11 19:41:03
364
原创 VUE基础篇Part8（自定义指令）
自定义指令用法：和组件类似，分为全局注册和局部注册，区别就是把component换成了directive钩子函数指令定义函数提供了几个钩子函数（可选）：bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document中）。update: 被绑定元素...
2019-06-08 12:39:50
154
原创 VUE基础篇Part7（核心功能组件）——下
这里的下半部分包括：1、组件中使用v-model2、插槽的简单用法3、访问slot4、动态组件的使用组件相关的上半部分博客可以点击查看：1、组件中使用v-model需求：通过子组件的加号按钮来给父组件传递数据直接看例子吧<btn-comp v-model="total"><btn-comp>data:{ total:0},components:{...
2019-06-08 02:35:22
125
原创 VUE基础篇Part7（核心功能组件）——上
组件原因：使用组件可以提升代码的复用性，非常的方便，节省了很多时间成本。由于组件设计的知识点较多，所以就分为两个部分写，这里先写上半部分。主要包括以下几点：1、组件的使用方法2、组件使用时的一些奇技淫巧3、父子组件传递数据4、单向数据流5、数据验证6、组件通信1、组件的使用方法组件的使用方法分为两点：全局注册和局部注册1.1、全局注册用法：Vue.component(‘t...
2019-06-08 02:06:50
177
原创 报错：Invalid shorthand property initializer
在 vue 组件中使用子组件接受父组件的数据时报错 Invalid shorthand property initializerdata:function(){ return { //props 的值可以通过this.xxx直接来获取，这里是 : 不是 = count = this.msg }}后发现这里的返回值中的 count = this.msg不能写等号 " = " ，要...
2019-06-04 15:05:17
3114
原创 VUE基础篇Part6（表单与v-model，界面数据的快递员）
v-model作用：可以实现数据的双向绑定，没了。其实v-model是一个语法糖，等同于下面的代码<input v-bind:value="message" v-on:input="message = $event.target.value" />一、基本用法：与 v-bind 的用法差不多，直接在需要绑定的元素上加就好了<input type="text" v-m...
2019-06-03 23:17:34
209
原创 VUE基础篇Part5（内置指令）
内置指令作用： VUE中有很多内置的指令，使用这些指令能会让开发过程中变得更加方便，所以也是需要掌握的一、内置基本指令1、v-cloak作用：是解决初始化慢导致页面闪动的最佳方式，与 display:none 一起结合使用<style>[v-cloak]{ display: none;}</style><p v-cloak>{{ cloak...
2019-05-31 23:36:30
419
原创 VUE基础篇Part4（v-bind动态绑定class，style）
1、了解 v-bind 指令概念：DOM元素经常会动态的绑定一些 class 属性和 style 样式，v-bind 可以动态的绑定元素的属性，并且更改属性，所以会经常用到例子：<div id="app"> <a v-bind:href="url">点我去百度</a> <img v-bind:src="imgUrl" alt="">...
2019-05-30 17:20:04
174
原创 VUE基础篇Part3（计算属性）
1、什么是计算属性？因为VUE中 {{ }} 内只能写一行表达式，如果操作比较复杂导致表达式过长的话就会显得可读性很差，而且不好看，这时候就使用到了计算属性来代替这些复杂的操作例子：<div id="app"> //需求：把数组111,222,333翻转成333,222,111 //如果是不用计算属性写法 {{ text.split(',').reverse().join(...
2019-05-27 22:23:08
112
原创 VUE基础篇Part1 Part2（生命周期钩子，指令，过滤器）
VUE基础篇，包括以下内容：1、生命周期、钩子2、指令3、过滤器1、生命周期、钩子生命周期：Vue实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。生命周期钩子：就是可以让你在页面生成的不同阶段执行动作的api，作用就是只要页面到了这个阶段就会触发这个对应钩子里的js钩子共分为...
2019-05-26 23:45:37
168
原创 初识 axios --- 引入MVC
与之前的功能一样，但是引入mvc把代码模块化了。html<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <script src="https://code....
2019-05-14 19:43:09
457
原创 初识 axios
概念：axios是一个ajax库，和 jquery 用法很像，用来实现 ajax 功能用法：在 BootCDN 上搜 axios，然后直接引入就可以<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>特点：1、axios的功能更多：axios.post()...
2019-05-14 15:19:52
109
原创 Error： Cannot find module ‘xxx’
有一个小技巧，当命令报错：Cannot find module ‘xxx’ 的时候，直接去下载这个 xxx就可以解决办法：npx install xxx
2019-05-13 15:37:59
2944
1
转载 Error: Can't resolve 'babel-loader' in ....
控制台运行 npx webpack 报错： Error: Can’t resolve ‘babel-loader’ in …解决方法，执行下列命令：npm install babel-loader --save有一个小技巧，当命令报错：Cannot find module ‘xxx’ 的时候，直接去下载这个 xxx就可以解决办法：npx install xxx...
2019-05-13 15:37:07
6857
1
原创 报错：Failed to load resource: the server responded with a status of 404 ()
js项目上传到 github 时，设置好 GitHub Pages 后打开：https://70kg111.github.io/HUAWEI-MUSIC/index.html提示报错： Failed to load resource: the server responded with a status of 404 ()路径错误： 导致 css文件，js文件并未加载出来原因：后面去问了...
2019-05-04 14:51:39
100261
6
原创 《华为音乐播放器项目》——4.歌词滚动完成+上传
效果预览连接：https://70kg111.github.io/HUAWEI-MUSIC/dist/index.html电脑打开的话请选择手机预览，不然分辨率有问题，会很难看。可以看里面的代码及注释，应该都写的比较清楚了。最后面一部分的歌词滚动代码是c v 过来的，说实话，我写不出来。小插曲：我在把这个项目上传到 github 时，直接在当前目录下打开：https://70kg111....
2019-05-04 14:41:32
890
原创 《华为音乐播放器项目》——3.JS实现部分功能，播放，上一首，下一首
JS实现部分播放功能：播放 / 暂停，上一首歌，下一首歌具体实现过程…直接上代码吧，代码中有注释，应该描述的比较清楚了，并且图片内都是上下衔接的。如果需要源码的话也点击我的github查看：https://github.com/70kg111/HUAWEI-MUSIC...
2019-04-29 16:16:01
1966
原创 《华为音乐播放器项目》——2.静态页面实现
emmmmm，静态页面好像没什么需要特别记录的东西。最多就是新知道的几个CSS知识点和SVG的用法，但还是把具体实现步骤记录一下吧。最终效果如下：一、对效果图先分区布局主要分为三个部分：head: 包括歌名、作者panel： 旋转的效果，当前歌词和下一句歌词footer: 一些功能按钮二、着手写整体布局的CSS：1、先确定主题颜色，直接微信截图看的，这时候 svg 的好处就...
2019-04-27 23:24:49
587
原创 《华为音乐播放器项目》——1.项目简介与环境搭建
华为音乐播放器项目项目简介：做出一个华为音乐播放器项目，涉及技术有JS、SVG、SCSS最终效果预览：点击查看目的：自己JS基础太差了，需要熟悉JS，CSS具体环境搭建过程一、首先肯定是创建一个 HUAWEI-MUSIC 文件夹然后电脑里面下载好 node ，没有的话直接去官网下一个就好了二、因为后面需要使用到一些工具包，所以需要先进行初始化git bash 进入到 HUAWEI-...
2019-04-26 21:48:46
919
原创 立即执行函数的使用
在引入MVC模块化概念后，会将JS代码分为多个JS文件保存但这个时候就需要去避免使用局部变量，所以需要使用到了立即执行函数将JS代码包起来。使用方法及步骤：1、不要用全局变量，要用局部变量2、ES 5里面，只有函数内部的是局部变量3、于是就声明一个 function xxx(){ … }，然后直接 xxx.call()执行这个函数4、但这样的话 xxx() 这个函数就变成了全局变量（全...
2019-04-18 16:34:58
328
原创 原生JS写出一个AJAX请求
使用JS写出一个AJAX请求let request = nre XMLHttpRequest();//配置requestrequest.open('GET','http://jack.com:8000/xxx'); //发送请求request.send(); request.onreadystatechange=function(){ if(request.readyState ...
2019-04-15 12:15:12
568
原创 call、apply、bind的用法分别是什么？
call：call 是函数的正常调用方式，并指定上下文 this。apply：apply 的作用和 call 一样，只是在调用的时候，传参数的方式不同。区别是 apply 接受的是数组参数，call 接受的是连续参数。如下代码：function add(x,y){ return x+y;}add.call(add, 1, 2); //3add.apply(add, [1, 2])...
2019-04-10 11:58:59
156
原创 移动端适配是怎么做的？
一、使用 meta viewport ，在head标签内部加入以下代码，改代码的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale...
2019-04-07 19:39:03
3482
原创 使用jquery时老是提示$未定义
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="./main.js"></script>如上图，要在引入JS文件之前引入JQ即可解决...
2019-04-07 15:16:23
6153
1
原创 实现一个简单的JQuery API
今天要模仿jQuery来实现两个API，他们的功能是：1 为选中的标签添加某个 class2 将选中的标签的value替换为某个text首先，顺着这个思路，写了以下代码：<style> .red { color: red; }</style><body><ul> <li>标签1</li...
2019-04-03 22:38:20
115
原创 给页面添加loading动画
html内的代码：<div class="loading"></div>css代码：.loading{ width: 300px; height: 300px; border:1px solid black; position: relative;}.loading::before,.loading::after{ c...
2019-03-22 22:48:30
1176
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人