Vue3

2024-10-26

Front-End

0 0

Node.js环境安装

Node版本选择

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

Windows11安装Node.js参考步骤

切换镜像测试

# 切换镜像源
npm config set registry https://registry.npmmirror.com

# 查看是否生效
npm config get registry

# 进行安装测试
npm install -g express

VScode（Visual Studio Code）

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

Vue官网

快速上手

通过CDN使用Vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
      <button @click="clickCount">{{ count }}</button>
      {{ message }}
    </div>

    <script type="module">
        const {createApp, ref} = Vue;

        createApp({
          setup() {
            const message = ref('Hello Vue!')
            let count = ref(0);
            let clickCount = () => count.value++;
            return {
              message,
              count,
              clickCount,
            };
          },
        }).mount('#app')
      </script>
</body>
</html>

官方命令行创建Vue3项目

C:\Users\chao1\Desktop\程书远>cd C:\Users\chao1\Desktop\程书远\vue3

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

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

管理员权限打开Visual Studio Code

PS C:\Users\chao1\Desktop\程书远\vue3\vue3-test\src> cd ..
PS C:\Users\chao1\Desktop\程书远\vue3\vue3-test> npm install
PS C:\Users\chao1\Desktop\程书远\vue3\vue3-test> npm run dev 

> vue3-test@0.0.0 dev
> vite


  VITE v5.4.10  ready in 640 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

Vite创建Vue3项目

C:\Users\chao1\Desktop\程书远>cd C:\Users\chao1\Desktop\程书远\vue3

C:\Users\chao1\Desktop\程书远\vue3>npm create vite@latest

PS C:\Users\chao1\Desktop\程书远\vue3\vue-vite-test> npm install

PS C:\Users\chao1\Desktop\程书远\vue3\vue-vite-test> npm run dev

模板语法

文本插值

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

插入HTML

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

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

<div v-bind:id="xd"></div>

<div :id="xd"></div>

<button :disabled="isDisabled"> 按钮 </button>

<a :href="https://abc1024.tech" target="_blank"> abc1024 </a>

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

ref()

<script setup>
import {ref} from "vue";
const count = ref(0);
console.log(count.value);
</script>


<template>
  <div @click="count++">当前的计数器:{{ count }}</div>
</template>

作者：Soulboy