vue笔记手写版（vue写 ）

今天给各位分享vue笔记手写版的知识，其中也会对vue写app进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

1、vue中关于$emit用法的笔记
2、前端框架Vue3学习路线!附Vue3思维导图笔记。
3、Vue如何使用svg文件(笔记)
4、Vue自学笔记9:Promise
5、vue.js学习笔记之修饰符详解

vue中关于$emit用法的笔记

1、input.vue组件中的input元素自身拥有一个change ，当用户操作input元素时，该被触发，产生一个对象。使用$emit *** 时，可以将对象作为附加参数传递。这使得对象能够传递给回调，即input.vue组件内部的inputChange函数。

2、emit 是子组件向父组件传递通信的方式。在 Vue 中，我们使用 props 来接收和传递数据，而 $emit 则用于触发并附带数据参数。例如，若要向父组件传递字符串 world，则在子组件中使用 $emit(event， world)。这允许子组件在触发特定时与父组件进行交互。

3、在Vue中，子组件可以使用$emit *** 与父组件进行通信，传递数据。举个例子，子组件通过在html标签中设置属性，将数据传递给父组件。子组件中，可以将父组件传递过来的属性值保存到export default中的props数组中。然后，在子组件的html标签中展示这些值。

4、在Vue中，this.$emit() *** 用于触发组件实例上的。触发时，可以传递可选参数。在子组件中使用该 *** ，可通知父组件某个已发生。例如：子组件(Child.vue)：父组件(Parent.vue)：调用`this.$emit(foo， bar)`后，触发父组件的`handleEvent` *** 。

前端框架Vue3学习路线!附Vue3思维导图笔记。

1、Vue3学习路线：初识Vue：了解Vue3的基本概念：Vue3是一个流行的前端JavaScript框架，采用MVVM模式，但有自己的架构模式，被描述为“渐进式框架”。选择Vue3的理由：Vue3是最新版本，大部分前端项目和 *** 需求都倾向于Vue3。

2、下面是一份精心整理的《Vue3思维导图学习路线》，涵盖了掌握Vue3的10个方面：初识Vue、Vue基本语法、Vue进阶、Vue组件、Vue路由、Vue生命周期、Vue-cli脚手架、Vuex、Vue Composition API(Vue组合式API)、AJAX与Axios框架。

3、Web前端开发环境，HTML常用标签，表单元素，Table布局，CSS样式表，DIV+CSS布局。熟练运用HTML和CSS样式属性完成页面的布局和美化，能够仿制任意网站的前端页面实现。CSS3选择器、伪类、过渡、变换、动画、字体图标、弹性盒模型、响应式布局、移动端。

4、前端页面重构。主要内容为PC端网站布局、Photoshop工具及切图、H5移动端网页布局、HTML5CSS3新特性与交互。学习目标是完成PC端网站布局，可实现响应式布局，一套代码适配PC端、移动端、平板设备等。前后端网页交互。

5、前端零基础起步及思维导图详解如下：前端零基础起步 HTML基础：定义：HTML是网页的骨架，负责网页内容的呈现。内容：包括标签的使用、属性的设置、引入图片和文字等元素。CSS基础：定义：CSS通过样式表规范HTML标签的布局和样式。

Vue如何使用svg文件(笔记)

1、首先，确保在项目的`src/shims-vue.d.ts`文件中添加相关代码，这一操作允许项目识别并引入SVG文件。接着，在Webpack配置中，通过安装`svg-sprite-loader`工具，为项目增添对SVG文件的解析与处理能力。随后，在`vue.config.js`文件中调整配置，以适配SVG文件的引入。

2、在Vue项目中，SVG的运用具有显著优势。首先，您需要通过命令行安装svg-sprite-loader，以支持SVG处理，`npm install svg-sprite-loader -D`。接着，创建一个名为src/assets/svg的文件夹，以便存放所有的SVG文件，保持与项目结构的统一。

3、将 SVG 文件作为组件的模板部分，并通过 `` 标签在组件中渲染它，确保将模板属性设置为 SVG 文件。接着，在组件内部可以使用 `` 标签来调用 SVG 文件，并添加类属性来控制样式或行为。例如：为了调整 SVG 文件的尺寸，可以使用 Vue 3 组件的 props 功能来传递宽度和高度属性。

4、步骤如下：安装svg-sprite-loader，版本为0.11。npm install svg-sprite-loader 将svg图片存放在src/icons/svg目录下，在此处创建两个文件：svgIcon.ts和svgIcon.vue（创建位置和文件名无特殊要求）。

5、Vue项目：安装与配置：安装svgspriteloader。在.d.ts文件中加入相应代码以支持SVG的引入。在Vue.config.js中配置svgspriteloader，使其能够将SVG转化为symbol。模板与脚本引入：在模板部分，使用SVG需写入特定代码，如通过svg标签引用。

6、要实现 SVG 显示与颜更改，使用 svg-sprite-loader 生成 sprite，再利用 svgo 去除冗余信息，配合 svgo-loader 修改颜。不过，vue-svg-icon 插件并未尝试。在 Vue 项目中，通过在 vue.config.js 中增加 webpack 配置代码，实现 SVG 组件的封装与引入。引入配置文件，确保组件在页面上正常显示。

Vue自学笔记9:Promise

ES6引入的Promise特性在Vue *** 开发中至关重要，其优雅地解决了异步编程的困扰。解决回调地狱问题考虑以下场景，代码存在回调地狱问题。使用Promise可优雅地解决此问题，将异步操作组织得更为清晰。异步嵌套与平行使用对比传统方式与使用Promise处理定时器异步嵌套和并行使用，总结其区别与优势。

Promise基础Promise是ES6提供的处理异步操作的解决方案，它通过链式调用实现，通过封装Promise类实现 *** 请求。例如，我们可以创建一个封装了异步请求的Promise对象。 axios *** 模块Axios是一个强大的基于Promise的HTTP库，适用于浏览器和Node.js环境。其官网详细文档提供了丰富的资源。

Promise发送的请求会经历三个过程：padding（进行中）、fullfilled（成功）、rejected(失败)。当状态决定后就不会在改变，这个时候就会把状态改为resolved（已定型)我通常配合vue和axios进行使用。

Vue 与 Axios 的结合使用在 Vue.js 中，Axios 是一个基于 promise 的 HTTP 客户端，用于浏览器和 node.js。Vue 负责构建用户界面，而 Axios 负责与后端进行数据交互。结合使用，可以实现前后端数据的异步交互，提升用户体验。Axios 的基本用法 Axios 的使用非常简单。

Promise组件是一种基于Promise的组件封装 *** ，其设计旨在简化组件的异步输入和输出处理，遵循高内聚、低耦合的软件工程理念。基于Promise的调用允许组件在适当的时间内部调用成功或失败回调，遵循异步操作的规范化模式，确保组件使用和管理的可靠性和一致性。