将vue和element-ui写在一个html里面方便调试(小白篇)
声明:纯属小白进门文档
vue的官方文档:
https://vuejs.bootcss.com/v2/guide/
第一步:引入vue.js
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head> <body>
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body> </html>
element-ui(配合vue的一款非常优秀的ui框架)的官方文档,来展示效果
官方文档:http://element-cn.eleme.io/#/zh-CN/component/badge
第一步:引入
<!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 --> <script src="https://unpkg.com/element-ui/lib/index.js"></script>
第二步:
举个栗子:比如 Badge 标记 组件
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style>
.item {
margin-top: 10px;
margin-right: 40px;
}
</style>
</head> <body>
<div id="app">
<div> {{ message }}</div>
<div>
<el-badge :value="12" class="item">
<el-button size="small">评论</el-button>
</el-badge>
<el-badge :value="3" class="item">
<el-button size="small">回复</el-button>
</el-badge> <el-dropdown trigger="click">
<span class="el-dropdown-link">
点我查看
<i class="el-icon-caret-bottom el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item class="clearfix">
评论
<el-badge class="mark" :value="12" />
</el-dropdown-item>
<el-dropdown-item class="clearfix">
回复
<el-badge class="mark" :value="3" />
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body> </html>
将vue和element-ui写在一个html里面方便调试(小白篇)的更多相关文章
- 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
方法使用前需了解: 来自”和“小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查该form上添加 ...
- Vue框架Element UI教程-axios请求数据
Element UI手册:https://cloud.tencent.com/developer/doc/1270 中文文档:http://element-cn.eleme.io/#/zh-CN gi ...
- vue.js+element ui Table+spring boot增删改查
小白初学,不懂的还是太多了,找了好多资料才做出来的先记录一下 1.先用Spring boot创建一个包含了增删改查的项目 2.创建vue.js项目 3.安装Element UI (1)进入项目文件夹下 ...
- vue开源Element UI表单设计及代码生成器
在日常的开发工作中,表单开发是较为繁琐且重复的.本文介绍一个我自己写的,提高开发效率的小工具. 1 可视化设计器 设计器基于Element UI ,可通过点击或拖拽的方式设计基本表单, 设计器生成的代 ...
- 第五十三篇:Vue安装Element ui
好家伙,之前写的一篇过时了,用不了了,更新一波 (已新建一个vue项目) 1. 在项目目录下执行:npm i element-ui -S 2. 在main.js中写入 import ElementUI ...
- vue与element ui的el-checkbox的坑
一,场景 通过使用checkbox,实现如图的场景, 点击某个tag,实现选中和非选中状态. 二, 官网的例子 通过切换checked值为true或者false来实现,一个checkbox的状态切换 ...
- VUE -- 对 Element UI table中数据进行二次处理
时间——日期 后台经常给我们返回的是 时间戳 (例如:1535620671) 这时候我们页面展现的时候需要将时间戳转换为我们要的格式 例如 (YYYY-MM-DD HH:mm:ss) 如果是在Elem ...
- Vue.js + Element.ui 从搭建环境到打包部署
一.搭建环境 由于新的node已经集成了npm,所以直接安装node,前往node官网下载最新版本的node,根据自己的操作系统选择相应的包,按照步骤一步步走就可以,这里不做过多介绍. 安装好后可以打 ...
- vue基于 element ui 的按钮点击节流
vue的按钮点击节流 场景: 1.在实际使用中,当我们填写表单,点击按钮提交的时候,当接口没返回之前,迅速的点击几次,就会造成多次提交. 2.获取验证码,不频繁的获取. 3.弹幕不能频繁的发 基于这几 ...
随机推荐
- noip模拟赛 #3
T1 给一个环,每个点有一个权值,把环分成三段,求最小的那段的最大值 sol:暴力 二分答案,chk就是把环搞成三倍链,每次枚举起点,后面三个切割点都可以二分找 然后就Rua过去了 //yyc wen ...
- Anthem.NET 的回调流程图
下面用一个最简单的 anthem:Button 回调作为例子,理清回调过程中执行函数的次序.代码如下: <%@ Page Language="C#" AutoEventWir ...
- 第一个 IronPython 的 ASP.NET 程序
今天试验了在 Visual Studio 中集成使用 IronPython,记录如下. 首先,下载一个 IronPython 1.0 的 binary,解压后,将目录路径 配置到环境变量 Path 中 ...
- 洛谷【P1480】A/B Problem
题目传送门:https://www.luogu.org/problemnew/show/P1480 高精除低精板子题,灵性地回忆一下小学时期列竖式的草稿纸即可. 时间复杂度:\(O(len)\) 空间 ...
- Python 写文件时的Unicode设置
今天在把Evenote的笔记内容写为文件时出错: f.write(content) UnicodeEncodeError: 'gbk' codec can& ...
- zk 02之 Windows安装和使用zookeeper
本文介绍的 Zookeeper 是以 3.4.5 这个稳定版本为基础,最新的版本可以通过官网 http://hadoop.apache.org/zookeeper/来获取,Zookeeper 的安装非 ...
- SharePoint Project Server List 列表CURD操作使用rest api接口
//#region 界面交互代码 var issuesUtils = issuesUtils || {}; (function () { /** * 点击问题提处理方案按钮事件 */ issuesUt ...
- shell入门-grep2
案例介绍 搜索关键词带‘root’的行 并输出行号 [root@wangshaojun ~]# cg -n 'root' 1.txt1:root:x:0:0:root:/root:/bin/bash1 ...
- 【转】GitHub使用
1.设置Git全局用户配置 git config --global user.name "xxx" git config --global user.email xxx@gmail ...
- java 设置Cookie值
原文地址:http://blog.csdn.net/lansetiankong12/article/details/52622654 /** * 读取所有cookie * 注意二.从客户端读取Cook ...