vue前端开发框架、常用vue组件库及简单示例

vue官网

vue组件库：element ui 官网

使用elementUI已经引用了最新css库，但是组件中小图标还是显示方框的解决办法

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><!-- 引入样式 --><link rel="stylesheet" href="css/index.css"><script src="js/vue.js"></script><!-- 引入组件库 --><script src="js/index.js"></script></head><body><div id="container">从vm中获取的数据为：{{str}}<br>{{stu.name}}<br><label v-if="stu.name=='xu'">xu1</label><label v-if="stu.name=='xiao'">xiao1</label>{{stu.age}}<table border="1" cellspacing="0" width="400"><tr><th>序号</th><th>头像</th><th>姓名</th><th>年龄</th></tr><tr v-for="s,index in stu1"><td>{{index+1}}</td><td><img height="30" v-bind:src="s.img" alt=""></td><td>{{s.name}}</td><td>{{s.age}}</td></tr></table><input type="text" v-model:value="str"><el-table :data="tableData"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><el-progress :text-inside="true" :stroke-width="26" :percentage="70"></el-progress><el-progress :text-inside="true" :stroke-width="24" :percentage="100" status="success"></el-progress><el-progress :text-inside="true" :stroke-width="22" :percentage="str" status="warning"></el-progress><el-progress :text-inside="true" :stroke-width="20" :percentage="50" status="exception"></el-progress><div class="block"><span class="demonstration">页数较少时的效果</span><el-pagination layout="prev, pager, next" :total="50"> </el-pagination></div><el-steps :active="active" finish-status="success"><el-step title="步骤 1"></el-step><el-step title="步骤 2"></el-step><el-step title="步骤 3"></el-step></el-steps><el-button style="margin-top: 12px;" @click="next">下一步</el-button><el-dropdown><el-button type="primary">更多菜单<i class="el-icon-arrow-down el-icon--right"></i></el-button><el-dropdown-menu slot="dropdown"><el-dropdown-item>黄金糕</el-dropdown-item><el-dropdown-item>狮子头</el-dropdown-item><el-dropdown-item>螺蛳粉</el-dropdown-item><el-dropdown-item>双皮奶</el-dropdown-item><el-dropdown-item>蚵仔煎</el-dropdown-item></el-dropdown-menu></el-dropdown><el-dropdown split-button type="primary" @click="handleClick">更多菜单<el-dropdown-menu slot="dropdown"><el-dropdown-item>黄金糕</el-dropdown-item><el-dropdown-item>狮子头</el-dropdown-item><el-dropdown-item>螺蛳粉</el-dropdown-item><el-dropdown-item>双皮奶</el-dropdown-item><el-dropdown-item>蚵仔煎</el-dropdown-item></el-dropdown-menu></el-dropdown></div><style>.el-dropdown {vertical-align: top;}.el-dropdown + .el-dropdown {margin-left: 15px;}.el-icon-arrow-down {font-size: 12px;}</style><script type="text/javascript">var vm =new Vue({el:"#container",data:{code:109,active:0,str:"wo cao ni",stu:{name:"xiao",age:34},stu1:[{name:"xiao8",age:33,img:"image/1.jpg"},{name:"xiao9",age:32,img:"image/2.jpg"},],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 弄'}]},methods: {next() {if (this.active++ > 2) this.active = 0;},handleClick() {alert('button click');}}});</script></body>
</html>

简单工程示例下载：

链接：https://pan.baidu.com/s/14hwEnFK6xTNs95sfSX2XFA
提取码：aazg

vue开发参考PDF资料

链接：https://pan.baidu.com/s/1IoCXDRyVW6RwxWdLFPaGrg
提取码：97ia

vue前端开发框架、常用vue组件库及简单示例相关推荐

前端开发常用UI组件库（vue、react）
pc端 Ant Design Ant Design是基于 Ant Design 设计体系的 React UI 组件库 Element Element是基于 Vue 2 的UI组件库 Element+ ...
Vue常用的组件库大全【前端工程师必备】【实时更新】【移动端、PC端（web端）、数据可视化组件库（数据大屏）、动画组件库、3D组件库】
Vue常用的组件库大全[前端工程师必备] (一)移动端常用组件库 1)Vant ui 2)Cube UI 3)VUX 4) NuTUI 5)Mint ui 6)Varlet UI 7)OnsenUI ...
Vue UI 组件库（移动端常用 UI 组件库，PC 端常用 UI 组件库，Element UI基本使用，Element UI按需引入）
文章目录 Vue UI 组件库 7.1 移动端常用 UI 组件库 7.2 PC 端常用 UI 组件库 7.3 Element UI基本使用 7.4 Element UI按需引入 Vue UI 组件库 ...
vant步进器传值_有赞开源的Vue 2.0 的 Mobile 组件库 Vant
有赞开源的Vue 2.0 的 Mobile 组件库 Vant 是一个轻量.可靠的移动端 Vue 组件库.包括了基础组件.Button 按钮.Cell 单元格.Icon 图标.Image 图片.Layo ...
Mint UI —— 基于 Vue.js 的移动端组件库
写文章登录 Mint UI -- 基于 Vue.js 的移动端组件库杨奕 8 个月前 Mint UI GitHub:https://github.com/ElemeFE/mint-ui 项目主页:h ...
移动端cube界面设计html,滴滴开源基于 Vue.js 的移动端组件库 cube-ui
原标题:滴滴开源基于 Vue.js 的移动端组件库 cube-ui 开源最前线(ID:OpenSourceTop) 猿妹整编综合自:https://didi.github.io/cube-ui/ ...
iView 3.3.0 发布，基于 Vue.js 的企业级 UI 组件库
iView 3.3.0 发布了,代号 Transistor ,iView 是一套基于 Vue.js 的企业级 UI 组件库,主要服务于 PC 界面的中后台产品. 本次更新如下: https://www ...
vue中集成的ui组件库_Vue组件可使用Vault Flow通过Braintree集成PayPal付款
vue中集成的ui组件库 Vue Braintree PayPal按钮 (Vue Braintree PayPal button) Vue component to integrate PayPal ...
iView 3.4.0 发布，基于 Vue.js 的企业级 UI 组件库
百度智能云云生态狂欢季热门云产品1折起>>> iView 3.4.0 发布了,iView 是一套基于 Vue.js 的企业级 UI 组件库,主要服务于 PC 界面的中后台产品 ...
前端开发常用的第三方库
内容 UI组件开发框架实用库服务端辅助工具应用实例 Demo示例 UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和 ...

vue前端开发框架、常用vue组件库及简单示例

vue前端开发框架、常用vue组件库及简单示例相关推荐

最新文章

热门文章