【Vue第3章】使用Vue脚手架_Vue2

目录

3.1 初始化脚手架

3.1.1 说明

3.1.2 具体步骤

3.1.3 模板项目的结构

3.1.4 笔记与代码

3.1.4.1 笔记

3.1.4.2 01_src_分析脚手架

3.2 ref与props

3.2.1 ref

3.2.2 props

3.2.3 笔记与代码

3.2.3.1 笔记

3.2.3.2 02_src_ref属性

3.2.3.3 03_src_props配置

3.3 混入

3.3.1 笔记与代码

3.3.1.1 笔记

3.3.1.2 04_src_mixin混入(合)

3.4 插件与scoped样式

3.4.1 笔记与代码

3.4.1.1 笔记

3.4.1.2 05_src_插件

3.4.1.3 06_src_scoped样式

3.5 Todo-list案例

3.5.1 组件化编码流程(通用)

3.5.2 笔记与代码

3.5.2.1 笔记

3.5.2.2 07_src_TodoList案例

3.5.2.3 08_浏览器本地存储

3.5.2.4 09_src_TodoList_本地存储

3.6 Vue中的自定义事件

3.6.1 绑定事件监听

3.6.2 触发事件

3.6.3 笔记与代码

3.6.3.1 笔记

3.6.3.2 10_src_组件自定义事件

3.6.3.3 11_src_TodoList_自定义事件

3.7 全局事件总线

3.7.1 理解

3.7.2 指定事件总线对象

3.7.3 绑定事件

3.7.4 分发事件

3.7.5 解绑事件

3.7.6 笔记与代码

3.7.6.1 笔记

3.7.6.2 12_src_全局事件总线

3.7.6.3 13_src_TodoList_事件总线

3.8 消息订阅与发布

3.8.1 理解

3.8.2 使用PubSubJS

3.8.3 笔记与代码

3.8.3.1 笔记

3.8.3.2 14_src_消息订阅与发布

3.8.3.3 15_src_TodoList_pubsub

3.8.3.4 16_src_TodoList_nextTick(编辑功能)

3.9 过度与动画

3.9.1 效果

3.9.2 vue动画的理解

3.9.3 基本过渡动画的编码

3.9.4 笔记与代码

3.9.4.1 笔记

3.9.4.2 17_src_过度与动画

3.9.4.3 18_src_TodoList_动画


3.1 初始化脚手架

3.1.1 说明

Vue脚手架即Vue CLI(command line interface,命令行接口工具,简称脚手架)

3.1.2 具体步骤

配置npm淘宝镜像:npm config set registry https://registry.npm.taobao.org

3.1.3 模板项目的结构

3.1.4 笔记与代码

3.1.4.1 笔记

3.1.4.2 01_src_分析脚手架

3.2 ref与props

3.2.1 ref

3.2.2 props

3.2.3 笔记与代码

3.2.3.1 笔记

3.2.3.2 02_src_ref属性

3.2.3.3 03_src_props配置

3.3 混入

3.3.1 笔记与代码

3.3.1.1 笔记

3.3.1.2 04_src_mixin混入(合)

3.4 插件与scoped样式

3.4.1 笔记与代码

3.4.1.1 笔记

3.4.1.2 05_src_插件

3.4.1.3 06_src_scoped样式

3.5 Todo-list案例

快速打开markdown文件插件:Open in External App

3.5.1 组件化编码流程(通用)

3.5.2 笔记与代码

3.5.2.1 笔记

3.5.2.2 07_src_TodoList案例

3.5.2.3 08_浏览器本地存储

localStorage

sessionStorage 

3.5.2.4 09_src_TodoList_本地存储

3.6 Vue中的自定义事件

3.6.1 绑定事件监听

3.6.2 触发事件

3.6.3 笔记与代码

3.6.3.1 笔记

3.6.3.2 10_src_组件自定义事件

3.6.3.3 11_src_TodoList_自定义事件

3.7 全局事件总线

3.7.1 理解

3.7.2 指定事件总线对象

3.7.3 绑定事件

3.7.4 分发事件

3.7.5 解绑事件

3.7.6 笔记与代码

全局事件总线原理图:

3.7.6.1 笔记

3.7.6.2 12_src_全局事件总线

3.7.6.3 13_src_TodoList_事件总线

3.8 消息订阅与发布

3.8.1 理解

3.8.2 使用PubSubJS

3.8.3 笔记与代码

消息订阅与发布原理图:

3.8.3.1 笔记

3.8.3.2 14_src_消息订阅与发布

3.8.3.3 15_src_TodoList_pubsub

3.8.3.4 16_src_TodoList_nextTick(编辑功能)

3.9 过度与动画

3.9.1 效果

3.9.2 vue动画的理解

3.9.3 基本过渡动画的编码

3.9.4 笔记与代码

3.9.4.1 笔记

3.9.4.2 17_src_过度与动画

3.9.4.3 18_src_TodoList_动画

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/231853.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

CTF网络安全大赛是干什么的?发展史、赛制、赛程介绍,参赛需要学什么?

CTF(Capture The Flag)是一种网络安全竞赛,它模拟了各种信息安全场景,旨在提升参与者的网络安全技能。CTF 赛事通常包含多种类型的挑战,如密码学、逆向工程、网络攻防、Web 安全、二进制利用等。 发展史 CTF 的概念…

《巫师3》缺失vcomp110.dll如何解决,如何快速修复vcomp110.dll丢失问题

在日常使用电脑的过程中,我们可能会遇到一些错误提示,其中之一就是“vcomp110.dll丢失”。这个错误提示通常意味着vcomp110.dll文件在系统中无法找到或加载。那么,vcomp110.dll丢失的原因是什么?它对电脑有什么影响?本…

ky10 server x86 设置网卡开机自启

输入命令查看网卡名称 ip a 输入命令编辑网卡信息 vi /etc/sysconfig/network-scripts/*33改成yes 按ESC键,输入:wq,保存

人工智能大型语言模型的突破

近年来,随着深度学习和人工智能技术的飞速发展,大型语言模型在自然语言处理领域取得了巨大的突破,引发了广泛的关注和讨论。本文将介绍大型语言模型的发展历程、技术原理、应用场景以及未来发展趋势。 一、发展历程大型语言模型的发展可以追…

Android app性能优化指南

Android应用性能优化指南 提高应用程序的性能以实现更流畅的用户体验和更高的可见度。 性能在任何应用程序的成功中发挥着重要的作用。为用户提供流畅无缝的体验应该是开发人员的重点。 应用程序大小 在用户开始使用我们的应用程序之前,他们需要下载应用程序并将…

oracle实验2023-12-8--触发器

第十四周实验 【例】功能要求:增加一新表XS_1,表结构和表XS相同,用来存放从XS表中删除的记录。 分析: 1、创建表 xs_1 SQL> create table xs_1 as select * from xs; Table created SQL> truncate table xs_1; Table truncated题目&a…

高项备考葵花宝典-项目进度管理输入、输出、工具和技术(中,很详细考试必过)

项目进度管理的目标是使项目按时完成。有效的进度管理是项目管理成功的关键之一,进度问题在项目生命周期内引起的冲突最多。 小型项目中,定义活动、排列活动顺序、估算活动持续时间及制定进度模型形成进度计划等过程的联系非常密切,可以视为一…

GO面试题系列

1.GO有哪些关键字 2.GO有哪些数据类型 3.Go方法与函数的区别 在Go语言中,方法和函数是两个不同的概念,尽管它们在某些方面有相似之处。下面是它们的主要区别: 定义位置: 函数: 函数是独立声明的,它们不…

在Mac上安装Windows应用程序的简便方法:CrossOver for Mac

对于许多Mac用户来说,有时候他们可能需要使用一些只有在Windows上才能找到的应用程序。以前,解决这个问题的方法是通过安装Windows虚拟机或使用双系统来在Mac上运行Windows应用程序。但这些方法需要额外的硬件资源和时间来配置,并且可能会导致…

leetcode 255.用队列实现栈

255.用队列实现栈 不出意外大概率这几天都会更新 leetcode,如果没有做新的题,大概就会把 leetcode 之前写过的题整理(单链表的题目居多一点)出来写成博客 今天讲的题蛮容易出错的(注意传参啊,最好把队列的…

Java简易版 TCP协议一对一聊天

客户端 package 二十一章;import java.io.*; import java.net.Socket; import java.util.Date; import javax.swing.*;public class Server {private JFrame jf;private JButton jBsend;private JTextArea jTAcontent;private JTextField jText;private JLabel JLcontent;priv…

冒泡排序和直接选择排序(C/C++实现)

文章目录 冒泡排序(交换排序)基本思想特性总结代码实现 直接选择排序基本思想特性总结代码实现(优化,每次循环同时选择最小和最大的数) 冒泡排序(交换排序) 基本思想 基本思想:所谓交换,就是根…

【数据结构】循环队列

🦄个人主页:修修修也 🎏所属专栏:数据结构 ⚙️操作环境:Visual Studio 2022 目录 🎏队列顺序存储的不足 🎏循环队列的定义 🎏设计循环队列 结语 🎏队列顺序存储的不足 我们假设用一个可以存放为n个数据…

人工智能AIGC培训讲师叶梓介绍及AI强化学习培训提纲

叶梓,上海交通大学计算机专业博士毕业,高级工程师。主研方向:数据挖掘、机器学习、人工智能。历任国内知名上市IT企业的AI技术总监、资深技术专家,市级行业大数据平台技术负责人。个人主页:大数据人工智能AI培训讲师叶…

栈和队列的互相实现

用队列实现栈 OJ链接 请你仅使用两个队列实现一个后入先出(LIFO)的栈,并支持普通栈的全部四种操作(push、top、pop 和 empty)。 实现 MyStack 类: void push(int x) 将元素 x 压入栈顶。int pop() 移除并返…

Qexo博客后台管理部署

Qexo博客后台管理部署 个人主页 个人博客 参考文档 https://www.oplog.cn/qexo/本地部署 采用本地Docker部署管理本地Hexo 下载代码包 若无法下载使用科学工具下载到本地在上传到服务器 wget https://github.com/Qexo/Qexo/archive/refs/tags/3.0.1.zip# 解压 unzip Qexo…

Python 中检查一个数是不是另一个数的整数次幂

更多资料获取 📚 个人网站:ipengtao.com 在数学和计算中,确定一个数是否为另一个数的整数次幂是一个常见而重要的问题。例如,我们可能需要判断一个数是否是某个数的平方、立方或其他幂次。本文将探讨在Python中如何实现这一功能&…

算数运算符和算数表达式

基本算数运算符 算数运算符: (加法运算符或正值运算符)、-(减法运算符或负值运算符)、*(乘)、/(除)、%(求余数) 双目运算符: 双目…

【QED】小樱的问题

目录 题目描述输入格式输出格式 测试样例样例说明 思路核心代码 题目描述 在 f u f u fufu fufu乐园,每天都会有各种各样精彩的内容发生。就比如说,今天,小樱的米饭店开张啦! 为了吸引 f u f u fufu fufu们前来购买小樱的大米&a…

唱响主旋律——建行江门市分行推动服务实体经济高质量发展

建行江门市分行主动对接当地战略部署,在侨乡热土踏歌而行,全力当好服务实体经济的主力军和维护金融稳定的压舱石,在助力再造一个现代化新江门上贡献建行力量。 输血实体 为实体经济服务是金融的天职。建行江门市分行积极发挥在重大基建领域…