- 博客(29)
- 收藏
- 关注

原创 Vue商城项目总结
简介: 这是一个基于Vue2实现的一个在线商城部分,部分图如上所示。该项目所用到的数据均为mock模拟,使用的组件部分主要有better-scroll vant2 vue2-verify vue-router vuex axios等等css部分采用less预编译。目录结构为:src │ App.vue(所有组件的'父亲') │ main.js(入口文件) │ ├─assets(阿里巴巴的iconfont) │ └─icon .
2022-03-15 16:27:43
10852
17
原创 Vue2响应式原理详解——简单易理解
首先,我希望你能够读完,因为他确实对你有一点帮助。我自己的理解,配上对应的源码之间的联系,只要你多串几遍,肯定能够融会贯通。
2023-11-22 17:41:04
122
转载 Vue3封装通用svg组件
你还在为使用iconfont图标不能够按照自己所想去展示吗?还在为图标修改颜色导致图标整体发生问题而苦恼吗?快使用svg吧,封装svg让你能够更加随心所欲的显示想要显示的iconfont
2022-10-11 13:57:06
1629
原创 Vue2收集依赖的时机以及生命周期解读
执行_render把vnode映射到真实dom,在这个方法中会访问到所依赖的数据,触发getter,然后判断Dep.target是否存在,我们在pushTarget中已经启用了依赖收集,所以这个时候就会通过判断,执行depend方法,调用Watcher的addDep方法,在addDep方法中,首先获取dep的id,然后判断newDepIds数组中是否存在这个id,防止重复收集依赖。显然,beforeCreate的钩子函数当中就不能获取到props,data当中的值,也不能调用methods当中的方法。...
2022-07-15 10:22:57
549
原创 从浏览器地址栏输入url到显示页面的详细过程
SYN = 1 ,表示这是一个 请求连接报文 或者 连接接受报文 ACK1 确定收到了请求 FIN 终止 断开连接 seq 发送自己的数据 ack 发送接收到对方的数据 DNS寻址 ==>建立连接 ==>发送请求 ==>处理并回传 ==>接收并渲染 ==> 释放连接DNS寻址通常我们在浏览器当中输入的URL(统一资源定位符)是域名,而不是直接输入ip(基本上指向计算机)地址。从宏观角度来讲,当我们输入URL并且提交的时候,第一步就是根与域名寻找目的服务器的ip地址,
2022-07-06 14:38:20
1846
原创 Vue2外卖总结
Vue2外卖总结这是跟随硅谷外卖做的一个小项目。由于没有接口,所以全程使用mock模拟数据。路虽难,但我们更要向前冲!!!
2022-04-11 08:37:39
1552
3
原创 for-in与for-of的区别JS
// for-in只能获取键名,但是不能获取键值(但是可以通过obj[]获取键值)let obj = { name: 'yzx', age: '18'}obj.__proto__.sex = '男'// for-in 可以获取原型上的键for(let key in obj){ console.log(key) // name age sex// 如果想要通过 for-in 获取值 不能用 . 因为此时的key是一个变量 而此时的obj当中是没有key这个属性的 所以会.
2022-04-05 16:49:37
282
原创 object.defineProperty小结
Object.definePropertylet persopn = { name: ‘张三’, sex: ‘男’, // age: 18 直接写age:18 得到的age是可枚举的(可遍历的)此时的age是可枚举的。}Object.defineProperty(person,‘age’,{ value = 18})观察可得,age的颜色不一样。此时的age是不可枚举的,并且数据也是不能够修改的但是,Object.defineProperty有三个属性值。
2022-03-17 15:01:50
196
原创 杨辉三角形
今日突发奇想,来写一下杨辉三角形。话不多说,直接上代码。function yanghui(num) { if (num < 1) return [] let arr = [[1]] for(let i=1;i<num;i++){ arr.push([1]) for(let j=1;j<i;j++){ arr[i][j] = arr[i-1][j-1] + arr[i-1][j] }
2022-03-16 22:01:28
576
原创 存在重复元素(JS版)
查看数组重复元素eg: const arr = [1,2,5,3,2,6,5,4,3]代码如下: // 首先给定数组 const arr = [1, 2, 5, 3, 2, 6, 5, 4, 3] // 定义方法 function existDuplicates(arr) { // 此处我选择使用map对arr数据处理 let map = new Map()
2022-03-04 20:33:43
186
原创 Vuex使用
VueX多组件共享数据---vue实现什么时候使用VueX(共享的时候) 多个组件依赖于同一个状态 / 数据 来自不同组件的行为需要变更为同一状态: 加上这个符号 就会把(1,2,3)当成JS表达式变成数字不然就是String类型 也可以使用下面的方法VueX原理安装Vuex npm i vuex 默认为4 修改版本 npm i vuex@3vue2 用vuex3vue3 用vuex4actions 在此处就是需要业务逻...
2022-02-28 20:42:21
321
1
原创 Vue插槽
插槽1.默认插槽父写东西,然后子在合适的位置写入 slot 标签 以将父当中的数据放到这个 默认插槽 当中还可以设置默认值具名插槽使用name属性 ,vue就会将相同的name放在对应的插槽当中如果使用div 那么就只能使用 slot="name"但是如果使用 template name写法就有两种了 slot="name" v-slot:name...
2022-02-28 20:36:00
248
原创 全局事件总线
全局事件总线(任意组件间通信)全局事件总线,第一种是new VC const VC = Vue.extend({}) const a = new VC() Vue .prototype.XXX = a第二种是在创建 vm 的时候 Vue.prototype.XXX = this (this就是本身vm)beforeCreate(){ Vue.prototype.XXX = this }this.demo 也可以换成其他 但是必须写成箭头函数的形式注册全局事件总线在..
2022-02-28 20:23:18
428
原创 Vue组件间通信方式之组件的自定义事件
这是我看完硅谷Vue2的个人总结,希望能帮助到大家组件的自定义事件(绑定)v-on:名称="" 表示为该组件的实例对象绑定了一个自定义事件 想要触发该事件,那就需要去找到实例对象需要在孩子的methods当中,这样就能拿到Student组件的实例对象,然后使用钩子 mountedthis.$refs.student.$on()this.$refs.student.$once() 绑定一次mounted 谁有 就是谁挂载完自...
2022-02-28 20:15:33
316
原创 vue-router路由简单使用
router-view(根据路由的配置,自动选择组件渲染这个地方,当路由切换的时候,当前组件销毁)例如:在index.js当中创建一个路由器($router)// 于创建整个应用的路由器import VueRouter from 'vue-router'// 引入组件import About from '../components/About'import Home from '../components/Home'// 创建并暴露一个路由器export default new
2022-02-20 22:27:38
273
原创 Vue Props详解
props常见写法为数组,props: ['title', 'likes', 'isPublished', 'commentIds', 'author']但是也可以写为对象,通常写为对象的目的是为这些名称和值指定数据类型props:{title: String,likes: Number,isPublished: Boolean,commentIDs: Array,author: Object,callback: Function,contactsPromise: Pr
2022-02-20 22:12:12
801
原创 算法 快速排序
使用递归总的来说就是,随机选一个数,比他大的都放在right 等于就是middle 小的都放在left然后递归在right当中重新使用quickSort然后又是在right使用quickSort 当然left也是一样最后将这些拼到一块const arr = [56, 15, 4, 9, 10]const quickSort = array => { let left = [] let middle = [] ...
2022-02-20 22:08:01
184
原创 关于html当中的各类列表
有序列表(ol-li)<ol><li>aaa</li><li>bbb</li><li>ccc</li></ol>如图:有两个属性:type ,start。type 1 a A i I。 start 1 2 3 ...n。 代表从哪个数字开始无序列表(ul-li)<ul> <li>aaa</li> ...
2022-01-08 21:01:00
189
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人