vue入门基础学习

Vue.js(Vue) 是什么，做什么

Vue是基于 Javascript 前端框架，主要用于开发网页，管理系统和 Web 应用

Vue的特点是简单易学，组件化开发，响应式更新页面。

Vue和传统 JavaScript 的区别

传统 JavaScript 操作网页：

<h1 id="title">Hello</h1>
<button onclick="changeText()">修改文字</button>

<script>
  function changeText() {
    document.getElementById("title").innerText = "Hello Vue";
  }
</script>

vue:

<script setup>
import { ref } from "vue";

const message = ref("Hello");

function changeText() {
  message.value = "Hello Vue";
}
</script>

<template>
  <h1>{{ message }}</h1>
  <button @click="changeText">修改文字</button>
</template>

最大的区别就是，传统 JavaScript 通常需要手动操作 DOM，而 Vue 可以根据数据变化自动更新页面。

Vue项目结构

一个典型的 Vue 项目通常都包含以下资源：

vue-learning/
├── node_modules/       # 安装的依赖
├── public/             # 静态资源
├── src/ 				## 主要开发目录
│   ├── assets/         # 图片、CSS 等
│   ├── components/     # Vue 组件
│   ├── App.vue         # 根组件
│   └── main.js         # 程序入口
├── index.html
├── package.json        # 项目依赖与命令
└── vite.config.js      # Vite 配置

认识 .vue 文件

Vue 使用单文件组件（Single File Component，SFC）。

一个 .vue 文件通常由三个部分组成：

<script setup>
// JavaScript 逻辑
</script>

<template>
  <!-- HTML 页面结构 -->
</template>

<style scoped>
/* CSS 样式 */
</style>

创建第一个 Vue 项目

修改 src/App.vue 文件

<script setup></script>

<template>
  <h1 id="title-h1">Hello Vue 3!</h1>
  <h3 id="title-h3">欢迎来到我的第一个 Vue 项目。</h3>
  <p id="text">
    这是一个使用 Vue 3 创建的网页。
  </p>
</template>

<style scoped src="./assets/app.css"></style>

同时用一点点 css 基础给 vue 加点式样：

#title-h1{
    color: red;
}

#title-h3{
    color: rgb(131, 131, 12);
}

#text{
    color: blue;
}

.vue 文件中，这部分已经引用了它:

<style scoped src="./assets/app.css"></style>

提前学习，vue 中引用 css 的三种常见的方式：

方式	示例	作用范围
组件内部 CSS	<style scoped>...</style>	当前组件
外部组件 CSS	<style scoped src="./assets/app.css"></style>	当前组件
全局 CSS	import './assets/main.css'	整个项目