07 2021 档案
摘要：实现一个简单的水果购物车功能 需要用到的指令 v-for遍历数据列表 v-on绑定提交的事件 绑定加减水果数量的事件 v-model双向绑定输入框的数据 除此之外需要用到computed计算属性来自动计算总价 <div id="app"> <h1>水果列表</h1> <form action=""
阅读全文
摘要：双向数据绑定 提交表单引入一个很实用的指令 v-model <div id="app"> <h1>{{msg}}</h1> <form action="" @submit.prevent="post"> <input type="text" v-model="msg"> <button>提交表单</
阅读全文
摘要：实现一个点击按钮切换图片的效果 <div id="app"> <img :src="src" alt=""> <button @click=change(0)>1</button> <button @click=change(1)>2</button> <button @click=change(2
阅读全文
摘要：首先三个常用的指令，和vue2一样 v-text 简写为 {{}} v-bind 简写为 ： v-on 简写为 @ <div id="app"> <!-- 指令：vue提供的一些特殊的属性v-开头 --> <h1 v-bind:title="tit" v-text="msg" v-on:click=
阅读全文
摘要：<div id="app"> <h1>{{msg}}</h1> </div> <script src="https://unpkg.com/vue@next"></script> <script> // vue2 new Vue({el:}) // vue2 使用el 挂载 // vue2 用这种简
阅读全文
摘要：首先建立一个对象 const student = { name: "小明", age: 12, [Symbol("level")]: "优秀", [Symbol("level")]: "有钱" } 通过Object.getOwnPropertyDescriptor获取属性值并输出 const val
阅读全文
摘要：Symbol的作用 Symbol.interator Symbol.iterator是一个内置的值 const student = { name: "小明", age: 12, [Symbol("level")]: "优秀", [Symbol("level")]: "有钱" } const list
阅读全文
摘要：Symbol的获取和使用 const student = { name: "小明", age: 12, [Symbol("level")]: "优秀", [Symbol("level")]: "有钱" } 获取key值 console.log(Object.keys(student)) // ["n
阅读全文
摘要：Symbol基本概念 Symbol js的数据类型：数值、布尔、字符串、undefined、null、对象 ES6中加了一个新的数据类型 Symbol const sym = Symbol("abc") // 括号中的值是描述 console.log(sym) // Symbol(abc) cons
阅读全文
摘要：事件流 <style> .big{ width: 300px; height: 300px; background-color: red; } .center{ width: 200px; height: 200px; background-color: yellow; } .small{ widt
阅读全文
摘要：promise和async函数 promise let p = new Promise((resolve)=>{ resolve("hello world") }) p.then((data) => { console.log(data) // hello world }) async函数 // a
阅读全文
摘要：宏任务与微任务 宏任务： 计时器、ajax、读取文件 微任务： promise.then 执行顺序 1. 同步程序 2. process.nextTick 3. 微任务 4. 宏任务 5. setImmediate setImmediate(()=>{ console.log(1) }) conso
阅读全文
摘要：process.nextTick和setImmediate方法 setImmediate(()=>{ console.log(1) }) process.nextTick(()=>{ console.log(2) }) console.log(3) setTimeout(() => {console
阅读全文
摘要：同步和异步 同步：同步程序按顺序执行 console.log(1) console.log(2) console.log(3) 异步： 计时器(setTimeout,setInterval) ajax 读取文件 执行顺序 同步程序执行完成之后，执行异步程序 console.log(1) setTim
阅读全文
摘要：通过JSON拷贝 json数据格式 json全称：JavaScript对象表示法 [ { "name": "小明", "age": 2 },{ "name": "小刚", "age": 3 } ] jsons数据转换 let str = JSON.stringify(obj) // 将对象转换成js
阅读全文
摘要：深拷贝 递归的理解 递归：自己调用自己 // 计算累加 function fun(n){ if (n 1){ return 1 } else { return n + fun(n - 1) } } let res = fun(3) console.log(res) // 6 利用递归实现深度克隆 /
阅读全文
摘要：浅拷贝 首先看一个vue的例子 <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> <div id="app"> <form @submit.prevent="insert"> <input type="text" v-model="
阅读全文
摘要：js内存结构 基本概念 分类： 原始类型（值类型、基本类型）：Number、String、Boolean、null、undefined 引用类型：Object // 原始数据类型 let str1 = "hello"; let str2 = str1; // str2 : hello str1 =
阅读全文
摘要：call、apply、bind call是一个方法，是函数的方法 function fun(){ console.log("hello world") } call可以调用函数 fun.call() // hello world call可以改变函数中this的指向 function fun(){
阅读全文
摘要：this关键字的使用方法 1.全局环境输出this，指向谁？ 直接输出this指向全局对象 console.log(this) // 全局window 2.全局环境输出this，指向谁？ 全局函数其实就是window（全局对象）的方法 function fn(){ console.log(this)
阅读全文
摘要：原型继承 // ES5继承：prototype function User(username,password){ this.username = username this.password = password this.login = function () { console.log("登录
阅读全文
摘要：ES6类的基本语法 例： class Cat { constructor(name,age){ this.name = name this.age = age } } Cat.prototype.eat = function() { console.log("吃鱼") } let cat = new
阅读全文
摘要：原型对象 什么是原型？ 每一个对象都有他的原型对象，他可以使用自己原型对象上的所有属性和方法 获取原型的方法 通过对象的__proto__获取 例： let cat = { name:"喵喵" } cat.__proto__.eat = function(){ console.log("吃鱼") }
阅读全文
摘要：promise // promise对象 // resolve可以将异步数据传递出来 let p = new Promise(function(resolve){ resolve("hello world") }) // 通过then拿到异步数据 p.then(function(data){ con
阅读全文
摘要：回调地狱 // 获取奶茶的方法 function getTea(fn){ setTimeout(() => { fn("奶茶") },1000) } // 获取火锅的方法 function getHotpot(fn){ setTimeout(() => { fn("火锅") },2000) } //
阅读全文
摘要：节流 <style> body{ height: 2000px; } </style> 节流的概念和作用 // 节流：控制执行次数 // 节流的作用：控制高频事件执行次数 window.onscroll = throttle(function(){ console.log("hello world"
阅读全文
摘要：封装一个用防抖的函数 <input type="text"> 封装代码 let inp = document.querySelector('input') inp.oninput = debounce(function(){ console.log(this.value) },500) // 防抖
阅读全文
摘要：防抖 <input type="text"> 利用计时器实现一个防抖 // 防抖：用户触发事件过于频繁，只要最后一次事件的操作 let inp = document.querySelector("input") let t = null inp.oninput = function (){ if (
阅读全文
摘要：闭包的应用 // 应用：封装一段代码 let xm = (function (){ let a = 10; let b = 20; function add(){ return a + b } function sub(){ return a - b } return { add, sub } })
阅读全文
摘要：闭包的基本概念 // 闭包：函数嵌套函数，内部函数就是闭包 // 正常情况下，函数执行完毕，内部变量会销毁 // （销毁：释放内存空间） // 闭包内部函数没有执行完成，外部函数变量不会被销毁 function outerFun() { let a = 10 function innerFun()
阅读全文
摘要：模板字符串 let a = "hello world" let b = "test" let str = "我是'超人'" // 里外都是双引号 let str = "我是\"超人\"" // 模板字符串 let str = `我是"超人"` // 可以换行 let str = `我是 超人` 可以
阅读全文
摘要：箭头函数与普通函数的区别 // 普通函数 function fun() { return 100 } const fn = function () { return 100 } // 箭头函数 const fn1 = () => 100 /* 箭头函数 ()中定义参数，如果只有一个参数，可以不写括号
阅读全文
摘要：解构赋值 // 解构赋值 // 数组的解构赋值 let [a, b] = [10, 20]; [a,b] = [b,a]; console.log(a); // 20 console.log(b); // 10 // 对象的解构赋值 let {name,age} = { name : "小明", a
阅读全文
摘要：1.JavaScript内存空间-原始类型与引用类型 2.如何使用ES2015中的let与const 3.JavaScript解构赋值的使用方法 4.箭头函数与普通函数的区别 5.ES6中超级好用的模板字符串 6.闭包（一）闭包的基本概念 7.闭包（二）闭包的应用 8.防抖与节流（一） 手写防抖 9
阅读全文
摘要：let（定义变量，有块级作用域） const（常量，不能修改） // let 和 var 的区别 // var 定义的变量没有块级作用域的概念 // let 定义的变量有块级作用域 if (true) { var a = 10 } console.log(a) // var 好 还是 let 好？
阅读全文
摘要：基本概念 分类： 原始类型（值类型、基本类型）：Number、String、Boolean、null、undefined 引用类型：Object 原始类型与引用类型三种情况下的对比： 1.赋值：原始类型赋【值】；引用类型赋【地址】 2.比较：原始类型比较【值】是否相等；引用类型比较的是【地址】是否指
阅读全文
浙公网安备 33010602011771号