Vue3 介绍

什么是Vue3？

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

下面是一个最基本的示例：

import { createApp, ref } from 'vue'

createApp({
  setup() {
    return {
      count: ref(0)
    }
  }
}).mount('#app')

template

<div id="app">
  <button @click="count++">
    Count is: {{ count }}
  </button>
</div>

Vue3 官网

Vue3 案例

Vue3 使用

通过CDN引入

你可以借助 script 标签直接通过 CDN 来使用 Vue：

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

这里我们使用了 unpkg，但你也可以使用任何提供 npm 包服务的 CDN，例如 jsdelivr 或 cdnjs。当然，你也可以下载此文件并自行提供服务。

通过 CDN 使用 Vue 时，不涉及“构建步骤”。这使得设置更加简单，并且可以用于增强静态的 HTML 或与后端框架集成。但是，你将无法使用单文件组件 (SFC) 语法。

CDN引入两种写法

传统script全局引入

<!DOCTYPE html>
<html lang="en">
<head>
    ...
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        message： {{ message }}
    </div>
</body>
<script type="text/javascript">
    const { createApp } = Vue 

    createApp({
        data(){ 
            return{
                message: 'hello Vue3' 
            }
        }
    }).mount('#app')
</script>
</html>

ES Module 模块方式（type="module"）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ES Module 模块方式（type="module"）</title>
</head>
<body>
    <div id="app">
        message： {{ message }}
    </div>
</body>
<script type="module"> // 这里要写type="module"
    import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js' // 要引入vue.esm-browser.js，不全局版

    createApp({
        data() {
            return {
                message: 'Hello Vue'
            }
        },
    }).mount('#app')
</script>
</html>

通过Vite构建

Vite 是一个轻量级的、速度极快的构建工具，对 Vue 单文件组件提供第一优先级支持。作者是尤雨溪，同时也是 Vue 的作者！

要使用 Vite 来创建一个 Vue 项目，非常简单：

# npm
$ npm create vue@latest

# pnpm
$ pnpm create vue@latest

# For Yarn Modern (v2+)
$ yarn create vue@latest
# For Yarn ^v4.11
$ yarn dlx create-vue@latest

# bun
$ bun create vue@latest

这个命令会安装和执行 create-vue，它是 Vue 提供的官方脚手架工具。跟随命令行的提示继续操作即可。

要学习更多关于 Vite 的知识，请查看 Vite 官方文档。若要了解如何为一个 Vite 项目配置 Vue 相关的特殊行为，比如向 Vue 编译器传递相关选项，请查看 @vitejs/plugin-vue 的文档。上面提到的两种在线演练场也支持将文件作为一个 Vite 项目下载。

模板语法

文本插值

最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法 (即双大括号)：

<span>Message: {{ msg }}</span>

双大括号标签会被替换为相应组件实例中 msg 属性的值。同时每次 msg 属性更改时它也会同步更新。

例子：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>插值语法</title>
</head>

<body>
    <div id="app">
        message:{{msg}}  // 这里就是插值语法，通常用{{}} 
        sum: {{1 + 2}} // 插值语法还可以写成表达式
    </div>
</body>
<script type="module">

import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

createApp({
    data() {
        return {
            msg: 'Hello Vue' 
        }
    }
}).mount('#app')

</script>

</html>

插值渲染html

双大括号会将数据解释为纯文本，而不是 HTML。若想插入 HTML，你需要使用 v-html 指令：

<p>Using text interpolation: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>插值语法渲染html</title>
</head>
<body>
    <div id="app">
        {{html}} <!-- 直接渲染->文本 -->
        <div v-html="html"></div> <!--使用v-html渲染->解析成html -->
    </div>
</body>
<script type="module"> // 这里要写type="module"
    import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js' // 要引入vue.esm-browser.js，不全局版

    createApp({
        data() {
            return {
                html:'<h1>hello Vue3</h1>' // 数据是一个html语法
            }
        },
    }).mount('#app')
</script>
</html>

如图所示渲染效果：

只有使用v-html才能渲染data数据中定义dhtml结构
直接使用插值语法渲染只能是文本

图解html渲染

属性绑定

双大括号不能在 HTML attributes 中使用。想要响应式地绑定一个 attribute，应该使用 v-bind 指令：

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

v-bind 指令指示 Vue 将元素的 id attribute 与组件的 dynamicId 属性保持一致。如果绑定的值是 null 或者 undefined，那么该 attribute 将会从渲染的元素上移除。

简写因为 v-bind 非常常用，我们提供了特定的简写语法：

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

开头为 : 的 attribute 可能和一般的 HTML attribute 看起来不太一样，但它的确是合法的 attribute 名称字符，并且所有支持 Vue 的浏览器都能正确解析它。此外，他们不会出现在最终渲染的 DOM 中。简写语法是可选的，但相信在你了解了它更多的用处后，你应该会更喜欢它。

接下来的指引中，我们都将在示例中使用简写语法，因为这是在实际开发中更常见的用法。

使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>插值语法渲染属性</title>
</head>
<body>
    <div id="app">
        <!--使用v-bind 将data定义的值当属性值传入给a标签的href属性-->
        <a v-bind:href="href1">this is Bing</a> 
        <br>
        <a v-bind:href="href2">this is Google</a>
    </div>
</body>
<script type="module"> // 这里要写type="module"
    import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js' // 要引入vue.esm-browser.js，不全局版

    createApp({
        data() {
            return {
               href1:"www.bing.com",
               href2:"www.google.com"
            }
        },
    }).mount('#app')
</script>
</html>

如图所示渲染效果：属性绑定

Vue3 快速入门