Vue3

2024-10-26

Front-End

0 0

Node.js 环境安装

Node 版本选择

下载地址：https://nodejs.org/en/download

Windows11 安装 Node.js 参考步骤

切换镜像测试

1# 切换镜像源
2npm config set registry https://registry.npmmirror.com
3
4# 查看是否生效
5npm config get registry
6
7# 进行安装测试
8npm install -g express

VScode（Visual Studio Code）

下载地址：https://code.visualstudio.com/Download

Vue 官网

快速上手

通过 CDN 使用 Vue

 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>Document</title>
 7    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
 8</head>
 9<body>
10    <div id="app">
11      <button @click="clickCount">{{ count }}</button>
12      {{ message }}
13    </div>
14
15    <script type="module">
16        const {createApp, ref} = Vue;
17
18        createApp({
19          setup() {
20            const message = ref('Hello Vue!')
21            let count = ref(0);
22            let clickCount = () => count.value++;
23            return {
24              message,
25              count,
26              clickCount,
27            };
28          },
29        }).mount('#app')
30      </script>
31</body>
32</html>

官方命令行创建 Vue3 项目

1C:\Users\chao1\Desktop\程书远>cd C:\Users\chao1\Desktop\程书远\vue3
2
3C:\Users\chao1\Desktop\程书远\vue3>npm create vue@latest

npm : 无法加载文件 D:...\nodejs\npm.ps1，因为在此系统上禁止运行脚本

管理员权限打开 Visual Studio Code

 1PS C:\Users\chao1\Desktop\程书远\vue3\vue3-test\src> cd ..
 2PS C:\Users\chao1\Desktop\程书远\vue3\vue3-test> npm install
 3PS C:\Users\chao1\Desktop\程书远\vue3\vue3-test> npm run dev 
 4
 5> vue3-test@0.0.0 dev
 6> vite
 7
 8
 9  VITE v5.4.10  ready in 640 ms
10
11  ➜  Local:   http://localhost:5173/
12  ➜  Network: use --host to expose
13  ➜  press h + enter to show help

Vite 创建 Vue3 项目

1C:\Users\chao1\Desktop\程书远>cd C:\Users\chao1\Desktop\程书远\vue3
2
3C:\Users\chao1\Desktop\程书远\vue3>npm create vite@latest
4
5PS C:\Users\chao1\Desktop\程书远\vue3\vue-vite-test> npm install
6
7PS C:\Users\chao1\Desktop\程书远\vue3\vue-vite-test> npm run dev

模板语法

文本插值

1const soulboy = "超哥"
2<span>Message: {{ msg }}</span>

插入 HTML

1<p>插值语法插入html: {{ <span style="color: red">哈哈哈</span> }}</p>
2<p>v-html指令: <span v-html="rawHtml">哈哈哈</span></p>

Attribute 绑定
在标签上绑定一个属性

1<div v-bind:id="xd"></div>
2
3<div :id="xd"></div>
4
5<button :disabled="isDisabled"> 按钮 </button>
6
7<a :href="https://abc1024.tech" target="_blank"> abc1024 </a>

Vue3 框架当中如何实现响应式模板语法

ref()

 1<script setup>
 2import {ref} from "vue";
 3const count = ref(0);
 4console.log(count.value);
 5</script>
 6
 7
 8<template>
 9  <div @click="count++">当前的计数器:{{ count }}</div>
10</template>

作者：Soulboy