首页 > 编程语言 > ruby web 实战(9)-vue 3基础(2)

ruby web 实战(9)-vue 3基础(2)

时间:2023-07-31 17:46:30浏览次数:35  
标签:web vue createApp 导入 message ruby

目录

定位到导入的 vue

使用导入映射表 (Import Maps) 来告诉浏览器如何定位到导入的 vue:

<!doctype html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <title>world</title>
</head>
<body>


<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, ref } from 'vue'

  createApp({
    setup() {
      const message = ref('Hello Vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

</body>
</html>

标签:web,vue,createApp,导入,message,ruby
From: https://www.cnblogs.com/waterruby/p/17594003.html

相关文章

  • three.js学习1(vue3)
    1.引入threejsnpminstall--savethree在组件内import*asTHREEfrom'three'2.创建容器创建canvas标签,为3D渲染建立容器<template><div><canvasid="three"></canvas></div></template>3.创建场景 Three.js依赖......
  • vue多选框
    vue多选框多选框(选中传id)效果图点击确定后传入后台id前端具体实现-vue+elementui前台变量首先使用selecctDeptMent方法从后台数据库,查询到所有的部门信息,存入到optionList中然后取出这个部门名称constoptions=ref([])//代码修改/**新增按钮操作*/const......
  • CTFer成长记录——CTF之Web专题·攻防世界—NewsCenter
    一、题目链接https://adworld.xctf.org.cn/challenges/list二、解法步骤    本题打开是让我们搜新闻,新闻的数据就是来自于数据库的,那么比较容易想到这题应该是sql注入。  首先判断是否能单引号绕过:输入hello正常回显,但hello',发现页面空白,说明hello'会报错,且报错无回显......
  • web前端学习第一天
    一、web应用程序开发介绍    1.界面部份    2.业务逻辑部份    3.数据存储部份 二、 web应用程序开发三大核心技术   HTML CSS  JAVASCRIPT    html:超文本标记语言        作用:网页内容、结构    css:......
  • Jenkins 修改 webhook 链接 URL
    说明2023-03-1221:11:03 分享了一篇  https://blog.51cto.com/wst021sh/6116280 ,也就是介绍 Pipeline对比的文章。这里在简单阐述一下,Pipeline就是一套运行在Jenkins上的工作流框架,将原来独立运行于单个或者多个节点的任务连接起来,实现单个任务难以完成的复杂流程编排......
  • web渗透测试(7):跨站点脚本(XSS)
    跨站点脚本源于信息发送给应用程序用户时缺乏编码。这可以用来注入任意的HTML和JavaScript;结果是该有效载荷在合法用户的网络浏览器中运行。与其他攻击相反,XSS漏洞针对应用程序的用户,而不是直接针对服务器。 一些漏洞利用的例子包括:注入假登录表单;检索合法用户的Cookie;......
  • webpack项目本地dev环境正常,部署至微信字体或图片报cors
    由于webpack设置了高于xxx大小的文件不打包,又与小程序平台的域名不一致导致的问题。修改limit,将其调大,以base64方式直接嵌在页面中(字体文件也适用)......
  • CTFer成长记录——CTF之Web专题·攻防世界—unseping
    一、题目链接  https://adworld.xctf.org.cn/challenges/list二、解法步骤  本题主要是代码审计和反序列化;代码审计:首先我们需要知道整个题的基本执行顺序:post传参——>base64编码——>反序列化——>调用__wakeup()魔术方法——>执行waf()方法过滤——>调用析构方法()。......
  • IDEA,Pycharm,Goland,Webstorm 最新发布2023.2版本,亲测好用!
    期待已久的IntelliJIDEA2023.2终于正式发布了,同时发布的还有Pycharm,Goland,Webstorm等。具体的改变相信大家已经提前有所了解的了,我迫不及待的就下载体验了下,UI变好看了,使用起来感觉更流畅,好用推荐!IDEA2023.2最新版激活成功如下GoLand2023.2最新版激活成功如下......
  • 手把手教你在云环境炼丹(部署Stable Diffusion WebUI)
    前几天写了一篇《手把手教你在本机安装StableDiffusion秋叶整合包》的文章,有些同学反映对硬件的要求太高,显卡太TM贵了。今天我再分享一个云服务器炼丹的方法,方便大家快速入门上手,这个云服务不需要特殊网络设置,能连接公网网盘,随开随用,有3090显卡,也有4090显卡,不过我经常使用的是A5......