首页 > 其他分享 >是用非构建工具开始使用Vue3

是用非构建工具开始使用Vue3

时间:2023-10-07 15:35:55浏览次数:46  
标签:vue createApp app Vue 构建 Vue3 return 工具 message

 

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

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

<body>

    <!-- 方法一 -->

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

    <div id="app">{{ message }}</div>

    <script>
        const { createApp } = Vue

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

    <!-- 方法二 -->

    <div id="app">{{ message }}</div>
    <script type="module">
        import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

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

    <!-- 方法三 -->
    
    <script type="importmap">
        {
          "imports": {
            "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
          }
        }
      </script>

    <div id="app">{{ message }}</div>

    <script type="module">
        import { createApp } from 'vue'

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

</body>

</html>

  

   

标签:vue,createApp,app,Vue,构建,Vue3,return,工具,message
From: https://www.cnblogs.com/wanghaibin/p/17746415.html

相关文章

  • Vue3中shallowReactive 与 shallowRef 的用法
    转自:https://blog.csdn.net/qq_54527592/article/details/119840044  shallowReactive与shallowRef   shallowReactive:只处理对象最外层属性的响应式(浅响应式)。   shallowRef:只处理基本数据类型的响应式,不进行对象的响应式处理。   什么时候使用?     ......
  • Vue3
    vue3.3.4+vite4.4.91.组件安装1.1ElementPlusnpminstallelement-plus--savemain.jsimportElementPlusfrom'element-plus'import'element-plus/dist/index.css'constapp=createApp(App);app.use(ElementPlus).mount('#app'......
  • 列出ubuntu软件管理工具apt的一些用法
    apt命令语法: apt options [package...] options:可选,选项包括-h(帮助),-y(当安装过程提示选择全部为"yes"),-q(不显示安装的过程)等等。 command:要进行的操作。 package:安装的包名。apt常用命令列出所有可更新的软件清单命令:aptupdate升级软件包:aptupgrade列出可更新......
  • Vue3 Div 与 v-for 的配合应用,超出自动带滚动条
    效果图 代码<li><ahref="javascript:;"class="IndReaflexCHuans"><i></i><p>当前会议[0]</p></a><divstyle="height:80%;overflow:auto;"><divv-for="......
  • 制作启动U盘的工具----Ventoy
    介绍直接上官网:https://www.ventoy.net/cn/index.html以下信息均来自官网。简单来说,Ventoy是一个制作可启动U盘的开源工具。有了Ventoy你就无需反复地格式化U盘,你只需要把ISO/WIM/IMG/VHD(x)/EFI等类型的文件直接拷贝到U盘里面就可以启动了,无需其他操作。你可以一次性拷贝......
  • 构建自己的docker镜像
    目录前奏基于当前OS创建自己的镜像让Alpine不再是Alpine防走丢前奏rambo@debian:~$cat/etc/issueDebianGNU/Linux12\n\l基于当前OS创建自己的镜像rambo@debian:~$mkdirmyimagerambo@debian:~$sudocp-a/usr/lib/usr/lib32//usr/lib64//usr/bin/myimage......
  • 视频融合平台EasyCVR利用视频监控系统构建智能读表产品应用解决方案
    安防视频监控平台EasyCVR是一个具有强大拓展性、灵活的视频能力和轻便部署的平台。它支持多种主流标准协议,包括国标GB28181、RTSP/Onvif、RTMP等,还可以支持厂家的私有协议和SDK接入,例如海康Ehome、海大宇等设备的SDK。该平台不仅拥有传统安防视频监控的功能,还具备接入AI智能分析的......
  • 14 构建CNN(一)
    importnumpyasnpimporth5pyimportmatplotlib.pyplotasplt%matplotlibinlineplt.rcParams['figure.figsize']=(5.0,4.0)plt.rcParams['image.interpolation']='nearest'plt.rcParams['image.cmap']='gray......
  • maestro studio 简化编写测试worflow 的工具
    对于自己编写workflow有时可能会比较复杂,maestrostudio提供了基于ai的强大能力,同时可以实时模拟器的页面与web集成对于测试人员来说是一个很不错的选择,很值得看看,同时因为maestrostudio也是开源的,代码上也值得学习参考参考资料https://maestro.mobile.dev/getting-started......
  • DevOps 转型,只有工具怎么够!
    敏捷软件开发已经打破了需求分析、测试、开发之间的壁垒。在软件开发流程中,开发与运维之间面临着相同的隔离问题。DevOps运动的目标就是打破开发与运维之间的壁垒,鼓励开发与运维之间的协作。新运维工具的出现以及敏捷工程实践的建立使得DevOps变成了可能[1],但对于DevOps好处的认......