一，Vue 框架的快速搭建

以下项目实现需要的环境，node.js, vscode或者idea

创建一个空白文件夹

在文件夹里面打开cmd（命令提示符）

开始vue工程的创建

Vue工程的创建

安装vue3官方文档：快速上手 | Vue.js (vuejs.org)（如有需要可以进行阅读，我下面的教程也是根据官方的使用文档来的，如果你想快点开始请看下文）

快速安装的一些安装镜像配置

输入，点击仍然粘贴，然后一定一定要按Enter,不然最后一个命令不执行

npm config set registry https://registry.npm.taobao.org 
npm cache clean --force 
npm config set strict-ssl false

输入，点击仍然粘贴，然后一定一定要按Enter,不然最后一个命令不执行

使用 Vite 创建 Vue 3 项目

Vite 是新一代的构建工具，推荐用于 Vue 3 项目的开发。

步骤：

  1. 安装 vue
    通过 npm：
npm create vue@latest

进行一些选择，中间只有Vue Router是选择：是

其他都是：否

  1. 安装依赖
cd vue
npm install
  1. 启动项目
npm run dev

项目启动后，Vite 会自动打开浏览器并显示默认的 Vue 3 项目页面

使用diea去打开Vue项目，对项目里面的这些文件（蓝色的标注文件）进行删除（点击键盘上的delete）

（你按住ctrl也可以连续选择）

删除下图的文件

将下面几个文件进行整理

App.vue文件

<template>
  <RouterView />
</template>

在router里面的index.js文件：

import { createRouter, createWebHistory } from 'vue-router'


const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {path: '/', name: 'home', component: () => import('../views/Home.vue')

    }
  ]
})

export default router

main.js文件

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)

app.use(router)

app.mount('#app')

在你已经对html,css,javascript已经有一个系统的学习的基础上，了解vue的一些语法

模板语法：Vue 使用 HTML 模板语法来渲染数据。

<div> {{ message }} </div>

这里的 是 Vue 的插值语法，用来显示变量 message 的值。

渲染数据的示意教程：

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

const data =reactive({
  a: 111,
  b: 222

})
</script>

<template>
  <div class="card" style="text-align: center">
    <h1>Home</h1>
    {{data.a}}
    {{data.b}}
  </div>
  <main>
    <TheWelcome />
  </main>
</template>

运行结果：

tips:你可能见过这种写法来定义数据：

const a = ref(1)
const b = ref(2)

这种写法是非响应式的，而且写一个数据就要写一句ref语句很麻烦，也要导入包（ref包）

推荐reactive响应式的定义数据

指令：Vue 提供了一些指令，用来绑定数据和 HTML 属性。

- `v-model`：实现双向数据绑定，常用于表单元素。

<input v-model="inputValue">

v-model实现双向数据绑定示意教程

代码

<div class="card" style="text-align: center; padding: 100px">
          <input type="text" v-model="data.a">
</div>

位置写法：

运行结果：

- `v-if`**、**`v-else`** 和 **`v-else-if`：条件渲染，控制元素的显示与隐藏。

<p v-if="isVisible">This is visible</p>

<p v-else>This is hidden</p>

控制语句教程

<div >
  <span style="color: blue" v-if ="data.b === 222">显示此处</span>
  <span style="color: red" v-else>不显示此处</span>
  </div>

- `v-for`：列表渲染，用于循环数组。

<ul>
  <li v-for="item in items" :key="item.id">{{ item.name }}</li>

</ul>

示意教程：

<div  style=" display: flex; padding: 100px">
  <div class="card" style="justify-content: space-around ; background-color: greenyellow;font-size: 33px;margin-right: 10px">
    <span v-for="item in data.arr" >{{item}}</span>
  </div>
</div>

运行结果：

进阶v-for

利用选择器进行进阶操作：

<div style=" display: flex; padding: 100px">
  <select style="width: 200px;height: 40px;font-size: 20px">>
    <option v-for="item in data.arr" :value="item">{{item}}</option>
  </select>
</div>

事件绑定：使用 v-on 绑定事件，缩写为 @。例如点击按钮触发事件：

<button @click="handleClick">Click me</button>

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


const data =reactive({
  a: 111,
  b: 222,
  c:333,
  arr:[1,2,3,4,5]
})
const handle = () => {
  alert("点击成功")
}

</script>

<template>

  <div class="card" style="text-align: center">
    <h1>Home</h1>
    {{data.a}}
    {{data.b}}
  </div>
  <div >
    <span style="color: blue" v-if ="data.b === 222">显示此处</span>
    <span style="color: red" v-else>不显示此处</span>
    </div>
  <div class="card" style="text-align: center; padding: 20px">
            <input type="text" v-model="data.a">
  </div>
  <div  style=" display: flex; padding: 20px">
    <div class="card" style=" background-color: greenyellow;font-size: 33px;margin-right: 10px">
      <span v-for="item in data.arr" >{{item}}</span>
    </div>
  </div>
  <div style=" display: flex; padding: 20px">
    <select style="width: 200px;height: 40px;font-size: 20px">>
      <option v-for="item in data.arr" :value="item">{{item}}</option>
    </select>
  </div>
  <button  @click="handle">点击我</button>
</template>

运行结果：

v-bind：绑定 HTML 属性，缩写为 :。例如绑定图片的 src：(缩写为 ： 就是这个冒号)

<img :src="imageSrc">

代码示意：

<template>
<div style="text-align: center">
    <img :src="data.img" alt="" style="width: 200px;height: 200px">
  </div>
  </template>
  <script setup>
    const data =reactive({
  a: 111,
  b: 222,
  c:333,
  arr:[1,2,3,4,5],
  img: 'https://bu.dusays.com/2024/10/18/6711eeeba4f6c.jpg'
})
  </script>