Vue3响应式开发

Vue 是一款渐进式JavaScript框架，用于构建用户界面（UI），尤其擅长开发单页应用和交互式前端网页，vue官网http://vuejs.org/

先安装nodejs，将默认源改为淘宝镜像

复制代码

npm config set registry https://registry.npmmirror.com

打开vscode，安装Vue(Official)插件

创建Vue3工程

使用Vue官方脚手架（一套自动化工具，用于快速生成项目的基础结构和配置文件）

进入一个空的项目文件夹，在终端运行如下命令

复制代码

npm create vue@latest

后面开发过程中可再配置，现在先只安装第一个包

然后根据指令依次执行cd......

最后npm run dev

然后就可以在访问local地址浏览了

打开项目目录

node_modules目录是nodejs下载的一些依赖项，若拿别人的vue项目跑不起来，可删除该目标，重新npm install；

public目录下存放静态资源；

src目录存放代码；

index.html是访问入口页面；

每个.vue文件就是一个页面上的组件，组件可以嵌套使用

数据双向绑定

是Vue最为核心的功能，<template>中的页面数据和<script>中的脚本数据进行绑定，其中任何一个数据发生了变化，另一个数据也随之发生变化。让数据和显示分开

在vscode中打开项目文件夹，打开App.vue文件

做一个工资表单，终端运行npm run dev，Vite就会启动一个本地开发服务器，一旦关闭终端（或按 Ctrl+C），服务器就停止了

此时页面的基础元素已经有了

在script中创建数据

建立绑定关系，这样页面控件和值就绑定了

案例展示

html 复制代码

<template>
  <div>
    姓名：<input v-model="userName"/><br/>
    薪水：<input type="number" v-model="salary"/><br/>
    <button v-on:click="addSalary">提交</button><button @click="ChangeshowUserInfo">查看个人信息</button>
    <hr/>
    <div class="userInfo" v-show="showUserInfo">
      <h2>个人信息</h2>
      <p>年龄：<input type="number" v-model="userInfo.age"/></p>
      <p>性别：<input type="radio" value='1' v-model="userInfo.sex"/>男<input type="radio" value='1'/>女</p>
      <p>岗位：<select v-model="userInfo.department">
        <option value="dev">开发</option>
        <option value="test">测试</option>
        <option value="maintain">运维</option>
      </select></p>
      <p>技术：<span v-for="skill in userInfo.skills" :key="skill"></span></p>
      <p>新技术：<input v-model="newSkill"/><button @click="learnNewSkill">学习新技术</button></p>
      <p>个人技术汇总：{{ userInfo }}</p>
    </div>
  </div>
</template>
<script lang="ts">
  export default{
    data(){
      return{
        userName:'roy',
        salary:15000,
        userInfo:{
          age:0,
          sex:1,
          department:'',
          skills:['Java','python','vue']
        },
        newSkill:'',
        showUserInfo:false
      }
    },
    methods:{
      addSalary(){
        this.salary+=1000
      },
      learnNewSkill(){
        if(this.newSkill){
          this.userInfo.skills.push(this.newSkill)
        }
      },
      ChangeshowUserInfo(){
        this.showUserInfo=!this.showUserInfo
      }
    }
  }
</script>

<style scoped>
  .userInfo{
    background-color: aqua;
    width: 80%;
  }
  .userInfo span{
    background-color: yellow;
    margin-left: 10px;
    border: 1px;
    border-radius: 5px;
  }
</style>

可使用setup简写

html 复制代码

<template>
  <div>
    姓名：<input v-model="userName"/><br/>
    薪水：<input type="number" v-model="salary"/><br/>
    <button v-on:click="addSalary">提交</button>  
  </div>
</template>
<script setup lang="ts">
import {ref} from 'vue'

let userName=ref('roy')
let salary=ref(15000)
function addSalary(){
  salary.value+=1000
}

</script>

<style scoped></style>

没有this关键字，可将script里的内容移到其它文件

在src目录下创建components文件夹，里面创建MySalary.ts文件

这就是compositionAPI了，通过ref使得双向绑定

自定义组件

在components文件夹下新建一个MySalaryInfo.vue文件

html 复制代码

<template>
    姓名：<input v-model="userName"/><br/>
    薪水：<input type="number" v-model="salary"/>
</template>
<script lang="ts">
    export default{
        name:"SalaryInfo"
    }
</script>
<script setup lang="ts">
import { ref } from "vue"
let userName = ref('roy')
let salary = ref(15000)

// 将属性暴露出去
defineExpose({userName,salary})
</script>
<style>
</style>

然后在App.vue文件中引入组件

也可以父组件往子组件传数据

Vue-Router组件路由机制

Vue项目虽然只有index.html一个页面，但可以通过多路由机制实现多页面跳转的效果。

可以在创建Vue项目时选择引入，也可以使用如下命令手动安装

html 复制代码

npm install vue-router@4

然后在main.ts中引入组件

html 复制代码

import { createApp } from 'vue'
import App from './App.vue'
import { createRouter, createWebHistory } from 'vue-router'
import HomePage from '@/pages/HomePage.vue'
import AboutPage from '@/pages/AboutPage.vue'
import NewsPage from '@/pages/NewsPage.vue'

// 配置路由规则
const routes = [
    { path: "/home", component: HomePage },
    { path: "/about", component: AboutPage },
    { path: "/news", component: NewsPage },
]
// 创建路由器
const router = createRouter({
    history: createWebHistory(), // 路由工作模式
    routes
})
// 加载路由器
const app = createApp(App)
app.use(router)
app.mount('#app')

在src目录下创建pages文件夹，里面创建HomePage.Vue

html 复制代码

<template>
    首页
</template>
<script setup lang="ts">
</script>
<style>
</style>

AboutPage.vue

html 复制代码

<template>
    关于页
</template>
<script setup lang="ts">
</script>
<style>
</style>

NewsPage.vue

html 复制代码

<template>
    <ul>
        <li>新闻1</li>
        <li>新闻2</li>
        <li>新闻3</li>
    </ul>
</template>
<script setup lang="ts">
</script>
<style>
</style>

在页面上用时，还需在App.vue文件中添加两个标签

html 复制代码

<template>
  <div id="app">
    <h1>Hello App!</h1>
    <p>
      <!-- 路由链接 -->
      <RouterLink to="/home">首页</RouterLink>     
      <RouterLink :to="{path:'about'}">关于</RouterLink>
      <RouterLink to="/news">新闻</RouterLink>
    </p>
    <div class="content"> 
      <RouterView/>   
      <!-- 路由出口 -->
    </div>
  </div>
</template>
<script setup lang="ts">
</script>

<style scoped>
  a{
    margin: 10px;
  }
  .content{
    background: yellowgreen;
    width: 80%;
    height: 400px;
    border: 1px;
    border-radius: 10px;
  }
</style>

点击首页

RouterLink的replace属性决定是更新还是追加页面

Pinia集中式状态存储

状态是任意Vue页面之间共享的存储数据。

使用如下命令安装插件

html 复制代码

npm install pinia

然后在main.ts中引用

然后创建Store，可以理解为MySQL中的一个库，保存一部分数据。里面有三个概念：state数据，getter获取并返回数据，action阻止业务逻辑

在src目录下新建一个store文件夹，其中创建user.ts文件

html 复制代码

import { defineStore } from 'pinia'

export const userStore = defineStore("userStore", {
    actions: {
        changeUsername(value: string) {
            if (value && value.length < 10) {
                this.username += value
            }
        }
    },
    getters: {
        getUsername(): string {
            return this.username.toUpperCase()
        }
    },
    state() {
        return {
            username: '-'
        }
    },
})

然后在App.vue中引入使用

Element-Plus

ElementPlus是饿了么开源的一套基于Vue3的经典UI库，还在更新迭代的过程中。官网一个 Vue 3 UI 框架 | Element Plus

和之前的插件使用类似

总结

Vue 本质是"JS 的增强"

它没有改变 HTML/CSS
核心价值是简化数据与视图的同步（响应式）
如果页面没有动态数据变化，Vue 的优势就体现不出来

场景	原生 JS 的痛苦	Vue 的解法
表单双向绑定	监听 input → 手动更新变量 → 再手动更新其他元素	`<input v-model="name">` 自动同步
列表渲染	`for` 循环拼字符串 → `innerHTML` → 事件重绑	`<li v-for="item in list">` 自动管理
条件显示	`element.style.display = ...` 到处都是	`<div v-if="show">` 声明式控制
组件复用	复制粘贴 HTML + JS，改一处要改十处	`<MyCard :title="xxx" />` 一次定义，处处使用
状态共享	全局变量满天飞，数据混乱	Pinia 集中管理，清晰可预测