09 2020 档案
摘要：1、跨域问题 解决方式：设置vue.config.js，如下所示： module.exports = { devServer:{ open:true, proxy:{ "/text":{ target:"接口域名", //changeOrigin默认是false：请求头中host仍然是浏览器发送过来
阅读全文
摘要：监听器： 作用： 监听vue实例上的数据变化 怎么用 new Vue({ watch:{ 要监听的变量(变化后的值,变化之前的值){ // 监听的变量一发生改变就会执行这里的方法 } } }) 监听路由的变化 new Vue({ watch:{ $route(变化后的值,变化之前的值){ // 路由
阅读全文
摘要：路由的概念 后端路由：根据不同URL地址，服务端响应不同的资源。 前端路由：针对于单页面应用来说，根据不同的地址，展示不同的界面，称之为前端路由。 怎么使用路由 引入路由的js 创建路由实例。 new VueRouter 配置地址和组件的映射关系。 routes 把路由实例挂载到vue上。 Vue实
阅读全文
摘要：作用 可以给组件传递一些html的数据。 怎么使用 我们在组件标签内部写的html代码都会被放到组件内部template里的<slot></slot>位置。 如果希望把指定的html放到指定的位置(命名插槽) 旧版的书写方式 子组件 <template> <div> <slot name="head
阅读全文
摘要：1、父组件向子组件传值的原因： 组件每次引用时，大体结构是一样的，但是有些数据是不一样。这个时候这些不同的数据就需要在引用组件的时候传递进来。 2、组件参数的声明 通过props声明需要传递的参数 1、通过数组声明 const comp = { props:['参数1','参数2'] } 2、通过对
阅读全文
摘要：1、通过v-if或者v-show切换 <template id="login"> <div> 登录组件 </div> </template> <script> const login = { template: '#login', data() { return { flag: true, } }
阅读全文
摘要：1、组件的概念 对一段前端UI界面的抽象。从UI界面的角度出发，把之前界面按照功能拆分成一个个组件，方便重用。 2、使用组件的好处 1、可复用，定义一次，可以多次调用 2、提高代码的可维护性 3、高内聚、 低耦合 3、模块化和组件化的区别 模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证
阅读全文
摘要：1、效果图 2、使用过渡类名 1、使用动画的步骤 把需要添加动画的元素通过<transition></transition>标签包裹起来 2、编写相应的样式 .v-enter .v-enter-active .v-enter-to .v-leave .v-leave-active .v-leave-
阅读全文
摘要：1、vue-resource的使用 1、直接在页面中，通过script标签，引入vue-resource的脚本文件； 2、注意：引用的先后顺序是-先引用Vue的脚本文件，再引用vue-resource的脚本文件。 3、vue-resource get请求案例 <div id='app'> <ul>
阅读全文
摘要：1、什么是生命周期 从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！ 2、vue生命周期钩子函数 生命周期函数=生命周期事件=生命周期钩子 3、vue生命周期 4、案例 <div id='app'>{{title}} <button @click="title
阅读全文
摘要：1、全局定义 Vue.directive('指令的名字',{ bind(el,binding){ // el 绑定的dom // binding 指令的基本信息 // name: 指令名 // rawName: 指令完整名字 // value: 指令的值 // expression: 表达式 //
阅读全文
摘要：1、注册一个监听按键事件 1、监听所有按键：v-on:keyup 2、监听指定按键：v-on:keyup.按键码 2、vue提供的按键别名 1、enter 2、tab 3、delete(捕获“删除”和“退格”键) 4、esc 5、space 6、up 7、down 8、left 9、right 3、
阅读全文
摘要：1、注意事项 过滤器可以用在两个地方：双花括号插值和v-bind表达式 2、使用语法 {{name | 过滤器的名字 }} // 可以有多个过滤器 {{name | 过滤器的名字 | 其他的过滤器的名字 | ...}} // 可以传参 {{name | 过滤器的名字(参数)}} 3、全局定义 Vue
阅读全文
摘要：1、区别 1、v-if删除dom元素 2、v-show设置display:none 2、应用场景 1、v-if只修改一次的时候可以使用v-if 2、v-show频繁切换的时候可以使用v-show 3、v-if案例 <div id='app'> <div v-if="score < 60"> 不及格
阅读全文
摘要：1、遍历数组，参数(item,index) in list <div id="app"> <ul> <li v-for="item in list"> {{item.name}} </li> </ul> </div> <script> var vm = new Vue({ el: '#app', d
阅读全文
摘要：1、stop阻止冒泡 <style> .outer { width: 500px; height: 300px; background: greenyellow; } .inner { width: 300px; height: 200px; background: hotpink; } .last
阅读全文
摘要：1、v-cloak：防止界面闪烁 获取变量值的指令： 插值表达式{{}}，可以在前后插入一些内容 v-text：会替换掉元素里的内容 v-html：可以渲染html界面 <style> [v-cloak] { display: none; } </style> </head> <body> <div
阅读全文
摘要：1、什么是vue.js 1、Vue.js是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App，Vue语法也是可以用于进行手机App开发的，需要借助于Weex、uni-app）。 2、Vue.js是前端的主流框架之一，和Angular2+、React
阅读全文
摘要：1、初识 现在的web系统越来越庞大、复杂，需要团队分工，多人协作，大型系统的javascript文件经常存在复杂的依赖关系，后期的维护成本会越来越高。 JavaScript模块化正式为了解决这一需求而诞生。 目前浏览器不支持ES6模块化的语法，所以我们在node里进行测试。 通过babel解决这个
阅读全文
摘要：1、通过关键字class来声明一个类 class Animal { constructor(name,color){ this.name=name; this.color=color; console.log("动物类"); } } let dog=new Animal('旺财','黑白斑点');
阅读全文
摘要：知识点一：map 1、作用：存储键值对 let map = new Map([[key,value],[key2,value2]]) map.set(key,value) map.get(key) map.delete(key) map.has(key) map.clear() // map中key
阅读全文
摘要：知识点一：set set是ES6中一个新的数据结构，set的使用和数组是类似的，区别就是，set里没有重复项 1、定义：通过new定义 let set = new Set([1,2,3,4,5,6,7,2,1,3,5]); console.log(set);//Set(7) {1, 2, 3, 4,
阅读全文
摘要：这是ES7的语法，它是基于generator函数做的语法糖。 async function 函数名（）{ let obj = await getName() return obj } 函数名().then(res=>{ //得到函数的返回值 }) 与普通函数的区别： 1、用 async functi
阅读全文
摘要：1、定义 function * 函数名{ let obj = yield "生成器函数" } 与普通函数的区别： 1、function后面加了* 2、函数体里有 yield关键字 2、表现 1、调用这个函数，不会立即执行函数体里的内容，返回一个对象 2、通过这个对象的next方法，可以驱动函数的执行
阅读全文
摘要：1. 回调函数的方式 1 2 3 4 5 6 7 8 9 10 function func(callback){ setTimeout(()=>{ callback("异步数据") },1000) } func(function (res){ console.log(res) }) 2. 通过Pro
阅读全文
摘要：1、数组默认实现了迭代器，所以可以通过for of遍历 2、对象没有实现迭代器，所以不能通过for of 遍历 3、Array[Symbol.iterator] 对应是一个函数，这个函数返回一个对象，对象中有个next方法，next方法返回一个对象{value:"",done:false} 4、fo
阅读全文
摘要：1、普通传统的遍历 1、书写繁杂 2、可以退出循环，可以获取索引值 1 2 3 4 5 let arr = [1,2,3,4,5]; //普通遍历方法 for(let i=0;i<arr.length;i++){ console.log(arr[i]); } 2、foEach()参数第一个值，第二个
阅读全文
摘要：1、proxy的实现 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 let my = { location : "市区", housePrice : 20000 } //在我们获取数据前进行处理；//参数 第一要代理的对象 第二 处
阅读全文
摘要：symbol解决了变量命名冲突的问题。 定义 描述信息 每个Symbol都是独一无二的 通过遍历是获取不到symbol 遍历不能获取symbol，在对象中，获取symbol 要加 [] symbol常用方法： 1、Object.getOwnPropertySymbols函数 获取symbol类型的属
阅读全文
摘要：1、函数默认值 // 注意：函数的默认值赋初始值，需要放在最后 // 什么情况下会触发默认值：调用函数名不传参 2、rest函数 扩展运算符：...values(三个点+变量名) // 总结：rest函数调用时排除第一个参数，其他参数被...values依次获取 3、扩展运算符 ...values
阅读全文
摘要：1、Object.is() 全等操作= 2、Object.assign() 将源对象中的属性赋值给目标对象 3、Object.getPrototypeOf() 获取对象Prototype的属性 4、Object.setPrototypeOf() 设置对象Prototype的属性 5、自定用变量名的更
阅读全文
摘要：1、Array.of() 将任意一组值转换为数组 2、Array.from() 将类(伪)数组转换为数组 3、find() 找出数组中符合条件的第一个元素 // 注意：未找到返回undefined 4、findIndex() 找出数组中符合条件的第一个元素位置 // 未找到返回-1 5、fill()
阅读全文
摘要：1、isNaN() 如果是一个数，则返回false, 否则返回true 注意：Number.isNaN返回结果为false时，不一定代表该值定是数字，字符串也可以返回false 2、isFinite() 判断一个值是否是无限的 如果一个值是无限的，返回false；是有限的，返回true 3、pars
阅读全文
浙公网安备 33010602011771号