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

xujianjun229

已于 2022-04-10 19:24:10 修改

阅读量1.1k

点赞数

分类专栏：前端开发框架其他教程网站及工具使用文章标签： vue

于 2022-04-10 14:06:49 首次发布

本文链接：https://blog.csdn.net/xujianjun229/article/details/124077182

版权

其他教程网站及工具使用同时被 2 个专栏收录

26 篇文章 6 订阅

订阅专栏

前端开发框架

4 篇文章 2 订阅

订阅专栏

vue官网

vue组件库：element ui 官网

<!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

xujianjun229

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue前端开发框架、常用vue组件库及简单示例

vue官网vue组件库：element ui 官网使用elementUI已经引用了最新css库，但是组件中小图标还是显示方框的解决办法<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title>  <link.
复制链接

扫一扫

专栏目录