【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 💖 欢迎点赞…

1-5、JDK API文档

语雀原文链接 文章目录 jdk1.8中文.CHM JDK8中文在线文档:https://www.matools.com/api/java8Java11中文在线文档:https://www.matools.com/api/java11

CEEMDAN-Transformer时间序列预测实战完整代码数据可直接运行

项目视频讲解: CEEMDAN-Transformer时间序列预测实战完整代码数据_哔哩哔哩_bilibili 完整代码: import pandas as pd import numpy as np from sklearn.model_selection import train_test_split from sklearn.preprocessing import MinMaxScaler import torch import to…

ROS-log功能区别

ROS使用rosout包来记录各个节点的log信息,通常这些log信息是一些可以读懂的字符串信息,这些信息一般用来记录节点的运行状态。 ROS有五种不同类型的log信息,分别为:logdebug、loginfo、logwarn、logerr、logfatal。 等级由低到高&…

GO设计模式——6、原型模式(创建型)

目录 原型模式(Prototype Pattern) 优缺点 使用场景 注意事项 代码实现 原型模式(Prototype Pattern) 原型模式(Prototype Pattern)是用于创建重复的对象,同时又能保证性能。这种类型的设计…

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…

selenium火狐避免被检测向ChartGPT的有效提问

问题描述 当我们问 ChartGPT 如果解决 selenium 被屏蔽问题的时候,它总是回答解决问题的方向,没有给出具体怎么用代码实现。 问题原因 1、可能是描述不清晰 没有告诉GPT使用什么编程语言,没有说明使用火狐还是谷歌浏览器,没有…

深入解析NK模型:复杂适应性系统的演化之谜

NK模型是一种用于研究复杂适应性系统的数学模型,最初由生物学家 Stuart Kauffman 于1993年提出。这模型的目的是模拟生物进化过程中的复杂性,并通过网络结构和相互作用来研究解空间的性质。 目录 一、NK模型介绍1. 模型基础2. 模型参数3. 适应性函数4..…

ubuntu里安装docker

1、更新软件包 在终端中执行以下命令来更新Ubuntu软件包列表和已安装软件的版本: sudo apt update sudo apt upgrade 2、安装docker依赖 Docker在Ubuntu上依赖一些软件包。执行以下命令来安装这些依赖: apt-get install ca-certificates curl gnupg lsb-release 3、添加Do…

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内置…

AI 绘画 | Stable Diffusion 人物换脸

前言 这篇文章教会你如何使用Stable Diffusion WEB UI扩展插件ReActor轻松实现图片中的人物换脸。ReActor 是 Stable Diffusion WebUI 的扩展,它允许在图像中非常简单准确地进行人脸替换(人脸交换)。 安装环境准备 安装 Visual Studio 2022(例如,社区版本 - 需要此步骤来…

十八、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…