首页 > 其他分享 >html中使用vue和elementui

html中使用vue和elementui

时间:2024-03-08 16:23:04浏览次数:22  
标签:function el vue return elementui html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<el-button @click="visible = true">Button</el-button>
<el-dialog :visible.sync="visible" title="Hello world">
<p>Try Element</p>
</el-dialog>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data: function() {
return { visible: false }
}
})
</script>
</html>

标签:function,el,vue,return,elementui,html
From: https://www.cnblogs.com/PittZhang/p/18061272

相关文章

  • docker 部署 django + mysql + vue 项目
    ​项目目录结构,在Vue和Django项目根目录下创建Dockerfile文件,在父级目录下创建docker-compose.yml文件Project#父级目录├─client#vue3项目目录│├─public│└─src│├─*files│├─*files│├─Dockerfile└─server#Django项......
  • html代码 新手教学
    HTML是超文本标记语言(HyperTextMarkupLanguage)的缩写,是用来描述网页结构的标记语言。在这篇教学中,我们将介绍一些HTML基础知识,帮助新手快速学习并掌握如何编写简单的网页。###第一部分:HTML基础####1.标签(Tags)HTML使用标签来描述页面的结构,每个标签由尖括号包围,如`<ta......
  • nginx如何配置多个vue项目?
    要在Nginx中配置多个Vue项目,您需要为每个项目设置不同的server块,并为每个项目提供不同的静态资源路径。以下是一个基本的配置示例:http{includemime.types;default_typeapplication/octet-stream;#第一个Vue项目的server配置server{l......
  • nginx部署vue项目
    第一步:打包第二步:地址映射http{server{listen8080;#设置端口号8080server_namelocalhost;#主机域名location/{......
  • Vue学习笔记40--脚手架项目架构分析
    脚手架项目架构分析1.babel.config.js——babel的控制文件,用于ES6转ES5(一般不需要程序员进行配置,如想研究请查看babel官网)module.exports={presets:['@vue/cli-plugin-babel/preset']}2.package.json——包信息说明,例如:项目名称、版本、采用的依赖、库文件......
  • 在HTML界面显示图片略缩图 , 点击图片放大显示
    HTML样式 <divid="outerdiv"style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;"> <divid="innerdiv"style="position:absolute;"> <imgid=&......
  • 在Html界面上显示当前時間 , 使用js获取.
    为什么现在不能展开显示代码,只能折叠了,用行内代码把code贴上也显示不出来.点击查看代码<spanid="timenow"style="float:left;"></span><script>setInterval(functiongetNowTime(){varnowTime=newDate();varnowYear=nowTime.......
  • vue3笔记 ref标签 04
    储存标记中的内容<template><divclass="about"><h1ref="Holly">你好</h1><button@click="hhh">点击输出上述h1</button></div></template><scriptlang="ts"setup>i......
  • vue3 报错解决:找不到模块或其相应的类型声明。(Vue 3 can not find module)
    当我们在引入应该组件的时候提示找不到这个组件但是项目明明就有这个物理文件报错原因:typescript只能理解.ts文件,无法理解.vue文件 这个时候我们应该这样首先原因:1、volar插件没开takeover模式去看volar插件介绍,开takeover模式2、volar未选择tyscript最新版本解决:1、......
  • VUE+Echarts安装与配置01
    1、创建VUEnpminitvue@latest//初始化VUE,执行创建向导任务npminstall//安装相关依赖npmrundev//运行程序,查看创建结果2、创建Echartsnpminstallecharts//安装Echarts插件import*asechartsfromecharts//引用Echarts3、引......