从Element学习Vue的使用
来源:互联网 发布:网络销售外包合同 编辑:程序博客网 时间:2024/06/05 01:18
最近学习了一段时间Vue,把文档看完之后有点懵懵懂懂,不过刚好赶上Element和iView等应用Vue编写的框架,就先看完文档,然后看了Element的源码,来巩固自己对Vue的见知。
在阅读本系列文章之前,希望你可以做到:
1. 系统阅读一遍Vue文档;
1. 系统查看一下Element的官方文档(本系列文章以Element 2.0.3版本做说明)
首先先说一下,直接从github上面得到的源码是无法编译的,我们可以用如下方法来运行:
在Element官方文档的快速上手里面,有为我们提供的项目模板,也就是下面的这个链接:https://github.com/ElementUI/element-starter
直接将其拷贝到本地,在你已经成功安装node.js和npm的情况下,直接:
npm install
或者是使用淘宝镜像直接:
cnpm install
推荐使用淘宝镜像,毕竟快。依赖安装完成之后,我们可以直接:
npm run dev
这个时候基本上就可以得到如下的目录结构:
之后就可以直接将Element官方文档中的示例代码复制在App.vue文件中,进行查看。例如下面这样:
<template> <el-container> <el-header> <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"> <div class="fl title">管理后台</div> <div class="fr"> <el-menu-item index="1">处理中心</el-menu-item> <el-submenu index="2"> <template slot="title">我的工作台</template> <el-menu-item index="2-1">选项1</el-menu-item> <el-menu-item index="2-2">选项2</el-menu-item> <el-menu-item index="2-3">选项3</el-menu-item> </el-submenu> <el-menu-item index="3"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item> </div> </el-menu> </el-header> <el-main> <el-container> <el-aside width="240px"> <el-row class="tac"> <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"> <el-submenu index="1"> <template slot="title"> <i class="el-icon-location"></i> <span>导航一</span> </template> <el-menu-item-group> <template slot="title">分组一</template> <el-menu-item index="1-1">选项1</el-menu-item> <el-menu-item index="1-2">选项2</el-menu-item> </el-menu-item-group> <el-menu-item-group title="分组2"> <el-menu-item index="1-3">选项3</el-menu-item> </el-menu-item-group> <el-submenu index="1-4"> <template slot="title">选项4</template> <el-menu-item index="1-4-1">选项1</el-menu-item> </el-submenu> </el-submenu> <el-menu-item index="2"> <i class="el-icon-menu"></i> <span slot="title">导航二</span> </el-menu-item> <el-menu-item index="3"> <i class="el-icon-setting"></i> <span slot="title">导航三</span> </el-menu-item> </el-menu> </el-row> </el-aside> <el-container> <el-main> <el-table :data="tableData"> <el-table-column prop="date" label="日期" width="140"> </el-table-column> <el-table-column prop="name" label="姓名" width="120"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> </el-table> </el-main> <el-footer> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="100" layout="total, prev, pager, next" :total="1000"> </el-pagination> </el-footer> </el-container> </el-container> </el-main> </el-container></template><script>export default { data() { const item = { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }; return { activeIndex: '2-1', tableData: Array(5).fill(item), currentPage: 5, }; }, methods: { handleSelect(key, keyPath) { console.log(key, keyPath); }, handleOpen(key, keyPath) { console.log(key, keyPath); }, handleClose(key, keyPath) { console.log(key, keyPath); }, handleSizeChange(val) { console.log(`每页 ${val} 条`); }, handleCurrentChange(val) { console.log(`当前页: ${val}`); } }}</script><style>.fl { float: left;}.fr { float: right;}.title { width: 125px; text-align: center; line-height: 60px; color: #fff;}</style>
就可以直接看到下面的界面:
安装Vue官方提供的devtools有助于我们进行快速开发(只不过chrome商店由于访问等原因可能下载不到,不过我们可以使用Firefox的插件),而且还可以直接浏览器中查看插件直接数据/计算属性/方法等的计算结果,对插件内部的情况一目了然,如下图所示:
做好这些准备之后,下章我们来正式从Element融会贯通Vue的使用方法。
阅读全文
0 0
- 从Element学习Vue的使用
- 【PC端vue ui框架学习】vue项目如何使用基于vue的UI框架Element
- 谈谈学习element UI + vue.js的感受
- 学习vue从使用到源码实现
- vue.js+element ui学习笔记
- Nuxtjs vue-resource element 安装及使用
- 浅谈Vue(使用vue+element ui搭建页面)
- 从新建vue项目到引入组件Element流程
- 从新建vue项目到引入组件Element流程
- 【工作日志】--vue.js下使用element的form表单的注意事项
- Vue.js 学习10 Element基于Vue2.0的组件库
- vue与element-ui的结合,脚手架第一步【vue日记】
- vue使用element-ui的el-input监听不了回车事件解决
- 使用Vue.js和Element-UI做一个简单的登录页面
- 在vue项目中使用element-ui的Upload上传组件
- 【PC端vue ui框架学习】vue项目如何使用基于vue的UI框架iview
- 学习如何使用Vue
- laravel5.4+vue+element-ui配置及简单使用
- 时间不同步导致Spring session失效的巨坑
- ADV-202 最长公共子序列
- Android 仿高德地图可拉伸的BottomSheet
- Python进阶之网络通信过程再现
- golang interface深度解析
- 从Element学习Vue的使用
- Quartz作业调度框架入门学习
- 大菲波数
- java基础2:异常
- ADS7822的使用
- this逃逸
- 文件的存取
- 一致性哈希算法
- 种类并查集