Vue.js前端框架教程1：Vue应用启动和Vue组件

文章目录

        • Vue 应用
          • Vue 应用的主要组成部分：
          • 启动 Vue 应用：
        • Vue组件
          • 基础组件
          • 组件注册
          • 父子组件
          • 组件插槽（Slots）
          • 动态组件和 `keep-alive`

Vue 应用

Vue 应用由几个主要部分组成，每个部分都有其特定的角色和职责。以下是 Vue 应用的主要组成部分以及如何启动一个 Vue 应用的介绍：

Vue 应用的主要组成部分：

  1. Vue实例（Vue Instance）：

    • Vue 应用的核心，所有的 Vue 功能都是围绕着 Vue 实例展开的。
    • 通过 new Vue({ ... }) 创建，其中大括号中的内容称为选项对象，可以包含数据、模板、方法等。

  2. 模板（Template）：

    • Vue 实例的 template 选项定义了应用的 HTML 结构。
    • 使用声明式渲染，允许你将 DOM 操作逻辑分离到 JavaScript 代码中。

  3. 数据（Data）：

    • Vue 实例的 data 选项定义了应用的数据模型。
    • Vue 实例的数据是响应式的，当数据变化时，视图会自动更新。

  4. 方法（Methods）：

    • Vue 实例的 methods 选项定义了应用的行为。
    • 方法可以响应用户交互，如点击事件，并可以更改数据。

  5. 生命周期钩子（Lifecycle Hooks）：

    • Vue 实例的不同生命周期阶段会触发不同的钩子函数。
    • 例如 created、mounted、updated 和 destroyed 等。

  6. 组件（Components）：

    • Vue 的组件系统允许你将应用分解成独立、可复用的组件。
    • 组件有自己的模板、数据和方法。

  7. 指令（Directives）：

    • Vue 提供了一系列内置指令，如 v-model、v-if、v-for 等。
    • 指令可以用于在模板中将 DOM 元素绑定到底层 Vue 实例的数据上。

  8. 插件（Plugins）：

    • Vue 插件可以添加全局功能或通过全局方法、属性或组件扩展 Vue 的功能。
    • 例如 Vue Router、Vuex 和 Vue CLI 都是插件。
启动 Vue 应用：
  1. 通过 CDN：
    • 直接在 HTML 文件中通过 <script> 标签引入 Vue.js。
    • 创建一个 Vue 实例并挂载到 DOM 元素上。
<!DOCTYPE html>
<html>
<head><title>Vue 应用</title><script src="https://unpkg.com/vue@3.2.31/dist/vue.global.prod.js"></script>
</head>
<body><div id="app">{{ message }}</div><script>const { createApp } = Vue;createApp({data() {return {message: 'Hello, Vue!'};}}).mount('#app');</script>
</body>
</html>

  1. 通过 Vue CLI：

    • 使用 Vue CLI 创建项目，它提供了一个完整的开发环境，包括热重载、保存时 lint 检查等。
    • 通过运行 vue create my-project 创建新项目。
    • 进入项目目录，运行 npm run serve 或 yarn serve 启动开发服务器。

  2. 通过单文件组件（Single File Components, SFC）：

    • 在 Vue CLI 项目中，可以使用 .vue 文件组织组件。
    • 每个 .vue 文件包含 <template>、<script> 和 <style> 三个部分。
<template><div>{{ message }}</div>
</template><script>
export default {data() {return {message: 'Hello, Vue SFC!'};}
}
</script><style scoped>
div {color: green;
}
</style>
  1. 通过 Vite：
    • Vite 是一个现代化的前端构建工具，它利用了原生 ES 模块特性，提供了快速的冷启动和即时模块热更新。
    • 使用 Vite 创建项目，可以通过 npm create vite@latest 或 yarn create vite。
    • 运行 npm run dev 或 yarn dev 启动开发服务器。

通过这些方法，你可以快速启动和开发一个 Vue 应用。Vue 的灵活性和易用性使得从简单的项目到复杂的单页面应用的构建都变得简单快捷。

Vue组件

Vue 组件是 Vue.js 的核心概念之一，它是自定义的可复用的组件，可以包含自己的模板、逻辑和样式。组件系统是 Vue.js 的一个重要特性，它允许开发者将界面拆分成独立、可复用的小块，每一块都是一个带有独立功能的组件。

基础组件

在 Vue 中，一个组件可以简单地定义为一个包含 template、script 和 style 的 .vue 文件。以下是一个基础组件的例子：

<!-- MyComponent.vue -->
<template><div><h1>{{ message }}</h1><button @click="reverseMessage">反转消息</button></div>
</template><script>
export default {data() {return {message: 'Hello, Vue!'};},methods: {reverseMessage() {this.message = this.message.split('').reverse().join('');}}
}
</script><style scoped>
h1 {color: #42b983;
}
</style>
组件注册

在 Vue 应用中，你需要注册组件才能使用它们。可以在局部（单个文件）或全局注册组件。

  • 局部注册：
import MyComponent from './MyComponent.vue';export default {components: {MyComponent}
}
  • 全局注册：
import Vue from 'vue';
import MyComponent from './MyComponent.vue';Vue.component('my-component', MyComponent);
父子组件

Vue 组件可以创建父子关系，子组件可以通过 props 接收来自父组件的数据，并通过 $emit 向父组件发送事件。

  • 子组件（ChildComponent.vue）：
<template><div><p>{{ message }}</p><button @click="notifyParent">通知父组件</button></div>
</template><script>
export default {props: ['message'],methods: {notifyParent() {this.$emit('message-from-child', 'Hello from child!');}}
}
</script>
  • 父组件：
<template><div><child-component :message="parentMessage" @message-from-child="handleMessageFromChild" /></div>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent},data() {return {parentMessage: 'Message from parent'};},methods: {handleMessageFromChild(message) {console.log(message); // 输出：Hello from child!}}
}
</script>
组件插槽（Slots）

插槽是 Vue.js 提供的一种分发内容的机制，允许你将内容从父组件传递到子组件的模板中。

  • 子组件（ChildComponent.vue）：
<template><div><slot>默认内容</slot></div>
</template>
  • 父组件：
<template><child-component><p>这是通过插槽传递的内容</p></child-component>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent}
}
</script>
动态组件和 keep-alive

Vue 提供了 <component> 标签，允许你动态地切换不同的组件。

<template><component :is="currentComponent" />
</template><script>
export default {data() {return {currentComponent: 'ComponentA'};}
}
</script>

使用 keep-alive 可以缓存不活动的组件实例，避免重复创建和销毁组件的性能损耗。

<template><keep-alive><component :is="currentComponent" /></keep-alive>
</template>

Vue 组件是构建大型应用的基础，它们使得代码更加模块化、可维护和可复用。通过组合不同的组件，你可以构建出复杂的用户界面。

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

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

相关文章

【开源免费】基于SpringBoot+Vue.JS在线宠物用品交易网站（JAVA毕业设计）

【开源免费】基于SpringBoot+Vue.JS在线宠物用品交易网站（JAVA毕业设计）

本文项目编号 T 092 &#xff0c;文末自助获取源码 \color{red}{T092&#xff0c;文末自助获取源码} T092&#xff0c;文末自助获取源码 目录 一、系统介绍二、数据库设计三、配套教程3.1 启动教程3.2 讲解视频3.3 二次开发教程 四、功能截图五、文案资料5.1 选题背景5.2 国内…
阅读更多...
【Git 常用操作：pull push】

【Git 常用操作：pull push】

Git 基本概念 Git 是一个先进的开源的分布式版本控制系统&#xff0c;常用于管理工作内容、项目代码等功能。 Git 工作流程 图片来源&#xff1a;https://www.runoob.com/git/git-basic-operations.html 说明&#xff1a; workspace&#xff1a;工作区staging area&#xff…
阅读更多...
shell脚本的循环-----while和for循环

shell脚本的循环-----while和for循环

一、while 1.格式 while 条件表达式; do 命令 done 2.案例 &#xff1a; ping测试子网段的主机网段由用户输入&#xff0c;例如用户输入192.168.101 &#xff0c;则ping192.168.101.125 — 192.101.131 UP&#xff1a; /tmp/host_up.txt Down: /tmp/host_down.txt &#…
阅读更多...
内容与资讯API优质清单

内容与资讯API优质清单

作为开发者&#xff0c;拥有一套API合集是必不可少的。这个开发者必备的API合集汇集了各种实用的API资源&#xff0c;为你的开发工作提供了强大的支持&#xff01;无论你是在构建网站、开发应用还是进行数据分析&#xff0c;这个合集都能满足你的需求。你可以通过这些免费API获…
阅读更多...
maven-resources-production:ratel-fast: java.lang.IndexOutOfBoundsException

maven-resources-production:ratel-fast: java.lang.IndexOutOfBoundsException

Maven生产环境中遇到java.lang.IndexOutOfBoundsException的问题&#xff0c;尝试了重启电脑、重启IDEA等常规方法无效&#xff0c;最终通过直接重建工程解决了问题。 Rebuild Project 再启动OK
阅读更多...
[数据结构] 链表

[数据结构] 链表

目录 1.链表的基本概念 2.链表的实现 -- 节点的构造和链接 节点如何构造? 如何将链表关联起来? 3.链表的方法(功能) 1).display() -- 链表的遍历 2).size() -- 求链表的长度 3).addFirst(int val) -- 头插法 4).addLast(int val) -- 尾插法 5).addIndex -- 在任意位置…
阅读更多...
深度学习0-前置知识

深度学习0-前置知识

一、背景 AI最大&#xff0c;它的目的是通过让机器模仿人类进而超越人类&#xff1b; ML次之&#xff0c;它是AI的一个分支&#xff0c;是让机器模仿人类的一种方法。开发人员用大量数据和算法“训练”机器&#xff0c;让机器自行学会如何执行任务&#xff0c;它的成功取决于…
阅读更多...
基于Python Scrapy的豆瓣Top250电影爬虫程序

基于Python Scrapy的豆瓣Top250电影爬虫程序

Scrapy安装 Python实现一个简单的爬虫程序&#xff08;爬取图片&#xff09;_python简单扒图脚本-CSDN博客 创建爬虫项目 创建爬虫项目&#xff1a; scrapy startproject test_spider 创建爬虫程序文件&#xff1a; >cd test_spider\test_spider\spiders >scrapy g…
阅读更多...
LabVIEW中的“Synchronize with Other Application Instances“

LabVIEW中的“Synchronize with Other Application Instances“

在LabVIEW中&#xff0c;“Synchronize with Other Application Instances”是一个常见的提示或错误&#xff0c;通常出现在尝试并行运行多个LabVIEW实例时&#xff0c;特别是当你打开多个VI或项目时。这个问题可能影响程序的执行流程&#xff0c;导致不同实例之间的数据同步或…
阅读更多...
【Linux】AlmaLinux 9.5虚拟机安装过程记录分享

【Linux】AlmaLinux 9.5虚拟机安装过程记录分享

关于AlmaLinux系统感兴趣的&#xff0c;可以去我之前写的另外一篇博客里面看看&#xff1a; https://blog.csdn.net/cnskylee/article/details/143142690 语言&#xff0c;选择【简体中文&#xff08;中国&#xff09;】&#xff0c;点击【继续】&#xff0c;进入后续设置 在…
阅读更多...
深度学习——现代卷积神经网络（七）

深度学习——现代卷积神经网络（七）

深度卷积神经网络 学习表征 观察图像特征的提取⽅法。在合理地复杂性前提下&#xff0c;特征应该由多个共同学习的神经⽹络层组成&#xff0c;每个层都有可学习的参数。 当年缺少数据和硬件支持 AlexNet AlexNet⽐相对较⼩的LeNet5要深得多。 AlexNet由⼋层组成&#xff1a…
阅读更多...
时间管理系统｜Java｜SSM｜JSP｜

时间管理系统｜Java｜SSM｜JSP｜

【技术栈】 1⃣️&#xff1a;架构: B/S、MVC 2⃣️&#xff1a;系统环境&#xff1a;Windowsh/Mac 3⃣️&#xff1a;开发环境&#xff1a;IDEA、JDK1.8、Maven、Mysql5.7 4⃣️&#xff1a;技术栈&#xff1a;Java、Mysql、SSM、Mybatis-Plus、JSP、jquery,html 5⃣️数据库可…
阅读更多...
20241217使用M6000显卡在WIN10下跑whisper来识别中英文字幕

20241217使用M6000显卡在WIN10下跑whisper来识别中英文字幕

20241217使用M6000显卡在WIN10下跑whisper来识别中英文字幕 2024/12/17 17:21 缘起&#xff0c;最近需要识别法国电影《地下铁》的法语字幕&#xff0c;使用 字幕小工具V1.2【whisper套壳/GUI封装了】 无效。 那就是直接使用最原始的whisper来干了。 当你重装WIN10的时候&#…
阅读更多...
PostgreSQL技术内幕21：SysLogger日志收集器的工作原理

PostgreSQL技术内幕21：SysLogger日志收集器的工作原理

0.简介 在前面文章中介绍了事务模块用到的事务日志结构和其工作原理&#xff0c;本文将介绍日志的另一个部分&#xff0c;操作日志&#xff0c;主要去描述SysLogger日志的工作原理&#xff0c;流程以及其中关键的实现&#xff1a;日志轮转&#xff0c;刷盘性能问题等&#xff…
阅读更多...
GUI07-学工具栏，懂MVC

GUI07-学工具栏，懂MVC

MVC模式&#xff0c;是天底下编写GUI程序最为经典、实效的一种软件架构模式。当一个人学完菜单栏、开始学习工具栏时&#xff0c;就是他的一生中&#xff0c;最适合开始认识 MVC 模式的好时机之一。这节将安排您学习&#xff1a; Model-View-Controller 模式如何创建工具栏以及…
阅读更多...
如何编辑调试gradle，打印日志

如何编辑调试gradle，打印日志

在build.gradle.kts中输入 println("testxwg1 ") logger.lifecycle("testxwg2") logger.log(LogLevel.ERROR,"testxwg5") 点刷新就能看到打印日志了
阅读更多...
jvm栈帧中的动态链接

jvm栈帧中的动态链接

“-Xss”这一名称并没有一个特定的“为什么”来解释其命名&#xff0c;它更多是JVM&#xff08;Java虚拟机&#xff09;配置参数中的一个约定俗成的标识。在JVM中&#xff0c;有多个配置参数用于调整和优化Java应用程序的性能&#xff0c;这些参数通常以一个短横线“-”开头&am…
阅读更多...
怎么将pdf中的某一个提取出来？介绍几种提取PDF中页面的方法

怎么将pdf中的某一个提取出来？介绍几种提取PDF中页面的方法

怎么将pdf中的某一个提取出来&#xff1f;传统上&#xff0c;我们可能通过手动截取屏幕或使用PDF阅读器的复制功能来提取信息&#xff0c;但这种方法往往不够精确&#xff0c;且无法保留原文档的排版和格式。此外&#xff0c;很多时候我们需要提取的内容可能涉及多个页面、多个…
阅读更多...
TCP常见问题

TCP常见问题

文章目录 一、两种状态图二、常见问题1、MSL是什么 3、为何等待2MSL3、为何三次握手&#xff0c;不握手、握手一次、两次行吗4、为何四次挥手&#xff0c;三次行吗&#xff0c;两次行吗 一、两种状态图 四次挥手 二、常见问题 1、MSL是什么 MSL是Maximum Segment Lifetime的英…
阅读更多...
UG NX二次开发(C#)-机电概念设计-UIStyler中selection块选择信号等对象的过滤器设置

UG NX二次开发(C#)-机电概念设计-UIStyler中selection块选择信号等对象的过滤器设置

文章目录 1、前言2、创建机电概念设计的模型3、创建UIStyler4、在VS2022中创建NXOPEN CSHAP的工程5、设置信号与信号适配体的过滤器6、测试选择的对象1、前言 在UG NX二次开发过程中，经常会用到UIStyler中的Selection块，即是选择对象，选择对象由于其可以选择多种类型的对象…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023