首页 > 其他分享 >vue3单页面的写法

vue3单页面的写法

时间:2023-07-29 11:11:13浏览次数:40  
标签:count const ref counter reactive vue3 message 写法 页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

</head>
<body>
<script type="module">
const { createApp ,reactive ,ref} = Vue

createApp({
  setup() {
    const counter = reactive({ count: 0 })
    const message = ref('Hello World!')

    return {
      counter,
      message
    }
  }
}).mount('#app')
</script>

<div id="app">
  <h1>{{ message }}</h1>
  <p>Count is: {{ counter.count }}</p>
</div>
</body>
</html>

 

标签:count,const,ref,counter,reactive,vue3,message,写法,页面
From: https://www.cnblogs.com/dj258/p/17589485.html

相关文章

  • Vue3下的axios跨域问题
    0、vue-cli版本vue-Vvue--version   1、根目录找vue.config.js,无则添加文件;然后添加节点: const{defineConfig}=require('@vue/cli-service')module.exports=defineConfig({transpileDependencies:true,lintOnSave:false,//关闭语法检查de......
  • Vue3之ref取render形式组件jsx元素节点
    [2023年7月28日22:16:06]ref取render方式组件节点一开始注意到组件setup和render一起使用的情况,好奇怎么通过ref取到render中jsx里的节点,一开始试了以下的尝试,结果是undefined的:import{defineComponent,ref,onMounted}from"vue";exportdefault......
  • vue3拖拽插件vue-draggable-next
    -基于sortablejs;npm地址:https://www.npmjs.com/package/vue-draggable-next配置项:https://github.com/SortableJS/Sortable#options import{VueDraggableNextasDraggable}from'vue-draggable-next';components:{HeaderTitle,TitlePanel,Draggable},......
  • vue3跨越
    在vue3项目中使用跨域1.服务器代理server:{port:8080,//设置服务启动端口号open:true,//设置服务启动时是否自动打开浏览器cors:true,//允许跨域//设置代理,根据我们项目实际情况配置proxy:{'/api':{//apiTest是自行设置的请求前......
  • H5 页面刷新404
    参考:https://blog.csdn.net/weixin_44917334/article/details/129387658history模式由createWebHistory改为createWebHashHistoryimport{createRouter,createWebHistory,createWebHashHistory}from'vue-router'importHomeViewfrom'../views/HomeView.......
  • Vue2 & Vue3生命周期对比
    Vue2生命周期图示  Vue3生命周期图示  二者对比 ......
  • vue-cli构建Vue3项目
    1、node环境检查node-v//查询Node版本 2、vue-cli版本检查vue-V//查询vue-cli版本npmuninstall-gvue-cli//卸载旧版vue-clinpminstall-gvue-cli//旧版vue-cli2npminstall-g@vue-cli//vue-cli3  其他命令:vue-V//查询vue-cli脚手架版本np......
  • JS直接将页面的内容作为excel下载
     做个笔记,后续自己可以看看,将页面的一个Table直接输出为excel文件,亲测有用。 //下载excelfunctiondownloadExcel(){varuri='data:application/vnd.ms-excel;base64,';vartemplate=`<htmlxmlns:o="urn:schemas-microsoft-com:o......
  • linux安装Tomcat | 开启Tomcat | 为Tomcat添加html页面
    摘要目的:介绍linux如何安装Tomcat一、步骤创建目录上传安装文件,并解压缩到/opt/tomcat进入解压目录/bin,启动tomcat./startup.sh.开放端口8080测试是否安装成功:在windows、Linux下访问http://linuxip:8080二、演示创建目录mkdir/opt/tomcat上传安装文件,并解压......
  • 在前端页面中一直出现"Signature has expired."的报错该如何解决
    在排查完后端的问题后,发现还是出现这样的情况很有可能是前端代码传入身份验证的jwt_token时出现了问题jwt和token串之间需要添加一个空格 ......