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

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

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

相关文章

根据应聘者的姓名和所学专业判断是否需要这样的程序设计人员

一、程序分析 导入Scanner函数,分别输入应聘者的姓名和应聘者所学的程序设计语言。 二、具体代码 import java.util.Scanner; public class Recruitment {public static void main(String[] args){try (Scanner scan new Scanner(System.in)) {System.out.prin…

Spring Boot 3 整合 Mybatis-Plus 实现动态数据源切换实战

🚀 作者主页: 有来技术 🔥 开源项目: youlai-mall 🍃 vue3-element-admin 🍃 youlai-boot 🌺 仓库主页: Gitee 💫 Github 💫 GitCode 💖 欢迎点赞…

m_map导入本地地形数据

m_map绘制地形图时,虽然自带有1的地形图以及从NOAA下载的1分的地形图(详见:Matlab下地形图绘图包m_map安装与使用),但有时需要对地形图分辨率的要求更高,便无法满足。 此时,需要导入本地地形数…

算法Day22 星南二楼(最长升序子序列)

星南二楼(最长升序子序列) Description Input Output Sample 代码 import java.util.*;public class Main {public static void main(String[] args) {Scanner sc new Scanner(System.in);int n sc.nextInt();int[] grid new int[n];for(int j0;j&l…

postman接口自动化测试

Postman除了前面介绍的一些功能,还有其他一些小功能在日常接口测试或许用得上。今天,我们就来盘点一下,如下所示: 1.数据驱动     想要批量执行接口用例,我们一般会将对应的接口用例放在同一个Collection中&#xf…

unity 2d 入门 飞翔小鸟 Cinemachine 镜头跟随小鸟 多边形碰撞器 解决镜头不会穿模问题(十二)

1、安装 window->package manager 2、创建Cinemachine 右键->Cinemachine->2D Carmera 3、创建空对象和多边形控制器如图 记得勾选 is Trigger 空对象位置记得要和小鸟保持一致,不然等下写完脚本后,镜头一开始会移动一下 4、将多边形触…

代码随想录算法训练营第四十天|139.单词拆分,多重背包,背包问题

139. 单词拆分 - 力扣(LeetCode) 给你一个字符串 s 和一个字符串列表 wordDict 作为字典。请你判断是否可以利用字典中出现的单词拼接出 s 。 注意:不要求字典中出现的单词全部都使用,并且字典中的单词可以重复使用。 示例 1&a…

【Delphi】FMX开发 ios 和 android 异同点(踩坑记)

目录 一、前言 二、补充下基础知识 1. APP程序事件:TApplicationEvent 2. APP内置Web服务器或者UDP服务端或者TCP服务端 三、iOS 和 android 平台的不同点 1. TApplicationEvent的不同点:以下不同点,请仔细阅读! 2. APP内置…

十八、FreeRTOS之FreeRTOS任务通知

本节需要掌握以下内容: 1、任务通知的简介(了解) 2、任务通知值和通知状态(熟悉) 3、任务通知相关API函数介绍(熟悉) 4、任务通知模拟信号量实验(掌握) 5、任务通知…

智能无人零售:革新零售消费体验的未来

智能无人零售:革新零售消费体验的未来 在当今数字化时代,智能无人零售正以惊人的速度改变着我们的购物方式和消费体验。这一新兴领域的发展,为消费者带来了前所未有的便利和个性化选择。 智能无人零售是指利用先进的智能技术和自动化系统&…

【面试题:对象引用在内存中存在何处?基于何种计算机原理获取对象的值?】

嗨,小伙伴们!小米在这里啦,今天给大家分享一个超有趣的话题——面试题:对象引用是存在内存哪,基于什么计算机原理获取对象的值?废话不多说,让我们一起深入了解一下这个充满技术魅力的问题吧&…

Java 安全框架shiro初探之一

1.Java安全框架除了spring家族另一个就是shiro框架 不过最近还有一个国产框架很好用:Sa-Token 添加链接描述,想了解的小伙伴可以去look look shiro 官方文档 (https://shiro.apache.org/) 1. 学习教程 参考 (https://www.w3cschool.cn/shiro/) Apac…

2024济南大健康展会,第六届中国国际健康产业博览会5月举办

大力发展全国健康事业 助力健康中国行动战略 DJK 2024第6届中国(济南)国际大健康产业博览会 The 2024 sixth China (Jinan) International Big Health Industry Expo 时间:2024年05月27日—29日 场馆:中国济南黄河国际会展中心 …

JavaScript-节点操作

节点操作 DOM节点 DOM节点:DOM树里每一个内容都称之为节点 节点类型: 元素节点 所有的标签 比如body、divhtml时跟节点 属性节点 所有的属性,比如href 文本节点 所有的文本 其他 查找节点 节点的关系:针对的找亲戚返回的都是…

java_springboot_ssm流浪宠物救助报名管理系统

用户: 注册登录 宠物百科:提供一些养宠物的专业知识、养宠前的注意事项等等 宠物信息:包括宠物图片、品种、性别、年龄、疫苗、领取要求等内容 宠物领养:领养人自己的详细住址、收入情况、有无养过宠物的记录(有则出示…

人工智能原理复习--搜索策略(二)

文章目录 上一篇启发式搜索与或图搜索博弈下一篇 上一篇 人工智能原理复习–搜索策略(一) 启发式搜索 提高一般图搜索效率的关键是优化OPEN表中节点的排序方式 最理想的情况是每次排序OPEN表表首n总在解答路径上 全局排序–对OPEN表中的所有节点进行…

mysql面试题——MVCC

一:什么是MVCC? 多版本并发控制,更好的方式去处理读-写冲突,就是为了查询一些正在被另一个事务更新的行,并且可以看到它们被更新之前的值,这样在做查询的时候就不用等待另一个事务释放锁。 二&#xff1a…

万界星空科技mes系统中看板管理

我们很多企业现在都有大屏,那到底万界星空科技低代码云mes系统管理中看板管理有什么作用?我总结了几条: 1.提高车间的生产效率 2.有效的监控设备运行状况 3.控制生产线运行 4.增加和改善用户体验 5.提高工作效率和工作安全性

Zabbix监控腾讯云VPC

一、简介 私有网络(Virtual Private Cloud,VPC)是腾讯云上一块由用户自定义的逻辑隔离网络空间,为云服务器、云数据库等资源提供安全可控的网络环境。通过构建逻辑隔离的、用户自定义配置的网络空间,用户能够提升其云…

WIN11家庭中文版使用ENSP+VirtualBox启动AR失败40错误+未完全关闭hyper-V,以及安装VirtualBox兼容性问题

使用版本:eNSP 1.3.00.100VirtualBox 5.2.44WinPcap_4_1_3Wireshark最新版。 win11系统最好按照上述版本安装,VirtualBox不要安装更高版本,否则可能出现不兼容情况,Wireshark版本要求还好,安装顺序是VirtualBox 5.2.4…