2021年03月_G018_star sky♬

原创如何使用vue-router

在vue-cli手脚架创建vue项目vue create usingrouter等待项目生成。在src的components创建三个文件About.vue<template> <div> <h2>我是关于</h2> <p>我是关于的内容,哈哈哈哈</p> </div></template><script>export default {

2021-03-25 21:16:18 79

Promise.prototype.then()Promise 实例具有then方法，也就是说，then方法是定义在原型对象Promise.prototype上的。它的作用是为 Promise 实例添加状态改变时的回调函数。前面说过，then方法的第一个参数是resolved状态的回调函数，第二个参数是rejected状态的回调函数，它们都是可选的。then方法返回的是一个新的Promise实例（注意，不是原来那个Promise实例）。因此可以采用链式写法，即then方法后面再调用另一个then方法。

2021-03-25 21:14:49 1622

原创 vue-组件化思想

vue-组件化思想注册组件的基本基础：父组件与子组件

2021-03-25 21:14:02 76

原创微信小程序实现跳转的几种方式

1.使用导航组件，标签，页面链接来实现（可以发现点击时有背景）<view class="btn-area"> <navigator url="../my/my">跳转到新页面</navigator></view>参数如下:2.给页面布局加监听bindtap事件，然后在方法里面，通过wx.navigatorTo来实现跳转（保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面）在my.wxml中加监听bindt

2021-03-25 21:12:38 534

原创 JS数组遍历的6种方法

1、for 遍历数组1.1 for 的普通遍历var name = ['Peter','Stark','Jack'];// for 循环for(var i = 0; i < name.length; i++) { console.log(name[i]);}1.2 for 优化版遍历var name = ['Peter','Stark','Jack'];// 先缓存 name.lengthfor(var i = 0, len = name.length; i < len;

2021-03-25 18:30:23 783 2

原创字面量创建对象和new创建对象有什么区别，new内部都实现了什么，手写一个new

字面量：字面量创建对象更简单，方便阅读不需要作用域解析，速度更快new内部：创建一个新对象使新对象的__proto__指向原函数的prototype改变this指向（指向新的obj）并执行该函数，执行结果保存起来作为result判断执行函数的结果是不是null或Undefined，如果是则返回之前的新对象，如果不是则返回result手写new//手写一个newfunction myNew(fn,...args){ //创建一个空对象 let obj={} //使空

2021-03-23 20:44:38 319

原创 vue子传父$emit

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc

2021-03-23 20:11:17 118

原创 Vue 中非父子组件间的传值

总线机制非父子之间传值，可以采用发布/订阅模式，这种模式在 Vue 中被称为总线机制，或者叫做Bus / 发布订阅模式 / 观察者模式<div id="root"> <child content="Dell"></child> <child content="Lee"></child></div>Vue.prototype.bus = new Vue() //挂载 bus 属性Vue.c

2021-03-23 19:59:34 217

原创 Vue中props传递参数（父传子）

父组件要正向地向子组件传递数据或参数，子组件收到后，根据传递过来的数据不同，渲染不同的页面内容，或者执行操作。这个正向传递数据的过程是通过props来实现的。子组件使用props来声明需要从父组件接受的数据。注意的：在js中对象和数组是引用类型，指向同一个内存空间，所以props是对象和数组时，在子组件内改变是会影响父组件的。父组件中<template> <div> <HelloWorld :message1="messageToHelloW

2021-03-23 17:01:21 3369

原创 vue-loader基础使用方法

vue-loader在main.js内加载在vue文件把:src改成v-lazy使用vue.use()Vue.use(VueLazyLoad,{error:'', //加载失败的图loading:'' //加载中的默认图})官方详细配置文件实现懒加载，使用v-lazy代替src属性<ul> <li v-for="img in list"> <img v-lazy="img.src" > </li></ul&gt.

2021-03-22 22:06:31 317

原创 Fetch是什么?与ajax有什么区别?

Fetch API 提供了一个 JavaScript 接口，用于访问和操纵 HTTP 管道的一些具体部分，例如请求和响应。它还提供了一个全局 fetch() 方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。这种功能以前是使用 XMLHttpRequest 实现的。Fetch 提供了一个更理想的替代方案，可以很容易地被其他技术使用，例如 Service Workers (en-US)。Fetch 还提供了专门的逻辑空间来定义其他与 HTTP 相关的概念，例如 CORS 和 HTTP 的扩展。

2021-03-22 20:12:06 744

原创 vue中的:key是什么，有什么用?

vue中的:key是什么，有什么用?因为不理解：key（v-bind:key），网上查了一些的资料，这篇写得非常不错，很简洁清楚。其实不只是vue，react中在执行列表渲染时也会要求给每个组件添加上key这个属性。要解释key的作用，不得不先介绍一下虚拟DOM的Diff算法了。我们知道，vue和react都实现了一套虚拟DOM，使我们可以不直接操作DOM元素，只操作数据便可以重新渲染页面。而隐藏在背后的原理便是其高效的Diff算法。vue和react的虚拟DOM的Diff算法大致相同，其核心是

2021-03-19 22:41:59 2234

原创 .v-if与v-show有什么区别？

共同点：v-if 和 v-show 都能实现元素的显示隐藏区别：v-show 只是简单的控制元素的 display 属性，而 v-if 才是条件渲染（条件为真，元素将会被渲染，条件为假，元素会被销毁）；v-show 有更高的首次渲染开销，而 v-if 的首次渲染开销要小的多；v-if 有更高的切换开销，v-show 切换开销小；v-if 有配套的 v-else-if 和 v-else，而 v-show 没有v-if 可以搭配 template 使用，而 v-show 不行

2021-03-19 22:23:18 72

原创 axios和ajax区别

axios是通过promise实现对ajax技术的一种封装，就像jQuery实现ajax封装一样。简单来说： ajax技术实现了网页的局部数据刷新，axios实现了对ajax的封装。axios是ajax ajax不止axios。axios代码示例如下:axios({ url: 'http://wwww.xxx.com/user', method: 'get', //method:'post' respon

2021-03-18 22:46:44 243

原创 computed与method的区别

computed调用是属性调用，不需要加括号methods是函数调用，需要加括号<div id="app"> <input type="text" v-model.number='a'> <input type="text" v-model.number='b'> <p v-cloak>结果:{{handle()}}</p> <p v-cloa

2021-03-18 22:26:58 116

原创 extend与component的区别

使用component的案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">

2021-03-17 23:59:31 268

原创 slot插槽

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><!--1.插槽的基本使用 <slot></slot>2.插槽的默认值 <slot>button</slot>3.如果有多个值, 同时放入到组件进行

2021-03-17 23:58:26 75

原创 vue条件渲染v-if，v-else简单应用

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Vue 测试实例</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script></head><body><div id="app">

2021-03-17 16:55:26 110

原创闭包是什么?

闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。怎么来理解这句话呢？请看下面的代码。function f1(){　　　　var n=999;　　　　nAdd=function(){n+=1}　　　　function f2(){　　　　　　alert(n);　　　　}　　　　return f2;　　}　　var result=f1();　　result(); // 999　　nAdd();　

2021-03-17 16:33:30 62

原创超时调用（setTimeout）和间歇调用（setInterval）有什么区别？

间歇调用间歇调用：每隔指定时间执行相应的代码，直到被取消或者页面卸载。var i=0;var intervalId=null;function A() { i++; if(i>=10){ clearInterval(intervalId) } console.log(i);}intervalId=setInterval(A,1000);上面的代码每隔1s输出一个i值，当i的值到达10时，利用clearInterval取消它的调用。超时调

2021-03-17 16:29:23 416

原创前端存储主要有哪些方式，有什么区别（sessionStorage,localStorage,cookie）

前端在处理页面数据的时候有时候会存放一些数据在浏览器当中，一般存储在浏览器当中的缓存数据安全性比较低。主要的存储方式如下图：1.localStorage1.存储时间是永久存储。2.大小在5M左右。3.ie低版本或者一些使用无痕浏览器都是不支持的4.存储的是字符串，内容过多时，会消耗内存空间，让页面变卡5.本地存储，不会和服务器有交互代码：// 使用方法存储数据localStorage.setItem("name", "Srtian")// 使用属性存储数据localStorage.

2021-03-17 16:17:47 2556 2

原创关于axios的应用

//最简单的aixos实例axios({ url:'http://123.207.32.32:8000/home/multidata', //不写method，默认传get 请求 method:'get'}).then(res=>{ console.log(res)})//另一种方式axios.get('http://123.207.32.32:8000/home/data') .then(res=>{ console.log(

2021-03-15 17:07:42 114

原创父访问子组件 -children-refs的基本使用

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc

2021-03-15 17:00:42 111

原创行内元素,块级元素,替换元素,非替换元素

常见的行内元素和块级元素都有哪些？行内元素 inline不能设置宽高，不能自动换行span、input、img、textarea、label、select块级元素block可以设置宽高，会自动换行p、h1/h2/h3/h4/h5、div、ul、li、tableinline-block可以设置宽高，会自动换行常见的替换元素和非替换元素？替换元素是指若标签的属性可以改变标签的显示方式就是替换元素，比如input的type属性不同会有不同的展现，img的src等img、input、if

2021-03-13 17:03:14 175

原创宏任务和微任务的区别

概念1： JS是单线程执行”JS是单线程的”指的是JS 引擎线程。在浏览器环境中，有JS 引擎线程和渲染线程，且两个线程互斥。Node环境中，只有JS 线程。概念2：宿主JS运行的环境。一般为浏览器或者Node。概念3：执行栈是一个存储函数调用的栈结构，遵循先进后出的原则。宏任务和微任务宏任务：script、setTimeOut、setInterval、setImmediate微任务:promise.then,process.nextTick、Object.observe、Mutati

2021-03-13 16:19:51 778

原创 MVVM与MVC的区别

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。微软的WPF带来了新的技术体验，如Silverlight、音频、视频、3D、动画……，这导致了软件UI层更加细节化、可定制化。同时，在技术层面，WPF也带来了诸如Binding、Depend

2021-03-13 15:49:16 283

原创什么是async函数?

ES7 提供了async函数，使得异步操作变得更加方便。async函数是什么？一句话，async函数就是 Generator 函数的语法糖。如下代码是一个 Generator 函数，依次读取两个文件。var fs = require('fs');var readFile = function (fileName) {return new Promise(function (resolve, reject) {fs.readFile(fileName, function(error, data) {

2021-03-12 21:43:53 506 2

原创 Vue.extend()与Vue.component

Vue.compont是Vue.extend()的语法糖<html lang="en"><head> <meta charset="UTF-8"> <title>05-父子组件的关系</title></head><body><div id="app"><div><h2>我是cpn2的标题</h2> <p>我是cpn2的内容,哈哈哈</

2021-03-12 21:34:52 104

原创组件的分离写法

<html lang="en"><head> <meta charset="UTF-8"> <title>07-组件的模板分离写法</title></head><body><div id="app"><div><h2>cpn1标题</h2> <p>我是cpn1的内容</p></div> <div>&lt

2021-03-12 21:34:36 120

原创前端函数节流与防抖动？

var num = 1var content = document.getElementById('content')function count() { content.innerHTML = num++}//防抖debounce//让输入完毕后过两秒再查询(延迟执行)function debounce(func, wait) { var timeout //定时器 return function () { if (timeout) clearTi

2021-03-10 23:14:10 64

原创深拷贝与浅拷贝的区别？

如何区分深拷贝与浅拷贝，简单点来说，就是假设B复制了A，当修改A时，看B是否会发生变化，如果B也跟着变了，说明这是浅拷贝；如果B没变，那就是深拷贝，自食其力。//Shallow chonelet a=[0,1,2,3,4], b=a;console.log(a===b);a[0]=1;console.log(a,b);//deep clonefunction deepClone(obj){ //isArray() 用于确定传递的值是否是一个 Array let

2021-03-10 23:07:27 67

原创 vue中的$on与$emit

们再项目中经常会遇到这么些情况，兄弟组件之间的传值。比如说一个组件内的按钮触发了兄弟组件的<audio>标签，从而播放背景音乐。另一个组件触发了暂停，从而暂停背景音乐。这个时候就会用到$on和$emit了。使用 $on(eventName) 监听事件使用 $emit(eventName) 触发事件$emit1、this.$emit（‘自定义事件名’,要传送的数据）；2、触发当前实例上的事件，要传递的数据会传给监听器；$on1、VM.$on('事件名',callback) ---

2021-03-10 22:20:00 1175

原创关于vue中的$ref的理解

访问子组件实例或子元素尽管存在 prop 和事件，有的时候你仍可能需要在 JavaScript 里直接访问一个子组件。为了达到这个目的，你可以通过 ref 这个 attribute 为子组件赋予一个 ID 引用。例如：<base-input ref="usernameInput"></base-input>现在在你已经定义了这个 ref 的组件里，你可以使用：this.$refs.usernameInput来访问这个 <base-input> 实例，以便不时

2021-03-10 21:53:20 386

原创 vue-router keep-alive中的include和exclude

keep-alive是Vue内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。它们有两个非常重要的属性在components有两个组件Profile和userinclude使用方法:1.include-字符串或正则表达式，只有匹配的组件会被缓存<keep-alive include='Profile,user'> <router-view></router-view></keep-alive>exclude使用方法：2.ex

2021-03-10 16:29:57 1580

原创如何在VUE中使用自定义指令？

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。什么是自定义指令：自定义一些指令对底层DOM进行操作。自定义指令的钩子函数一个指令定义对象可以提供如下几个钩子函数 (均为可选)：bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令

2021-03-09 22:36:22 159

原创 CSS如何清除浮动？

浮动是什么？W3school中给出的浮动定义为浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框脱离文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CS

2021-03-09 21:24:12 82

原创什么是VUE生命周期?

生命周期图示：VUE生命周期?Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。每一个组件或者实例都会经历一个完整的生命周期，总共分为三个阶段：初始化、运行中、销毁。实例、组件通过new Vue() 创建出来之后会初始化事件和生命周期，然后就会执行beforeCreate钩子函数，这个时候，数据还没有挂载呢，只是一个空壳，无法访问到数据和真实的do

2021-03-09 16:03:11 284

简易清晰_网上家电购物网站下载_购物网站毕业设计下载

空空如也