序言

这篇文章我会先来带大家一起认识一下Vue3然后熟悉一下基本语法，过程不难，大佬跳过♥

体验

示例1（文本编写）

当我们想在一个HTML页面输出'Hello World'有什么写法？

html 复制代码

<body>
    <div id="app">
        <h2>Hello World</h2>
    </div>
</body>

很简单，但如果我们要用Vue完成同样的操作呢？

首先，可以通过脚本标签直接从CDN中使用Vue，然后在head标签内将这段脚本标签导入进去就可以了。于是我们就可以在body页面中编写JS实现动态管理静态页面功能。

html 复制代码

<body>
        <div id="app"></div>
<script>        
        const msg = 'Hello World'

        const tel = {
            template: `<h2>${msg}</h2>`
        }
        const app = Vue.createApp(tel)
        app.mount('#app')
    </script>
</body>

将脚本标签导入到head标签中后，我们首先定义一个字符串变量msg，值为'Hello World'，然后定义一个对象，里面有一个属性，键名为template，键值为一个字符串模板,然后我们需要创建一个Vue对象并把tel对象作为参数传给这个实例对象，最后将这个对象其实也就是字符串模板，挂载到id为app的容器上。在底层机制中，Vue 会将模板编译成高度优化的 JavaScript 代码。结合响应式系统，当应用状态变更时，Vue 能够智能地推导出需要重新渲染的组件的最少数量，并应用最少的 DOM 操作。

示例2（优化编写格式）

如果我们原本在一个容器里面已经有文本为"你好世界"，但是我们想把它替换成英文版的，用Vue可以怎么做呢？类似地，在此之前先导入CDN脚本文件。

html 复制代码

<!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>

然后开始编写JS和来实现页面的展示：

html 复制代码

<body>
<div id="app">你好世界</div>
    <script type="x-template" id="template">
        <div>
            <h2>{{message}}</h2>
        </div>
    </script>

    
    <script>
        // console.log(document.getElementById('template'));
        Vue.createApp({
            template:'#template',
            data:function(){
                return{
                    message:'Hello World'
                } 
            }
        }).mount('#app')

    </script>
</body>

原本页面是有一个你好世界的，但是后续操作会使页面只显示一个Hello World。

我们发现在script标签写一大堆html代码会很麻烦，因为根本没有提示，但是HTML自带了一种类型可以解决这个问题，当我们给script标签添加上 type=x-template时，我们在这里面编写模板的时候也会有提示。后续就是同样的操作，创建的一个Vue实例对象，并挂载到id为app的容器身上，接着编写模板template和数据源data，我们运行一下，效果如下：

示例3（实现动态交互）

如果我们想要在页面实现有一个数字，并且有两个按钮，当分别点击他们时，会使这个数字+1或者-1这个功能时，用Vue应该怎么编写呢？

html 复制代码

<body>
    <div id="app"></div>
    <template id="tel">
        <div>
            <h2>{{count}}</h2>
            <button @click="add">加1</button>
            <button @click="minus">减1</button>
        </div>
    </template>
    
    <script>
        Vue.createApp({
            template:'#tel',
            data:function(){
                return{
                    count:1
                }
            },
            methods:{
                add:function(){
                    this.count++
                },
                minus:function(){
                    this.count--
                }
            }
        }).mount('#app')
    </script>
    
</body>

在HTML5后规定标签没有名字限制要求，所以我们直接使用标签名为template的标签来编写模板；因为要实现点击按钮使数字改变，所以我们需要捕捉到按钮这个动物结构，并且添加一个点击事件，在Vue中我们可以直接用@click来给对应的元素添加点击事件，然后后面的内容就是我们要编写的函数，于是我们在数据源data中编写两个函数add()和minus()，这里面的this指向的就会是Vue的实例对象，也就可以取到count这个变量，然后只需要对其进行操作就可以啦。

总结

在今天这篇文章中我们对于Vue有了一个基本的认识，它是一个框架，能够让我们实现在JS中编写HTML页面，使原本静态的页面，能够通过JS代码动态变化实现页面的动态变化，然后在Vue3中还有许多常见的指令，有了他们，不用再写一大堆代码，要实现动态交互页面，借助Vue3，拆开即可食用。

结语

那么到了这里我们今天的文章就结束啦~

创作不易，如果感觉这个文章对你有帮助的话，点个赞吧♥

博主的开源Git仓库: gitee.com/cheng-bingw...

Vue3 如何轻松上手？请看入门级教学

序言

体验

示例1（文本编写）

示例2（优化编写格式）

示例3（实现动态交互）

总结

结语

那么到了这里我们今天的文章就结束啦~

创作不易，如果感觉这个文章对你有帮助的话，点个赞吧♥