vue3教程文档-青柠博客

Vue介绍

Vue.js 设计的初衷就包括可以被渐进式地采用。这意味着它可以根据需求以多种方式集成到一个项目中。

将 Vue.js 添加到项目中主要有四种方式：

在页面上以 CDN 包的形式导入。
下载 JavaScript 文件并自行托管。
使用 npm 安装它。
使用官方的 CLI 来构建一个项目，它为现代前端工作流程提供了功能齐备的构建设置 (例如，热重载、保存时的提示等等)。

发布版本说明

安装

cdn方式
Vite方式

本教程使用以下两种方式进行安装

cdn方式使用
对于制作原型或学习，你可以这样使用最新版本：
```
<script src="https://unpkg.com/vue@next"></script>
```
对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏
简单的使用例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="https://unpkg.com/vue@next"></script>
    <div id="couter">
        <!--{{}}告诉Vue这里面放的是一个变量-->
        <p>{{num}}</p>
        <p>{{uname}}</p>

    </div>

    <script>
        const couter={//配置对象
            data :function(){
                return{
                    num : 0,
                    uname : '张三'
                }
            }
        }
        Vue.createApp(couter).mount("#couter")//创建应用，传入配置对象,mount挂载
    </script>
</body>
</html>

版权声明 1 本网站名称：青柠博客
2 本站永久网址：https://www.qingningz.cn/
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ2362400196进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

大杂烩

vue3教程文档

Vue介绍

发布版本说明

安装

☀当前时间