引入资源

首先引入Vue,之后引入element-ui。

引入组件

返回数据

全部代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</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>

</head>

<body>

    <div id="app">

        <el-table

                :data="tableData"

                border

                style="width: 100%">

            <el-table-column

                    prop="date"

                    label="日期"

                    width="180">

            </el-table-column>

            <el-table-column

                    prop="name"

                    label="姓名"

                    width="180">

            </el-table-column>

            <el-table-column

                    prop="address"

                    label="地址">

            </el-table-column>

        </el-table>

    </div>

<script>

    new Vue({

        el: '#app',

        data:{

            tableData: [{

                date: '2016-05-02',

                name: '王小虎',

                address: '上海市普陀区金沙江路 1518 弄'

            }, {

                date: '2016-05-04',

                name: '王小虎',

                address: '上海市普陀区金沙江路 1517 弄'

            }, {

                date: '2016-05-01',

                name: '王小虎',

                address: '上海市普陀区金沙江路 1519 弄'

            }, {

                date: '2016-05-03',

                name: '王小虎',

                address: '上海市普陀区金沙江路 1516 弄'

            }]

        }

    })

</script>

</body>

</html>

效果展示

vue: 在页面中单独引入elment-ui的更多相关文章

  1. vue第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法)

    第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法) #课程目标 了解 vue 框架的特点 掌握创建 vue 实例 掌握 data ...

  2. element-ui中单独引入Message组件的问题

    import Message from './src/main.js'; export default Message; 由于Message组件并没有install 方法供Vue来操作的,是直接返回的 ...

  3. Vue 动态控制页面中按钮是否显示和样式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. vue基于页面中按钮权限控制

    main.js // 权限 /** 权限指令,对按钮权限的控制 **/ Vue.directive('allow', { bind: function(el, binding) { // 通过当前按钮 ...

  5. Vue 2.6 中部分引入 TypeScript 的方法

    在 Vue 与 Cesium 联合开发的过程中,我发现很多 Cesium 代码不宜直接写在 .vue 文件中.同时由于 Cesium 库较为复杂,不借助 TypeScript 的静态类型会导致代码难维 ...

  6. 在老项目中单独引入vue.js,使用自定义指令

    传统项目,做一个表格渲染,然而数据过多,传统方式费时费力,便引入vue和elelment  ui,由于表格需要渲染的数据过多一个表格上千条,导致切换tab更新表格时缓慢,体验太差,于是做了自定义指令, ...

  7. 在vue2.x项目中怎么引入Element UI

    参考:https://blog.csdn.net/u014054437/article/details/79862793 Element使用方法:https://element.eleme.cn/#/ ...

  8. Vue单页面中进行业务数据的上报

    为什么要在标题里加上一个业务数据的上报呢,因为在咱们前端项目中,可上报的数据维度太多,比如还有性能数据.页面错误数据.console捕获等.这里我们只讲解业务数据的埋点. 业务数据的上报主要分为: 各 ...

  9. vue同一页面中拥有两个表单时，验证问题

    问题:如果vue的同一个页面拥有两个表单.验证第一个表单时没有通过就切换到第二个,那么第二个表单会出现验证错误的信息 我们可以通过为两个表单添加ref属性 之后在通过调用resetFields()方法 ...

  10. vue单页面应用中动态修改title

    https://www.jianshu.com/p/b980725b62e8 https://www.npmjs.com/package/vue-wechat-title 详细信息查看:vue-wea ...

随机推荐

  1. Unix shell开头的#!

    1:位于脚本文件最开始 2:#!告诉系统内核应有哪个shell来执行所指定的shell脚本. 3:如#! /bin/bash ,#!与shell文件名之间可以有空格,没有限定. 4:指定的shell可 ...

  2. [OpenCV-Python] 24 模板匹配

    文章目录 OpenCV-Python:IV OpenCV中的图像处理 24 模板匹配 24.1 OpenCV 中的模板匹配 24.2 多对象的模板匹配 OpenCV-Python:IV OpenCV中 ...

  3. 简单理解重载运算符&位运算

    重载运算符 作用 重载运算符的作用大致可以理解为自定义一个运算法则,比如当我们在使用结构体的时候,我们有时候会用到优先队列,但是优先队列并不能对于结构体使用,所以这个时候我们就需要用到重载运算符来自定 ...

  4. 优雅的操作文件：java.nio.file 库介绍

    概述 在早期的 Java 版本中,文件 IO 操作功能一直相对较弱,主要存在以下问题: 缺乏对现代文件系统的支持:只提供的基础的文件操作,不支持很多现代的文件系统 API 不够直观:文件操作的 API ...

  5. 网站七牛云CDN加速配置

    首先进入七牛云管理平台 1.添加域名 2.添加需要加速的域名,比如我添加的是gechuang.net 3.源站配置,这里要用IP地址,访问的目录下面要有能访问测试的文件 4.缓存配置,也就是配置缓存哪 ...

  6. 2022-12-22：给定一个数字n，代表数组的长度， 给定一个数字m，代表数组每个位置都可以在1~m之间选择数字， 所有长度为n的数组中，最长递增子序列长度为3的数组，叫做达标数组。 返回达标数组的

    2022-12-22:给定一个数字n,代表数组的长度, 给定一个数字m,代表数组每个位置都可以在1~m之间选择数字, 所有长度为n的数组中,最长递增子序列长度为3的数组,叫做达标数组. 返回达标数组的 ...

  7. react-router-dom 6.0路由详解

    React react-router-dom 6.0路由使用 由于react路由版本的更新迭代,记录路由知识点 新react-router-dom地址,点击查看详情. 下面为使用的例子 Install ...

  8. Vuex modules 中active相互调用

    大中型项目中使用vuex进行状态管理时,经常会按模块分割到不同的module中去,而操作中难免有模块中的active相互调用的情况,然而有时也会出现一些问题,这里顺便记录下 store目录结构 在us ...

  9. Galaxy v-21.01 发布，新的流程和历史栏体验

    Galaxy Project(https://galaxyproject.org/)是在云计算背景下诞生的一个生物信息学可视化分析开源项目. 该项目由美国国家科学基金会(NSF).美国国家人类基因组研 ...

  10. WPF 入门笔记 - 03 - 样式基础及模板

    程序的本质 - 数据结构 + 算法 本篇为学习李应保老师所著的<WPF专业编程指南>并搭配WPF开发圣经<WPF编程宝典第4版>以及痕迹大佬<WPF入门基础教程系列> ...