声明：纯属小白进门文档

vue的官方文档：

https://vuejs.bootcss.com/v2/guide/

第一步：引入vue.js

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
第二步：复制粘贴vue官方文档的实例后打开浏览器运行查看结果
完整html如下，可直接复制粘贴：
<!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里面方便调试（小白篇）的更多相关文章

  1. 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题

        方法使用前需了解: 来自”和“小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查该form上添加 ...

  2. Vue框架Element UI教程-axios请求数据

    Element UI手册:https://cloud.tencent.com/developer/doc/1270 中文文档:http://element-cn.eleme.io/#/zh-CN gi ...

  3. vue.js+element ui Table+spring boot增删改查

    小白初学,不懂的还是太多了,找了好多资料才做出来的先记录一下 1.先用Spring boot创建一个包含了增删改查的项目 2.创建vue.js项目 3.安装Element UI (1)进入项目文件夹下 ...

  4. vue开源Element UI表单设计及代码生成器

    在日常的开发工作中,表单开发是较为繁琐且重复的.本文介绍一个我自己写的,提高开发效率的小工具. 1 可视化设计器 设计器基于Element UI ,可通过点击或拖拽的方式设计基本表单, 设计器生成的代 ...

  5. 第五十三篇：Vue安装Element ui

    好家伙,之前写的一篇过时了,用不了了,更新一波 (已新建一个vue项目) 1. 在项目目录下执行:npm i element-ui -S 2. 在main.js中写入 import ElementUI ...

  6. vue与element ui的el-checkbox的坑

    一,场景 通过使用checkbox,实现如图的场景, 点击某个tag,实现选中和非选中状态. 二, 官网的例子 通过切换checked值为true或者false来实现,一个checkbox的状态切换 ...

  7. VUE -- 对 Element UI table中数据进行二次处理

    时间——日期 后台经常给我们返回的是 时间戳 (例如:1535620671) 这时候我们页面展现的时候需要将时间戳转换为我们要的格式 例如 (YYYY-MM-DD HH:mm:ss) 如果是在Elem ...

  8. Vue.js + Element.ui 从搭建环境到打包部署

    一.搭建环境 由于新的node已经集成了npm,所以直接安装node,前往node官网下载最新版本的node,根据自己的操作系统选择相应的包,按照步骤一步步走就可以,这里不做过多介绍. 安装好后可以打 ...

  9. vue基于 element ui 的按钮点击节流

    vue的按钮点击节流 场景: 1.在实际使用中,当我们填写表单,点击按钮提交的时候,当接口没返回之前,迅速的点击几次,就会造成多次提交. 2.获取验证码,不频繁的获取. 3.弹幕不能频繁的发 基于这几 ...

随机推荐

  1. C++函数重载详解

    我们在开瓶瓶罐罐的时候,经常会遭遇因各种瓶口规格不同而找不到合适的工具的尴尬.所以有时候就为了开个瓶,家里要备多种规格的开瓶器.同样是开个瓶子嘛,何必这么麻烦?于是有人发明了多功能开瓶器,不管啤酒瓶汽 ...

  2. ffmpeg avpicture_fill的一些使用

    标签: ffmpegavpicture_fill 2013-05-17 10:03 4713人阅读 评论(1) 收藏 举报  分类: ffmpeg(3)  这个FFMPEG我没找到详细的中文教程,只有 ...

  3. POJ-1564 dfs

    #include"cstring" #include"cstdio" +; int nux[maxn]; int nua[maxn];//解的集合 int t; ...

  4. 根据sid或sqlID查询SQL

    根据sid查询已经执行过的sql select sql_text from v$sqlarea a,v$session b where a.SQL_ID=b.PREV_SQL_ID and b.SID ...

  5. 数据库JSON字段设计思路

    任务的阶段信息直接存储为JSON格式,这种格式避免了表关联,避免建表,应用层处理也简单的多了. 1. JSON内容为信息性质,而不具备非统计功能:简单讲就是展示,不能用于深度处理: 2. JSON内容 ...

  6. Poj 1067 取石子游戏（NIM,威佐夫博奕）

    一.Description 有两堆石子,数量任意,可以不同.游戏开始由两个人轮流取石子.游戏规定,每次有两种不同的取法,一是可以在任意的一堆中取走任意多的石子:二是可以在两堆中同时取走相同数量的石子. ...

  7. Python：easygui的安装、导入、使用、设置

    转于:https://blog.csdn.net/sinat_37390744/article/details/55211652 博主:钏的博客 一.下载安装 1)下载0.96的easygui.htt ...

  8. 【转】 Pro Android学习笔记（六四）：安全和权限（1）：签发apk

    目录(?)[-] Android安全模型 数字证书签发 Debug的keystore 生产unsigned的apk 为apk进行证书签发 align安装包 使用Export Wizard生成签发的ap ...

  9. 【转】Pro Android学习笔记（三六）：Fragment（1）：基本概念

    目录(?)[-] 为何引入Fragment 大小屏幕的适配 横屏竖屏切换 返回键 什么是Fragment 为何引入Fragment 我们之前的Activity都是都是全屏处理较为简单的单一事务功能,适 ...

  10. mysqladmin命令用法

    mysqladmin 工具的使用格式: mysqladmin [option] command [command option] command ...... option 选项: -c  numbe ...