vue3教程文档

Vue介绍

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

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

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

发布版本说明

最新版本 v3.2.6

官方网站:https://v3.cn.vuejs.org/guide/installation.html

安装

  1. cdn方式
  2. 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>

     

© 版权声明
THE END
喜欢就支持一下吧
点赞12赞赏 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片