前端
意瑚琏
快乐学习,天天向上,
岂不尔思,子不我及,
山不就我我就山
展开
-
vue源码——object的变化侦测
什么是变化侦测渲染:vue.js会自动通过状态生成DOM,并将其输出到页面上显示出来在运行时应用内部状态不断变化,此时需要不断渲染。那我们如何确定发生了哪些变化?这个时候就需要变化侦测了。变化侦测拉:Angular、React,当状态发生变化时,它只知道状态变了,给框架发送信息,而框架内部则进行暴力对比找出需要渲染的DOM节点,在Angular属于脏检查,在React使用的是虚拟DOM。推:Vue.js,当状态发生变化,vue立刻就知道了,而且在一定程度指导的消息更多,可以进行更细粒度的更新原创 2020-09-13 22:54:46 · 151 阅读 · 0 评论 -
js_数组
原文跳转创建1: 常规方式:var myCars=new Array();myCars[0]="Saab"; myCars[1]="Volvo";myCars[2]="BMW";2: 简洁方式:var myCars=new Array("Saab","Volvo","BMW");3: 字面:var myCars=["Saab","Volvo","BMW"];数组属性属性描述constructor返回创建数组对象的原型函数。length设置转载 2020-09-13 11:07:11 · 51 阅读 · 0 评论 -
js——promise
resolve&rejectresolve 和 reject 都是函数,其中调用 resolve 代表一切正常,reject 是出现异常时所调用的:参数为要输出的信息new Promise(function (resolve, reject) { var a = 0; var b = 1; if (b == 0) reject("Diveide zero"); else resolve(a / b);}).then(function (value) {原创 2020-09-11 16:56:02 · 135 阅读 · 0 评论 -
他山之石,可以功玉
数据劫持or数据代理原创 2020-09-11 15:02:05 · 105 阅读 · 0 评论 -
js——__proto__&constructor&prototype
今天看深入浅出vue.js看到Array的变化侦测,遇到prototype和proto感到很陌生,于是就探索了一番引用博文.总述:我们需要牢记两点:①__proto__和constructor属性是对象所独有的;② prototype属性是函数所独有的,因为函数也是一种对象,所以函数也拥有__proto__和constructor属性。__proto__属性的作用就是当访问一个对象的属性时,如果该对象内部不存在这个属性,那么就会去它的__proto__属性所指向的那个对象(父对象)里找,.原创 2020-09-10 20:56:43 · 106 阅读 · 0 评论 -
web前端day8--vue-router&子路由&路由抽离
vue-loader如何在webpack中使用vue-loader呢1在main.js.导包中import VueRouter from 'vue-loader'当然前提你得安装先。2.手动安装VueRouter,也是在main.jsVue.use(VueRouter)这里的也是导入的vue.js的对象3.创建路由对象4.挂载路由注意:router-view写到app组件中去,不要写道id=app的div中去,因为render渲染的组件会覆盖掉根元素。children rou原创 2020-09-08 10:29:10 · 197 阅读 · 0 评论 -
web前端dya07--ES6高级语法的转化&render&vue与webpack&export
js处理类语法webppack无法处理一些ES6的高级语法,需要babel来处理,比如类.1.装包2.配置正则3.配置.babelrc文件render渲染组件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0原创 2020-09-08 09:56:37 · 309 阅读 · 0 评论 -
web前端day6——webpack&loader
webpack为什么要引入webpack网页加载慢,二次请求多要处理错综复杂的依赖关系解决合并压缩,精灵图,图片base64编码requireJS、webpack(基于node.JS,基于真个项目构建的)、gulp(基于task任务,基于部分构建)使用webpack1.初始化npm init -y在node开发中使用npm init会生成一个pakeage.json文件,这个文件主要是用来记录这个项目的详细信息的,它会将我们在项目开发中所要用到的包,以及项目的详细信息等记录在这原创 2020-09-06 23:19:18 · 98 阅读 · 0 评论 -
web前端day05——数据监听&watch,computed&nrm
数据&路由监听@keyup在input标签后添加一个keyup事件,没啥需要多说的watchwatch既可以监听数据也可以监听路由监听数据在vue对象中添加一个 watch:{//使用这个属性可以监听data中的数据改变且触发对应的处理函数 'firstname':function(newval,oldval){//first的‘’可选,但为first-name形式时必须加 this.fullname=new原创 2020-09-06 19:25:34 · 169 阅读 · 0 评论 -
web前端day4-组件&动画&路由
动画动画钩子函数v-enter:定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除。v-enter-active:定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。v-enter-to:2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除),在过渡/动画完成之后移除。v-leave:定义离开过渡的原创 2020-09-04 23:02:56 · 157 阅读 · 0 评论 -
web前端day03_组件&过度动画&API调用
使用this.http.get和this.http.get 和 this.http.get和this.http.post传参 getInfo(){ console.log(this.page) this.$http.get('http://localhost:8080/resourceController/requestResourceListData',{params:{page:this.page,rows:this.rows}},{原创 2020-09-03 22:29:45 · 123 阅读 · 0 评论 -
web前端day2——crud&过滤器&生命周期函数
vue 的crud增加add(){ //添加的方法// 分析// 1.获取到id和name,直接从 data 上获取// 2,组织一个对象// 3.把这个对象,调用 数组的 相关方法,添加到 当前 data的list里面// 4.在Vue中已经实现了数据的双向绑定了,改动都会自动更新 var car = { id: this.id, name: this.name, cTime: new Date() } this.list.push(car) this.id = t原创 2020-09-03 11:31:13 · 156 阅读 · 0 评论 -
web前端day1——MVC与MVVM&V-指令
MVC 与MVVMmvcmvc是前后端的设计模型mvvmmvvm是前端的页面双向数据绑定v-for中的key属性使用时注意v-for 可以通过一个对象的属性来迭代将对象的所以属性注意展示出来key保证使用时的数据唯一性v-for="(value, key, index) in object“,展示时候key,value转换,第三个参数为索引。v-if 与 v-showv-if 更高的切换消耗,v-show有更高的初始渲染消耗。所以如果条件不常改变的就用v-if,时常改变的就用v原创 2020-09-01 16:51:32 · 149 阅读 · 0 评论 -
vue入门(4)——路由
vue中的.$mount(’#app’)手动挂载配置了el属性则:new Vue({el:"#app",router});没有配置new Vue({router}).$mount('#app');路由简单例子 // 0. 如果使用模块化机制编程,导入 Vue 和 VueRouter,要调用 Vue.use(VueRouter) // 1. 定义(路由)组件。// 可...转载 2019-11-01 20:17:59 · 188 阅读 · 0 评论 -
vue入门(3)——组件&自定义指令
全局组件<div id="app"> <runoob></runoob></div> <script>// 注册Vue.component('runoob', { template: '<h1>自定义组件!</h1>'})// 创建根实例new Vue({ el: '#app'}...原创 2019-11-01 20:03:51 · 581 阅读 · 0 评论 -
vue入门——v-on的一些细节
事件修饰符Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节,如:event.preventDefault() 或 event.stopPropagation()。Vue.js通过由点(.)表示的指令后缀来调用修饰符。.stop.prevent.capture.self.once<!-- 阻止单击事件冒泡 --><a v-on:click.st...转载 2019-10-31 21:06:12 · 152 阅读 · 0 评论 -
vue.js入门笔记(1)
v-for<div id="example"> <!--循环数字--> <span v-for="count in 10">{{count}}</span> <!--循环数组--> <span v-for="(u,i) in user">--每个数组值--{{u}...转载 2019-10-31 20:57:20 · 136 阅读 · 0 评论 -
typescript入门
typescript标签(空格分隔): 前端解决问题百度or谷歌github看issue去提问(国内:segmentFault,国外stackOverflow)字符串新特性多行字符串字符串模板自动拆分字符串一,TypeScript多行字符串传统JavaScript字符串换行需要+进行拼接,而TypeScript不需要+拼接。看下面实例: javaScript:...原创 2019-10-19 11:02:53 · 704 阅读 · 0 评论