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

news2024/11/16 6:29:27

目录

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_动画

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【Linux】:线程(二)互斥

互斥与同步 一.线程的局部存储二.线程的分离三.互斥1.一些概念2.上锁3.锁的原理4.死锁 一.线程的局部存储 例子 可以看到全局变量是所有线程共享的,如果我们想要每个线程都单独访问g_val怎么办呢?其实我们可以在它前面加上__thread修饰。 这就相当于把g…

Java面向对象实践小结(含面试题)

继承 作用 提高了代码的复用性。让类与类之间产生了关系。有了这个关系,才有了多态的特性。 代码示范 父类代码 public class Parent {public void say() {System.out.println("父类的say方法");} }子类代码,继承父类,也就拥有…

如何确认网站是否有漏洞,如何找出网站存在的漏洞,找到漏洞该如何处理

如何确认网站或者服务器是否有漏洞 判断一个网站是否是存在漏洞的方法: 1.可以借助德迅云安全漏洞扫描功能来检查漏洞。 2.打开德迅云安全首页,点击最上面导航栏中的“安全产品”。 3.滑到“漏洞扫描”,选择“产品价格”服务。 4.选择您需…

【图像分类】【深度学习】【Pytorch版本】 DenseNet模型算法详解

【图像分类】【深度学习】【Pytorch版本】 DenseNet模型算法详解 文章目录 【图像分类】【深度学习】【Pytorch版本】 DenseNet模型算法详解前言DenseNet讲解Dense Block(稠密块)Dense Layer(稠密层)Transition Layer 过渡层DenseNet模型结构 DenseNet Pytorch代码完整代码附加…

DM8/达梦 数据库管理员使用手册详解

1.1DM客户端存放位置 Windows:DM数据库安装目录中tool文件夹和bin文件夹中。 Linux:DM数据库安装目录中tool目录和bin目录中。 1.2DM数据库配置助手 1.2.1Windows创建数据库 打开数据库配置助手dbca 点击创建数据库实例 选择一般用途 浏览选择数据库…

【基于大数据的人肥胖程度预测分析与可控策略】

基于大数据的人肥胖程度预测分析与可控策略 前言数据获取与清洗数据挖掘与分类建模1. K-means聚类2. 层次聚类3. DBSCAN4. 分类建模 数据可视化模型肥胖程度预测分析与可控策略结语 前言 随着现代生活方式的改变,肥胖问题逐渐成为全球性的健康挑战。为了更好地理解…

湖科大计网:计算机网络概述

一、计算机网络的性能指标 一、速率 有时候数据量也认为是以10为底的,看怎么好算。(具体吉大考试用什么待商榷) 二、带宽 在模拟信号系统中带宽的含义,本课程中用到的地方是:香农定理和奈奎斯特定理公式的应用之中。 …

未用的引脚如何处理?--持续更新中

前言: 随着集成电路规模的越来越大,如今的大规模芯片都集成了很多功能模块,但是在实际的电路设计中我们又不可能把芯片所有的功能模块(或者说接口)全部用上,因此总会有或多或少的管脚会“用不上”,那这些未用的管脚一般…

maven上传jar包到代码仓库

一、前言 一般被引用的包开发都是要求放在nexus仓库中&#xff0c;等到有jar包服务需要引用该包的时候直接从nexus仓库中获取即可&#xff0c;实现了该引用包的公用 二、代码配置 编辑代码中的pom.xml文件配置 vi pom.xml <distributionManagement><repository>&…

网络安全行业大模型调研总结

随着人工智能技术的发展&#xff0c;安全行业大模型SecLLM&#xff08;security Large Language Model&#xff09;应运而生&#xff0c;可应用于代码漏洞挖掘、安全智能问答、多源情报整合、勒索情报挖掘、安全评估、安全事件研判等场景。 本文首先介绍汇总了安全行业的大模型…

Java、JDK、JRE、JVM

Java、JDK、JRE、JVM 一、 Java 广义上看&#xff0c;Kotlin、JRuby等运行于Java虚拟机上的编程语言以及相关的程序都属于Java体系的一员。从传统意义上看&#xff0c;Java社区规定的Java技术体系包括以下几个部分&#xff1a; Java程序设计语言各种硬件平台上的Java虚拟机实…

Linux 进程终止

引入 在写 C 语言程序的时候&#xff0c;我们必写的结构就是&#xff1a; int main() {return 0; }在学习 C 语言的时候&#xff0c;我们好像并没有讨论过这个 return 0 有什么用&#xff0c;是干什么的&#xff01;return 1 可以吗&#xff1f;return 的返回值给谁看&#x…

英伟达危机大爆发!一夜之间,四面楚歌

今年以来&#xff0c;AI大模型明争暗斗、百花齐放。 但不管各种大模型打的有多厉害&#xff0c;很多人都认为“卖铲子”的英伟达才是最大赢家。 看一下英伟达今年的股票就知道英伟达赚的是多么盆满钵满。 英伟达CEO黄仁勋在发布 H200显卡时&#xff0c;应该是今年最意气风发的…

Swagger2的使用

手写Api文档的几个痛点&#xff1a; 文档需要更新的时候&#xff0c;需要再次发送一份给前端&#xff0c;也就是文档更新交流不及时。 接口返回结果不明确 不能直接在线测试接口&#xff0c;通常需要使用工具&#xff0c;比如postman 接口文档太多&#xff0c;不好管理 Sw…

Linux:进程优先级与命令行参数

目录 1.进程优先级 1.1 基本概念 1.2 查看系统进程 1.3 修改进程优先级的命令 2.进程间切换 2.1 相关概念 2.2 Linux2.6内核进程调度队列&#xff08;了解即可&#xff09; 3.命令行参数 1.进程优先级 1.1 基本概念 cpu资源分配的先后顺序&#xff0c;就是指进程的优…

探秘机器学习核心逻辑:梯度下降的迭代过程 (图文详解)

一 需求解函数 f() 和 g()函数分别为求y值和求导数的函数。 目的&#xff1a;求该函数的最小值&#xff1a; 代码&#xff1a; import numpy as np import matplotlib.pyplot as plt f lambda x : (x - 3.5) ** 2 - 4.5 * x 10 g lambda x : 2 * (x - 3.5) - 4.5x np.l…

class064 Dijkstra算法、分层图最短路【算法】

class064 Dijkstra算法、分层图最短路【算法】 算法讲解064【必备】Dijkstra算法、分层图最短路 code1 743. 网络延迟时间 // Dijkstra算法模版&#xff08;Leetcode&#xff09; // 网络延迟时间 // 有 n 个网络节点&#xff0c;标记为 1 到 n // 给你一个列表 times&…

一个或多个筛选器或者Listeners启动失败 的问题

核心&#xff1a; 这个就是有好多情况会导致这个问题&#xff0c;像是文件找不到&#xff0c;缺少jar包等原因&#xff0c;还是要看报错的具体信息。 报错情况&#xff1a; 一个或多个listeners启动失败&#xff0c;更多详细信息查看对应的容器日志文件 由于之前的错误&#x…

Flutter视频播放器在iOS端和Android端都能实现全屏播放

Flutter开发过程中&#xff0c;对于视频播放的三方组件有很多&#xff0c;在Android端适配都挺好&#xff0c;但是在适配iPhone手机的时候&#xff0c;如果设置了UIInterfaceOrientationLandscapeLeft和UIInterfaceOrientationLandscapeRight都为false的情况下&#xff0c;无法…

基于lambda简化设计模式

前言 虽说使用设计模式可以让复杂的业务代码变得清晰且易于维护&#xff0c;但是某些情况下&#xff0c;开发可能会遇到我为了简单的业务逻辑去适配设计模式的情况&#xff0c;本文笔者就以四种常见的设计模式为例&#xff0c;演示如何基于lambda来简化设计模式的实现。 策略…