- 博客(32)
- 收藏
- 关注
RSS订阅原创 promise的基本使用
promise是：异步编程的解决方案，解决了以前的回调地狱，对你的异步操作进行封装有三种状态分别是：等待状态，完成状态，拒绝状态，从一种状态变为另一种状态，是不可逆的能解决回调地狱，是因为promise实现了链式调用每次调用then函数返回的都是新promise继续往下调用缺点：一旦执行promise没有办法取消，错误需要回调函数来捕获什么情况下会用到promise？一般情况下是有异步操作时，使用promise对这个异步操作进行封装树形变为线形，链式编程，平级结构清晰，嵌套结构复杂异步操作，
2020-05-29 09:07:38
133
原创 箭头函数的基本使用及特性
箭头函数：也是一种定义函数的方式，新潮的函数写法优点：适当的省略函数中的 function和return关键字缺点：代码可读性减弱，阅读时间花费多注：箭头函数需注意部分1，箭头函数不能用new2，箭头函数如果返回值是一个对象，一定要加()普通：const show = () => {}返回值为对象：const show = () => ({})3,箭头函数中的this指向的是上一层函数的主人箭头函数this问题：匿名函数中的this是window，而箭头函数中的thi
2020-05-27 10:43:41
270
原创 webpack打包工具
webpack是一个现代的JavaScript应用的静态模块打包工具前端模块化的一些方案：AMD、CMD、CommonJS、ES6将我们写的代码转成浏览器所支持的grunt/gulp和webpack的区别grunt/gulp更加强调的是前端流程的自动化，模块化不是它的核心。webpack更加强调模块化开发管理要安装webpack首先需要安装node.jsnode -v 查看node的版本npm -v 查看npm的版本全局安装npm install webpack -gdist文
2020-05-26 17:58:52
132
原创 具名插槽slot的使用
当子组件的功能复杂时，子组件的插槽可能并非是一个。这个时候，就需要给插槽起一个名字只要给slot元素一个name属性即可<slot name = 'myslot‘ > < /slot >然后在组件里面使用这个name<body> <div id="opp"> <cpn> <slot><h3 slot='left'>左边</h3></slo
2020-05-23 14:56:39
237
原创 插槽slot的基本使用
插槽的作用：让我们封装的组件更加具有扩展性。让使用者可以决定组件内部的一些内容到底展示什么。在子组件中，使用特殊的元素就可以为子组件开启一个插槽。该插槽插入什么内容取决于父组件如何使用。插槽的基本使用插槽的默认值默认值如果有多个值，同时放到组件进行替换时，一起作为替换元素<div id="opp"> <cpn><button>按钮</button></cpn> <cpn></cpn&
2020-05-23 14:48:07
206
原创 组件访问-子访问父$parent-访问根组件$root
想在子组件中直接访问父组件，可以通过$parent我们允许通过 $parent来访问父组件，但是在真实开发中尽量不要这样做。子组件应该尽量避免直接访问父组件的数据，因为这样耦合度太高了可以通过$root访问孙组件<body> <div id="opp"> <cpn></cpn> </div></body><template id="app"> <
2020-05-22 12:29:44
203
原创 组件访问-父访问子childer/refs
父组件访问子组件：使用$children或 $refs reference(引用)$children的缺陷：通过 $children访问子组件时，是一个数组类型，访问其中的子组件必须通过索引值。但是当子组件过多，我们需要拿到其中一个时，往往不能确定它的索引值，甚至还可能会发生变化。有时候，我们想明确获取其中一个特定的组件，这个时候就可以使用 $refs$refs的使用：$refs和ref指令通常是一起使用的。首先，我们通过ref给某一个子组件绑定一个特定的ID。其次，通过this. $ref
2020-05-22 11:10:30
164
原创 子组件向父组件传递数据（自定义数据）
子级向父级传递在子组件中，通过$emit()来触发事件。在父组件中，通过v-on来监听子组件事件。在这里插入代码片
2020-05-21 15:23:17
193
原创 父组件向子组件传递数据props
使用选项props来声明需要从父级接收到的数据。props的值有两种方式：方式一：字符串数组，数组中的字符串就是传递时的名称。方式二：对象，对象可以设置传递时的类型，也可以设置默认值等。<script src="./js/vue.js"></script><script> const cpn = { template:`#cpn`, props:['cmovies','cmessage'],
2020-05-18 15:33:35
303
原创 2020/5/14 组件中数据存放问题data
组件中能不能直接访问Vue实例中的data,Vue组件应该有自己保存数据的地方组件对象也有一个data属性(也可以有methods等属性)这个data属性必须是一个函数,而且这个函数返回(return)一个对象，对象内部保存着数据Vue.component('son1',{ template:sooon1, data(){ return{ datahanshu:'data必须是函数' }
2020-05-14 15:03:22
122
原创 2020/5/12 组件化的基本使用
组件可移植性高1.Vue.extend()： 调用Vue.extend()创建的是一个组件构造器。 通常在创建组件构造器时，传入template代表我们自定义组件的模板。 该模板就是在使用到组件的地方，要显示的HTML代码。2.Vue.component()： 调用Vue.component()是将刚才的组件构造器注册为一个组件，并且给它起一个组件的标签名称。 所以需要传递两个参数：1、注册组件的标签名 2、组件构造器3.组件必须挂载在某个Vue实例下，否则它不会生效。
2020-05-12 09:29:48
96
原创 2020/5/10 v-for循环遍历 key的作用
v-for的语法类似于JavaScript中的for循环。格式：item in items的形式。如果在遍历的过程中，我们需要拿到元素在数组中的索引值语法格式：v-for=(item, index) in items其中的index就代表了取出的item在原数组的索引值。...
2020-05-10 20:05:35
246
原创 2020/5/8 v-model表单数据的双向绑定
v-bind 只能实现数据的单向绑定，从M自动绑定到V，无法实现数据的双向绑定<div id="opp"> <h3>{{massage}}</h3> <input type="text" style="width: 100%;" v-model="massage"></div><script&...
2020-05-08 15:07:08
125
原创 2020/5/7 v-if，v-else-if，v-else的使用
v-if的使用<div id="opp"> <!-- 判断v-if是否为真，让其让其显不显示 --> <h2 v-if = 'isshow'>{{message}}</h2> </div>const vm = new Vue({ el:'#opp', ...
2020-05-07 23:13:34
123
原创 2020/5/6 闭包
变量的作用域分两种：全局变量和局部变量1，函数里的称为局部变量2，函数外的是全局变量3，当函数执行完毕，本作用域内的局部变量会销毁闭包（closure）指有权访问另一个函数作用域中变量的函数 简单理解就是，一个作用域可以访问另一个函数内部的局部变量闭包本身就是一个函数闭包的主要作用：延伸了变量的作用范围...
2020-05-06 13:07:32
108
原创 2020/5/5 事件修饰符
使用 .stop 阻止事件冒泡<div class="div1" @click='divclick'> <input type="button" value="点击" @click.stop='btnclick'></div>methods:{ divclick(){ alert('这是触...
2020-05-05 11:04:21
91
原创 2020/5/3 es6中对象字面量增强写法
1，属性的增强写法 const name = 'wan'; const age = 21; /* es5的写法 const odd = { name:name, age:age, } console.log(odd)
2020-05-03 00:17:58
169
原创 2020/5/2 块级作用域var，let，const
var的设计可以看成JavaScript语言设计上的错误， 但是这种错误多半不能修复和移除我们可以将let看成更完美的varJS中使用var来声明一个变量时, 变量的作用域主要是和函数的定义有关es5只有function有作用域，ES5中的var是没有块级作用域的(if/for)针对于其他块定义来说是没有作用域的，比如if/for等，这在我们开发中往往会引起一些问题ES6中,加入了let...
2020-05-02 10:01:09
98
原创 2020/5/01 统一资源定位符
url：统一资源定位符完整的url：中文版：协议：//主机名：端口号/路径/？查询字符串#锚点英文版：protocol://hostname:port/pathname/?search#hashlocation 属性：地址栏location.protocol file:本地磁盘文件location.protocol http：location.protocol https：（证书认证...
2020-05-01 15:18:24
114
原创 2020/4/30 强制改变this指向与let，const关键字
强制改变this指向1，call格式：函数名.call（）参数：第一个参数：传入该函数this指向的对象，传入什么指向什么第二个参数开始：将原函数的参数往后顺延一位<script> function show(x,y){ alert(this); //call alert(x+','+y) //10,20 } show.call("cal...
2020-04-30 15:40:12
128
原创 2020/4/29 元字符
元字符：在正则表达式有特殊含义的字符. 匹配单个的任意字符[ ]匹配单个范围内的字符[0-9]匹配单个必须是数字[a-zA-Z0-9_]匹配单个数字，字母下划线\w 匹配单个数字，字母下划线 等价于[a-zA-Z0-9_]\W 匹配单个非数字，字母下划线\d 匹配单个必须是数字 等价于[0-9]\D匹配单个非数字[^]匹配任意一个除括号内的字符[^0-9]匹配任意一个非数字的字...
2020-04-29 13:36:27
84
原创 2020/4/28 正则表达式
正则表达式三种声明方式1， 通过new去声明正则表达式第一个参数：正则表达式的主体 字符串第二个参数：修饰符（ig）i：不分大小写g：全局匹配var box = new RegExp （"hello","ig"）2，省略new运算符声明var box = RegExp （"hello","ig"）3，通过常量赋值var box = /hello/ig正则表达式对象1，tes...
2020-04-28 11:29:11
154
原创 2020/4/27 Event 事件监听
event事件监听用来事件绑定的另外一种方法一，传统事件绑定重复添加，覆盖精确的删除事件上的某一个参数二，事件监听器addEventListener（） 添加格式：node. addEventListener（“click”）参数：第一个参数：事件类型第二个参数：绑定函数第三个参数：flase 事件冒泡 默认true 事件捕获 从里向外removeEvent...
2020-04-27 17:29:34
111
原创 2020/4/26 拖拽与事件委托
拖拽（拖拽三剑客）mousedown(鼠标按下)记录鼠标按下位置和被拖拽物体的相对距离var offsetX = e.clientX - node.offsetLeftvar offsetY = e.clientY - node.offsetTopmousemove(鼠标按下移动)一致保持相对距离node.style.left = e.clientX - offsetX + ...
2020-04-26 10:59:42
137
原创 2020/4/25 触发对象与事件冒泡
目标对象/触发对象target：这个事件是由谁而起的IE8以下不兼容，可用window.event.scrElement格式：先获取事件对象，再获取触发对象一般情况下，固定格式为：function(ev){ var e = ev || window.event var target = e.target || window.event.srcElement;事件...
2020-04-25 16:35:49
80
原创 2020/4/24 事件对象属性
事件对象属性（修改键）和别的操作进行组合，形成一些快捷键操作shiftKey按下shift键为true，默认为falsealtKey按下alt键为true，默认为falsectrl按下ctrl键为true，默认为falsemetaKeywindow系统，按下window（开始键）为truemacos系统，按下command键盘事件对象的属性（两种）一，键码keyCode...
2020-04-24 11:01:29
83
原创 2020/4/23 获取当前鼠标位置的方法
系统给我们三种获取鼠标位置的方法（原点位置不一样)使用先获取事件对象clientX clientY原点位置：可视窗口的左上角为原点pageX pageY原点位置：整个页面的左上角（包含滚出去的滚动距离）screeX screeY原点位置：电脑屏幕左上角...
2020-04-23 18:24:02
226
原创 2020/4/23 事件对象的获取
事件绑定：元素节点.on+事件类型=匿名函数事件对象的获取注：系统会在事件绑定一旦完成的时候，生成一个事件对象注：触发事件的时候，系统会自动去调用绑定的函数，将事件对象当作第一个参数传入<script type="text/javascript"> function show(ev){ alert(ev) //ev得出事件对象 //这种通过形...
2020-04-23 02:08:30
178
原创 2020/4/22 this指向判断（待补充）
解析器在调用函数每次都会向函数内部传递进一个隐含的参数 这个隐含的参数就是this,this指向的是一个对象 这个对象我们称为函数执行的上下文对象 根据函数的调用方式不同,this会指向不同的对象一般情况下判断方法（待补充）1,以函数的形式调用时,this永远都是window2,以方法的形式调用时,this就是调用方法的那个对象(谁调用th...
2020-04-22 16:20:09
74
原创 2020/4/21 事件1
绑定事件内联模式外联模式/脚本模式绑定事件格式元素节点.on+事件类型 = 匿名函数click 事件类型onclick 事件处理的函数事件类型的种类一，鼠标事件二，键盘事件三，HTML事件1，window事件2，表单事件一，鼠标事件（可绑定任意元素节点上）click 单击dbclick 双击mouseover 鼠标移入mouseout 鼠标移动（会不停触发）...
2020-04-21 16:49:32
248
原创 2020/4/20 节点操作
一，创建节点creatElement(" ")格式：document.creatElement(“标签名”)返回值：创建好的这个节点二，插入节点方式1： 父节点.appendChild（新的子节点）解释：在父节点的最后插入一个新的子节点方式2：父节点.insertBefore（新的子节点，作为参考的子节点）解释：在参考节点前插入一个新的节点三，创建文本节点（纯文本，不解析标签)...
2020-04-20 20:33:59
122
原创 2020/4/19 元素节点
childNodes 访问当前节点下所有子节点firstChild 访问子节点中的首位lastChild 访问子节点中最后一位nextSibl...
2020-04-19 14:48:55
109
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人