Vue学习记录
文章平均质量分 69
以实战为线索,逐步深入Vue开发各个环节, 掌握前
端常用性能体验优化思路,打造完整前端工作流,提升工
程化编码能力和思维能力。
淹死的鱼u
前端厨师
展开
-
Vue响应式系统的基本原理
在 Vue 的构造函数中,对 options 的 data 进行处理,这里的 data 想必大家很熟悉,就是平时我们在写 Vue 项目时组件中的 data 属性(实际上是一个函数,这里当作一个对象来简单处理)。Vue.js 是一款 MVVM 框架,数据模型仅仅是普通的 JavaScript 对象,但是对这些对象进行操作时,却能影响对应视图,它的核心实现就是「响应式系统」。(需要「响应式」化的对象),通过遍历所有属性的方式对该对象的每一个属性都通过。在 init 的阶段会进行初始化,对数据进行「响应式化」。原创 2022-11-03 12:55:06 · 233 阅读 · 0 评论 -
Vue: 组件通信与组件访问
组件通信 1. 通过props向子组件传递数据 i. 在子组件中,通过选项props来声明需要从父级接收到的数据 ii.在父组件中,通过v-bind绑定要传递的数据 2. 通过自定义事件($emit Events)向父组件发送消息 i. 在子组件中,通过**$emit()**来触发自定义事件组件访问补充组件访问(ref、$refs、children、parent、root)相关知识 1. 通过ref标记(reference)子组件,通过$refs可以拿到子组件中的数据和触原创 2022-02-24 20:18:00 · 423 阅读 · 0 评论 -
Vue: slot-scoped作用域插槽的使用
Vue学习篇(二):slot-scoped作用域插槽的使用 作用域插槽是slot一个比较难理解的点,而且官方文档说的又有点不清晰。这里,我们用一句话对其做一个总结,然后在后续案例中来体会:父组件替换插槽标签,但是内容由子组件来提供父组件中通过slot插槽控制子组件要渲染内容,组件1渲染姓名与年龄,组件2渲染姓名与爱好<template> <div class="hello"> <!-- 通过 :data 绑定子组件的中的list数据, data原创 2022-02-08 18:55:38 · 1907 阅读 · 0 评论 -
Vue3中Vuex的使用
Vuex是做什么的?Vue:状态管理工具状态管理是什么?需要在多个组件中共享的状态、且是响应式的、一个变,全都改变。例如一些全局要用的的状态信息:用户登录状态、用户名称、地理位置信息、购物车中商品、等等这时候我们就需要这么一个工具来进行全局的状态管理,Vuex就是这样的一个工具。单页面的状态管理View–>Actions—>State视图层(view)触发操作(action)更改状态(state)响应回视图层(view)vuex(Vue3.2版本)store/index.j原创 2022-03-13 17:29:08 · 57847 阅读 · 12 评论 -
Vue: v-if与v-show区别
Vue学习篇(一):v-if与v-show区别 在项目的功能开发中,碰到了一个这样的问题。每一个记录展示模块的标题和内容都不是固定的(生气:后端给的每一项内容字段也不是固定的),需要预先写好每一个记录块的标题,再将后端回显内容填充进去。经过思考我决定写一个数组,用v-for去循环每一项,将标题渲染出来,也后期方便修改。 data() { return { // 物料信息标题 materialInfoTitle: [ { content1:原创 2021-12-18 17:11:32 · 1325 阅读 · 0 评论 -
Vue报错: TypeError: Cannot read properties of undefined (reading ‘protocol‘)
vue报错: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘protocol’)报错信息: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'protocol') at isURLSameOrigin (isURLSameOrigin.js?3934:57) a原创 2021-11-21 11:53:45 · 69404 阅读 · 2 评论