- 博客(27)
- 收藏
- 关注
RSS订阅原创 Vue的数据代理，监听属性
1. 数据代理通过一个对象代理另一个对象中的属性的操作（读 / 写 ）例如 <script> let son = {x: 100} let son1 = {y: 200} Object.defineProperty(son1,'x',{ get(){ return son.x }, set(value){ son.x = value }
2021-08-19 00:17:13
198
转载 Vue的diff算法（初始dom）
一、虚拟 DOM （virtual dom） diff 算法首先要明确一个概念就是 diff 的对象是虚拟DOM（virtual dom），更新真实 DOM 是 diff 算法的结果。 注：virtual dom可以看作是一个使用 JavaScript 模拟了 DOM结构 的树形结构，这个树结构包含整个DOM结构的信息二、为什么使用 diff 算法？ 1、页面结构庞大时，DOM 操作代价太高，可维护性差，因此要减少 DOM 操作； 2、虚拟 DOM 很轻量，对虚拟 DOM 操作.
2021-08-16 23:37:45
158
原创 递归函数，浅拷贝跟深拷贝
递归函数：递归就是一个函数在它的函数内调用它自身。执行递归函数将反复调用其自身，每调用一次就进入新的一层。递归函数必须有结束条件。浅拷贝 <script> var obj = { id: 1, name: 'andy', msg: { age: 18 }, color: ['pink','white'] }; var o = {} Object.assign(o,obj).
2021-08-15 23:21:51
251
原创 js的继承方式和call跟apply方法
第一张的方法用ES6的class继承用class创建两个构造函数分为父构造函数，子构造函数，子构造函数extends继承父构造函数实例化创建子构造函数的对象，传入参数，调用方法 <script> class Person { constructor(uname,age) { this.uname = uname this.age = age } say() { console.log('h
2021-08-15 13:11:00
167
原创 原型与原型链（笔记）
为什么使用原型？构造函数在new多个对象时，调用相同方法时，会开辟不同的地址(因为方法是引用类型，引用地址存放在栈中，再通过地址引向堆中，地址不同，但堆内储存的数据是相同的)，储存他们的数据，造成浪费内存的问题，为解决浪费内存问题，就要使用函数的原型JavaScript规定，每个函数都有一个prototype属性，指向另一个对象。这个prototype就是一个对象，这个对象的属性和方法，都会被构造函数所拥有。因此，把公共的方法，定义在prototype对象上，这样所有对象的实例就可以共享这些方法
2021-08-14 22:00:26
69
原创 ES6类class和对象
类：抽取了对象的公共部分，泛指某一大类（class）对象特指某一个，通过类实例化一个具体的对象面向对象的思维特点1.抽取（抽象）对象共用的属性和行为组织（封装）成一个类（模版）2.对类进行实例化，获取类的对象类和对象的使用 <script> // 创建一个类，泛指某一大类 class Father { constructor(uname,age) { this.uname = uname this.age
2021-08-14 17:40:52
210
原创 css，js基础总结（面试笔记）
一.CSS基础1.1 盒模型本质是一个盒子，对周围和其他html元素进行封装包扩border padding margin content，允许我们对盒子进行操作1.2.让盒子水平垂直居中的方法 1.使用子绝父相，在子元素设置 margin为0，在设置top，left， right，bottom为0 2.使用定位，再子盒子内top：50%，left：50%，transform：translate盒子本身的-50% 3.使用弹性布局 ， 在父盒子display：fle...
2021-08-13 00:40:34
177
原创 仿蘑菇街首页笔记（总结）
一. 搭建好框架，目录二.引入插件1.引入tabbar插件2.封装引入一个navbar插件3.引入一个swiper插件实现轮播4.封装一个recomment组件引入 推荐5.封装一个featureView组件引入 功能6.TabControl独立组件的封装props ->titles 在组件外：绑定数据div根据titles v-for遍历div ->span{{item}}css相关选中哪一个tab，哪一个tab的文字颜色变色 下面b...
2021-08-09 00:32:20
175
原创 better-scroll的基本使用（笔记）
什么是better-scrollbetter-scroll是一款重点解决移动端各种滚动场景需求的插件。安装及使用在控制台输出npm install better-scroll --save使用
2021-08-08 21:55:38
381
原创 vue（学习笔记总结三）
一. promise1.1promise的基本使用 什么是promise 用来执行异步任务，解决回调地狱Promise是一个构造函数，自身上有all、resolve、reject这几个方法，原型上有then、catch等同样的方法。 如何将异步操作放入到promise中通过new promise 新建一个构造函数 ，（resolve，reject）=> then/catch1.2 promise的链式调用new Promise((resol...
2021-08-07 00:24:42
72
原创 axios（初始用）
1.axios基本使用先安装npm install axios --save，引入axios后import Vue from 'vue'import App from './App'import router from './router'import axios from 'axios'Vue.config.productionTip = false/* eslint-disable no-new */new Vue({ el: '#app', router, ren
2021-08-05 21:14:27
298
原创 Vuex初始用
一. 什么是VuexVuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具devtools extension(opens new window)，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。1.1状态管理到底是什么简单理解成需要多个组件共享的变量全部存储在一个对象里面，响应式的公共组件单页面二. 在..
2021-08-05 12:48:37
138
原创 vue学习笔记总结（二）
一. Vue Cli1.1 runtime-compiler和runtime-only的区别ESLint是模版规范runtime-compiler从 template -> ast-> rander-> vdom-> 真实domruntime-only从 rander-> vdom ->dom1.2 VueCLI31.如何创建项目 vue create project2.CLI3的目录结构3.配置文件：1.vue ui查看 2.隐藏的配置文
2021-08-04 09:19:09
120
原创 Promise
1.文件路劲引用问题可以通过起别名的方式解决 alias: { '@': resolve('src'), 'assets':resolve('src/assets'), 'components':resolve('src/components'), 'views':resolve('src/views') }在src路径引用是 在前面+ ~，在import里可直接用<img slot="item-icon" src="~
2021-08-03 16:49:00
71
原创 vue学习笔记总结（一）
一. 动态绑定属性（v-bing）语法糖：：class绑定类 ：style 绑定样式二. 计算属性1.本质 computed{set{}，get{} }2.计算属性和methods对比 ：多次使用有缓存三.事件监听1.语法糖@2.参数 btnClick 不带参数btnClick（event）浏览器自带的事件btnClick（参数，$evevt）3.修饰符1.stop 阻止冒泡事件2.prevent 阻止默认事件3.enter 监听回车键...
2021-08-02 21:53:28
141
原创 router路由 导航守卫（基础重点笔记）
一. 安装router二. 在模块化中使用它1.导入路由对象 import form，并且调用Vue.use（VueRouter）安装，调用Vue.use安装插件前需引入Vue// 配置路由相关的信息import VueRouter from 'vue-router'import Vue from 'vue'// 1.通过Vue.use安装插件Vue.use(VueRouter);2.创建路由实例，并且传入路由映射配置（导出router）const routes =...
2021-08-01 23:44:58
325
原创 vue.cli（脚手架）
1.使用vue-cli可以快速搭建vue开发环境以及对应的webpack配置2.在node.js中npm install -g @vue/cli 3.0版本3.拉取2.0版本框架 vue initwebpack my-project
2021-07-31 16:18:37
57
原创 组件通信，访问（笔记）
1.父传子 通过props<body> <div id="add"> <div> <cpn :cmovies = 'movies' :cmessage = 'message'></cpn> </div> </div> <template id="cpn"> <div> <ul> <li v-for =.
2021-07-27 23:36:25
83
原创 vue组件化开发（笔记）
1.组件化开发的基本使用三步骤 1.创建组件构造器vue.extend（{ template：自定义模版}） 2.注册组件 vue.component（组件的标签名，构造器） 3.使用组件<body> <div id="add"> <my-cpn></my-cpn> <my-cpn></my-cpn> <my-cpn></m...
2021-07-25 00:01:00
103
原创 vue 高阶函数，v-model表单绑定
一.高阶函数1.filter（）创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。 const num = [10,20,30,50,100] // 1.filtle函数的使用 创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。 let newNews = num.filter(function (n) { return n < 40 }) console.log(newNews);2.ma
2021-07-16 18:04:34
712
原创 vue事件监听，条件判断
一. 事件监听 v-on语法糖@1. 基本的使用法法 <div id="add"> 点击次数{{counter}} <button @click = "add">+</button> <!--v-on:click = "" 语法糖 --> <button @click = "dec">-</button> </div> <scrip
2021-07-07 21:48:47
1090
原创 vue插值的操作
1.mustache语法 {{}} ：俗称双大括号语法作用：把数据中的内容解析到视图层引入vue文件 <div id="add"> <h2>{{message}}</h2> </div> <script> const add = new Vue({ el: '#add', data: { message: 'hello word', } })
2021-06-25 21:49:45
95
原创 Vue初体验（初学者）
Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。1.首先去官网下载vue.js2.在你的项目中引入vue<script src="../vue.js/vue.js"></script>3.用一个标签来放项目<div id="
2021-06-23 22:09:40
188
1
原创 HTML表格
创建一个表格 table表格内有若干行 tr表头 th表格单元格 td <style> .tab{ margin: 100px auto; width: 300px; height: 200px; background-color: blanchedalmond; text-align: center; ...
2021-06-23 14:37:59
73
原创 浅谈jquery电梯事件
初学电梯事件1.本人第一次用jquery做电梯事件，在此分享一些经验,小白一个，若有更好的方法，请随时指正先引入jquery库<script src="js/jquery.min.js"></script>首先是显示与隐藏，个人觉得用fadeIn（），fadeOut（）效果会更好些，当页面滚动到目标是显示 toggelTop() function toggelTop(){ if($(document).scrollTop() >= top
2021-05-29 23:02:10
84
原创 弹性布局 flex
<!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-05-21 22:04:34
956
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人