第四十一天：Vue+Vue指令+Element（饿了么开源前端样式）

最新推荐文章于 2024-04-27 02:57:16 发布
最新推荐文章于 2024-04-27 02:57:16 发布
阅读量908 收藏 1
点赞数
分类专栏： # 6、JavaScript 文章标签： vue js css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38250571/article/details/111587688
版权

1. Vue简介

1.1 相关概念

Vue：构建用户界面的渐进式框架，实现视图和数据的分离。

前端使用Vue开发之后，我们就不需要再去获取各种元素对象并且进行增删改查了，而是把页面(中某部分内容)托管给一个Vue对象，通过操作Vue对象的data属性的值（Vue里面的数据模型），这些修改会自动同步到页面上，就可以完成对页面的增删改查。

特点：

  1. 易用
  2. 灵活
  3. 性能好

1.2 与原生js/jQuery的区别

20201214095201568

  • 数据和视图的组织方式不同
    • js/jq一般都是视图和数据写在一起
    • Vue的视图和数据是分离的
  • 操作数据的方式
    • js/jq通过获取页面元素（视图）的对象，然后通过该对象读写元素的值
    • Vue通过一个统一的Vue对象，在该对象的data数据模型中，通过和对应的视图绑定，来读写视图的值。

1.3 Vue快速入门

步骤

  1. 编写视图（HTML及其基本组成）
  2. 导入Vue的js文件
  3. 使用Vue对象托管页面中某块区域（视图）（为视图添加数据）

演示代码：

<body>
    <!-- 视图 -->
    <div id="div">
        <!--
            vue插值表达式
            视图和数据分离
            msg  对应的vue对象中数据模型的某个属性值
            Vue会把自己对象中模型数据的该属性值自动填充渲染到这个位置
         -->
        {{msg}}
    </div>


</body>
<script src="js/vue.js"></script>
<script>
    // 脚本(封装操作数据)
    // 所有基于vue的代码都必须有一个vue对象
    let app = new Vue({
        el:"#div",  // el是固定下发，值为css选择器，作用就把页面中（选择器选出）某块区域托管给vue对象
        data:{      // data固定写法，表示数据
            msg:"Hello Vue11111" // msg属性的key，后面属性值
        }
    });
</script>
</html>

1.4 Vue快速入门详解

  • Vue程序需要使用一个Vue对象做为程序的入口

    // 使用变量接收，方便多次使用其中属性和方法
let vm = new Vue({
    el:"选择器字符串",  //根据选择器获取指定元素，将该元素托管给vue对象，一般用id选择器
    data:{			  // 属性(模型数据)，用于为视图绑定数据，可以使用当前vue对象调用
        vue属性名1:值1,
        // .....
    },
    methods: {		  // 方法，可以使用当前vue对象调用
    	fun1:function(){
    		//....
		}
		//, fun2.....
	}
});

// {{变量名(vue模型数据中属性的值)}}  在视图位置绑定Vue的属性

<body>
    <!-- 视图 -->
    <div id="div">
        <div>姓名：{{name}}</div>
        <div>班级：{{classRoom}}</div>
        <button onclick="hi()">打招呼</button>
        <button onclick="update()">修改班级</button>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    // 脚本
    // 定义变量名方便使用Vue对象
    let vm = new Vue({
        el:"#div",
        data:{
            name:"张三",
            classRoom:"一班"
        },
        methods:{
            study(){
               alert(this.name + "正在" + this.classRoom + "好好学习!"); // this代表当前Vue对象
            },
        }
    });

    //定义打招呼方法
    //自己定义的一个非Vue方法，该方法调用了vue对象的study()方法
    function hi(){
        vm.study();	//调用Vue对象的方法
    }

    //定义修改班级
    // 自己定义的一个非Vue方法，修改vue对象模型数据中classRoom的值，Vue对象自动渲染该值到页面。
    function update(){
        vm.classRoom = "传智播客";  //通过变量为Vue对象的属性赋值
    }
</script>
</html>

2. Vue的指令

2.1 概念

指令：Vue为网页元素添加的特殊属性，这些属性会被Vue识别并解析。值可以使用 JS 的对象(json)。

常见的指令包括

常用指令-指令介绍

2.2 文本插值

为页面标签体添加内容

<body>
    <div id="div">
        <!-- {{}}  对应的是 jq.text()/js.innerText，可以做拼接，不会覆盖原有插值之外的其他内容 。不会解析标签内容 ,相当于v-text指令（vue特殊属性）-->
        <div>xxxx{{msg}}{{msg}}</div>
        <!-- v-html  对应但是jq.html()/js.innerHtml ，会覆盖标签体原来的所有内容。会解析标签内容-->
        <div v-html="msg">xxxx</div>
        <!-- v-text 对应但是jq.text()/js.innerText ，会覆盖标签体原来的所有内容。不会解析标签内容-->
        <div v-text="msg">xxxx</div>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            msg:"<b>Hello Vue</b>"
        }
    });
</script>

2.3 绑定属性

为页面标签添加属性

Vue绑定属性支持所有html标签的原生属性，支持三元表达式

    <style>
        .my{
            border: 1px solid red;
        }
    </style>

<body>
    <div id="div">
        <!-- v-bind 支持HTML标签所有原生的属性
            但是只是单向绑定，从data -》 标签属性
			如果不使用vue，就需要将a标签封装成对象，通过其href属性修改
            使用Vue，进行属性绑定：
			使用v-bind:href
                就可以实现视图和数据的分离，这个时候，只需要修改vue对象中数据的值，视图中对应位置就会自动更新。
            

            v-bind:HTML原生属性  可以简写为  :HTML原生属性
         -->
        <!--<a href="http://baidu.com">百度一下</a>-->


        <!--<a href="">百度一下</a>-->
        <a v-bind:href="url">百度一下</a>
        <!-- 支持三元运算符 -->
        <a v-bind:href="false? url1: url2">百度一下2</a>
        <br>
        <a :href="url">百度一下</a>
        <br>
        <div :class="cls">我是div</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    let app = new Vue({
        el: "#div",
        data: {
            url: "https://www.baidu.com",
            url1: "https://www.baidu.com",
            url2: "https://google.com.hk",
            cls: "my1"
        }
    });
</script>
</script>

在浏览器开发者工具中，可以使用app.url获取/修改vue对象中url的值。

1597632552243

2.4 条件渲染

择性的让页面中某个元素显示或者不显示

<body>
    <div id="div">
        <!-- 判断num的值，对3取余  余数为0显示div1  余数为1显示div2  余数为2显示div3 -->
        <!--
            v-if如果不成立，元素根本就不被会浏览器解析渲染
            某个标签就在渲染的时候来决定是否显示，不显示的本质是不添加到文档树中
         -->
        <div v-if="num % 3 == 0">div1</div>
        <div v-else-if="num % 3 == 1">div2</div>
        <div v-else="num % 3 == 2">div3</div>

        <!-- 下面效果一样。但是判断三次，不推荐使用 -->
        <div v-if="num % 3 == 0">div1</div>
        <div v-if="num % 3 == 1">div2</div>
        <div v-if="num % 3 == 2">div3</div>

        <!--
            v-show条件不成立时，标签也会被渲染，只是添加一个display:none的样式，让标签隐藏
            某个标签需要多次的显示和隐藏，使用该方式不需要修改文档树，性能更好
         -->
        <div v-show="flag">div4</div>

        <!--

            v-if 会根据条件不同，修改文档数，增删文档树中的元素节点，性能消耗较大
            v-show，仅仅是修改了某个元素的样式，性能消耗较少

            如果要反复显隐某个元素，建议使用v-show
            如果从页面加载开始就决定是否要渲染某个元素，用v-if
        -->
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    let vm = new Vue({
        el:"#div",
        data:{
            num:1,
            flag:false
        }
    });
</script>

2.5 列表渲染

遍历Vue模型数据data中的数组或者对象

<div id="div">
    <ul>
        <!--
            v-for 写在要展示多个的标签上


            遍历数组
                格式 v-for="(元素值[,值的索引]) in 数组/集合

         -->
        <li v-for="(value,index) in names">
            {{index}}-----{{value}}
        </li>


        <!--
            遍历对象
                格式 v-for="(属性值[,属性名][,属性的索引]) in 对象

        -->

        <!--
            注意点：
                    1. v-for所在的标签会出现多次，次数由数组长度决定
                    2. 遍历出来的元素会放在vue对象的数据模型中，之后可以使用插值表达式获取
                    3. 遍历数据的时候，变量的位置决定了其接收内容
        -->

        <li v-for="(value,key,index) in student">
            {{value}} ----- {{key}}---{{index}}
        </li>
    </ul>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: "#div",
        data: {
            names: ["张三", "李四", "王五"],
            student: {
                name: "张三",
                age: 23
            }
        }
    });
</script>

2.6 事件渲染

支持所有js原生的事件

<body>
    <div id="div">
        <div>{{name}}</div>
        <button v-on:click="change()">改变div的内容</button>
        <button v-on:dblclick="change()">改变div的内容</button>

        <button @click="change()">改变div的内容</button>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            name:"一班"
        },
        methods:{
            change(){
                this.name = "传智播客"
            }
        }
    });
</script>

2.7 表单value双向绑定

之前所有的vue对象模型数据和对应视图的绑定是单向绑定的，模型数据修改后，视图会跟着自动修改；反之，不行。

v-model可以实现表单项value属性和模型数据双向绑定的效果。

MVVM 对MVC的升级，双向监听，监听到一方的改变之后立马同步到另外一方。

<body>
    <!--MVVM 对MVC的升级，
        M   Model       Vue对象的data
        V   View        html页面(里面的元素)
        VM  ViewModel   双向监听，监听到一方的改变之后立马同步到另外一方。
    -->
<div id="div">
    <form autocomplete="off">
        姓名：<input type="text" name="username" v-model="username">{{username}}
        <br>
        年龄：<input type="number" name="age" v-model="age">{{age}}
        <button @click="submit()"></button>
    </form>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    let app = new Vue({
        el: "#div",
        data: {
            username: "张三",
            age: 23
        }
    });
</script>

3. Element(理解)

饿了么公司开源的一个封装好的前端页面组件库，是基于Vue。

组件 --> Vue中的视图 --> html中各种元素/标签（经过各种样式修饰之后的）

我们在学习过程中，只需要能复制粘贴，弄明白

  1. 这些视图组件和vue中data数据关联起来
  2. 能够实现（改出来）页面的整体布局

而不应该把重点放在样式和外观等这些内容上。

3.1 Element介绍

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。

使用该组件库可以轻松的设计出来一套样式漂亮的页面。

3.2 Element快速入门

重点步骤：

  1. 引入三个文件Vue.js、Element的index.js、Element的index.css(先Vue.js，后index.js)
  2. 使用Vue对象托管显示区域
  3. CV官网代码简单修改
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>快速入门</title>
    <!--
        使用ElementUI步骤
            1. 下载并引入elementUI的资源文件
                elementuI样式文件index.css、vue的js、elementui的js
            2. 使用vue对象托管页面中指定区域
            3. 复制官网代码，粘贴进上述托管区域，做简单的修改

    -->
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
</head>
<body>
    <button>我是按钮</button>
    <br>
    <div id="div">
        <el-row>
            <el-button>默认按钮</el-button>
            <el-button type="primary">主要按钮</el-button>
            <el-button type="success">成功按钮</el-button>
            <el-button type="info">信息按钮</el-button>
            <el-button type="warning">警告按钮</el-button>
            <el-button type="danger">危险按钮</el-button>
          </el-row>
          <br>
          <el-row>
            <el-button plain>朴素按钮</el-button>
            <el-button type="primary" plain>主要按钮</el-button>
            <el-button type="success" plain>成功按钮</el-button>
            <el-button type="info" plain>信息按钮</el-button>
            <el-button type="warning" plain>警告按钮</el-button>
            <el-button type="danger" plain>危险按钮</el-button>
          </el-row>
          <br>
          <el-row>
            <el-button round>圆角按钮</el-button>
            <el-button type="primary" round>主要按钮</el-button>
            <el-button type="success" round>成功按钮</el-button>
            <el-button type="info" round>信息按钮</el-button>
            <el-button type="warning" round>警告按钮</el-button>
            <el-button type="danger" round>危险按钮</el-button>
          </el-row>
          <br>
          <el-row>
            <el-button icon="el-icon-search" circle></el-button>
            <el-button type="primary" icon="el-icon-edit" circle></el-button>
            <el-button type="success" icon="el-icon-check" circle></el-button>
            <el-button type="info" icon="el-icon-message" circle></el-button>
            <el-button type="warning" icon="el-icon-star-off" circle></el-button>
            <el-button type="danger" icon="el-icon-delete" circle></el-button>
          </el-row>
    </div>
</body>
<script>
    //  ！！！！！！！！！！！！！！！！
    new Vue({
        el:"#div"
    });
</script>

3.3 Layout 布局

通过基础的 24 分栏，迅速简便地创建布局。每行最多可以拆分成24个列，每个元素可以占据多个列。

<el-row>划分行，<el-col>划分列

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础布局</title>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
    <style>
        .el-row {
            /* 行距为20px */
            margin-bottom: 20px;
        }
        .bg-purple-dark {
            background: red;
        }
        .bg-purple {
            background: blue;
        }
        .bg-purple-light {
            background: green;
        }
        .grid-content {
            /* 边框圆润度 */
            border-radius: 4px;
            /* 行高为36px */
            min-height: 36px;
        }
      </style>
</head>
<body>
    <div id="div">
      <el-row>
        <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
      </el-row>
      <el-row>
        <el-col :span="5"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="19"><div class="grid-content bg-purple-light"></div></el-col>
      </el-row>
      <el-row>
        <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
      </el-row>
      <el-row>
        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
      </el-row>
      <el-row>
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
      </el-row>
    </div>
</body>
<script>
    new Vue({
        el:"#div"
    });
</script>

3.4 Container 布局容器

用于布局的容器组件，方便快速搭建页面的基本结构：

<el-container>：外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。可以多层嵌套

<el-header>：顶栏容器。

<el-aside>：侧边栏容器。

<el-main>：主要区域容器。

<el-footer>：底栏容器。

Container容器布局和Layout布局可以嵌套使用，比较麻烦的是数据如何填充。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>容器布局</title>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
    <style>
        .el-header, .el-footer {
            background-color: #d18e66;
            color: #333;
            text-align: center;
            height: 100px;
        }
        .el-aside {
            background-color: #55e658;
            color: #333;
            text-align: center;
            height: 580px;
        }
        .el-main {
            background-color: #5fb1f3;
            color: #333;
            text-align: center;
            height: 520px;
        }
    </style>
</head>
<body>

<!--

    <el-container>：外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。
    <el-header>：顶栏容器。
    <el-aside>：侧边栏容器。
    <el-main>：主要区域容器。
    <el-footer>：底栏容器。

    <el-container> 的子元素可以后四者或者其本身，后四者的父元素只能是 <el-container>。

-->
    <div id="div">
        <el-container>
            <el-header>头部区域</el-header>
            <el-container>
              <el-aside width="200px">侧边栏区域</el-aside>
              <el-container>
                <el-main>主区域</el-main>
                <el-footer>底部区域</el-footer>
              </el-container>
            </el-container>
          </el-container>
    </div>
</body>
<script>
    new Vue({
        el:"#div"
    });
</script>

3.5 表单组件

<body>
    <div id="div">

        <!--
            el-form         form    表单
            el-form-item            表单项
            el-表单标签      表单标签  具体的某个表单项

            form表单的属性
                :model 为表单双向绑定数据
                :rules  为表单绑定校验规则
                上述两个，都会有对应的数据存在vue对象的data中
                ref    为表单起名，相当于一个id值

            表单项的属性
              prop  相当于原生input的name属性
              v-model   为当前表单项双向绑定数据
        -->
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="活动名称" prop="name">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="活动区域" prop="region">
              <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="活动时间" required>
              <el-col :span="11">
                <el-form-item prop="date1">
                  <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col class="line" :span="2">-</el-col>
              <el-col :span="11">
                <el-form-item prop="date2">
                  <el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
                </el-form-item>
              </el-col>
            </el-form-item>
            <el-form-item label="即时配送" prop="delivery">
              <el-switch v-model="ruleForm.delivery"></el-switch>
            </el-form-item>
            <el-form-item label="活动性质" prop="type">
              <el-checkbox-group v-model="ruleForm.type">
                <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
                <el-checkbox label="地推活动" name="type"></el-checkbox>
                <el-checkbox label="线下主题活动" name="type"></el-checkbox>
                <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="特殊资源" prop="resource">
              <el-radio-group v-model="ruleForm.resource">
                <el-radio label="线上品牌商赞助"></el-radio>
                <el-radio label="线下场地免费"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="活动形式" prop="desc">
              <el-input type="textarea" v-model="ruleForm.desc"></el-input>
            </el-form-item>
            <el-form-item>
                <!-- 绑定单击事件，事件触发的时候，传递了一个当前表单名字的字符串 -->
              <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                <!-- 绑定单击事件，事件触发的时候，传递了一个当前表单名字的字符串 -->
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
    </div>
</body>
<script>
    new Vue({
        el:"#div",
        data:{
            ruleForm: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
                },
            rules: {
              name: [
                { required: false, message: '请输入活动名称', trigger: 'blur' },
                { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
              ],
              region: [
                { required: true, message: '请选择活动区域', trigger: 'change' }
              ],
              date1: [
                { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
              ],
              date2: [
                { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
              ],
              type: [
                { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
              ],
              resource: [
                { required: true, message: '请选择活动资源', trigger: 'change' }
              ],
              desc: [
                { required: true, message: '请填写活动形式', trigger: 'blur' }
              ]
            }
        },
        methods:{

            // validate()、resetFields 是elementUI组件库帮你实现好的方法，直接调用即可。

            //  formName  = ruleForm  上述点击事件调用传递的参数，说白了就是当前表单ref的值
            submitForm(formName) {
                // this.$refs[formName]  根据传递的名字，获取当前表单对象
                // validate  根据之前的校验规则，校验当前表中所有的表单项是否符合要求
                // 如果所有表单项都符合要求，形参valid的值为true；否则形参valid的值为false

                // (valid) =>  箭头函数  匿名函数
                // 相当于 function (valid)
                this.$refs[formName].validate((valid) => {
                    // 如果所有表单项都符合规则
                    if (valid) {
                        alert('submit!');
                        //否则
                    } else {
                        console.log('error submit!!');
                        // 返回false，阻止表单提交
                        return false;
                    }
                });
            },

            //  formName  = ruleForm  上述点击事件调用传递的参数，说白了就是当前表单ref的值
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    });
</script>

3.6 表格组件

<body>
<!--
    当el-table元素中注入data对象数组后，
    在el-table-column中用prop属性来对应对象中的键名即可填入数据，
    用label属性来定义表格的列名。可以使用width属性来定义列宽。
-->
    <div id="div">
        <template>
            <!-- :data绑定vue对象中的模型数据 -->
            <el-table
              :data="tableData"
              style="width: 100%">
            <!--
                给el-table-column标签的prop属性设置成vue对象中的模型数据的属性名，
                对应的属性值会自动渲染到该列
                label 展示给用户看的表头
                width   宽度
             -->
              <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-column
                label="操作"
                width="180">
              <!--
                    在每一行数据上放置了两个按钮
                    之后会给这两个按钮绑定事件并实现相应的功能
                -->
                <el-button type="warning">编辑</el-button>
                <el-button type="danger">删除</el-button>
              </el-table-column>
            </el-table>
          </template>
    </div>
</body>
<script>
    new Vue({
        el:"#div",
        data:{
            tableData: [{
                date: '2016-05-02',
                name: 'xxx',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }]
        }
    });
</script>

3.7 顶部导航栏

<div id="div">
    <!--
        Menu导航菜单默认为垂直模式(horizontal)，通过mode属性可以使导航菜单变更为水平模式(Vertical)。
            :default-active 默认选中菜单项的index索引，可以在vue对象中设赋值设置
            <el-menu-item> 普通的导航项
                index   属性，就是编号
            <el-submenu>    有子菜单的导航项
                index   属性，

			Menu 还提供了background-color、text-color和active-text-color，
    		分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色。

		另外，在菜单中通过submenu组件可以生成二级菜单。	
    -->
    <el-menu
            :default-active="activeIndex2"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b">
        <!-- 所有的选项标签位置都会被超链接等替代，发起一个请求或者跳转-->
        <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 index="2-4">
                <template slot="title">选项4</template>
                <el-menu-item index="2-4-1">选项1</el-menu-item>
                <el-menu-item index="2-4-2">选项2</el-menu-item>
                <el-menu-item index="2-4-3">选项3</el-menu-item>
            </el-submenu>
        </el-submenu>
        <!-- 导航项等其他众多标签都可以使用disabled属性  起到禁用的效果 -->
        <el-menu-item index="3" disabled>消息中心</el-menu-item>
        <el-menu-item index="4"><a href="http://blog.sunxiaowei.net" target="_blank">订单管理</a></el-menu-item>
    </el-menu>
</div>
</body>
<script>
    let vm = new Vue({
        el: "#div",
        data: {
            activeIndex2: '1'
        },
        methods: {
            handleSelect(index, indexPath) {
                console.log(index+"*****", indexPath);
            }
        }
    });
</script>

3.8 侧边导航栏

<body>
    <div id="div">
      <el-col :span="3">
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b">
          <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" disabled>
            <i class="el-icon-document"></i>
            <span slot="title">导航三</span>
          </el-menu-item>
          <el-menu-item index="4">
            <i class="el-icon-setting"></i>
            <span slot="title">导航四</span>
          </el-menu-item>
        </el-menu>
      </el-col>
    </div>
</body>
<script>
    new Vue({
        el:"#div",
        methods:{
          handleOpen(key, keyPath) {
            console.log(key, keyPath);
          },
          handleClose(key, keyPath) {
            console.log(key, keyPath);
          }
        }
    });
</script>

 </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" disabled>
        <i class="el-icon-document"></i>
        <span slot="title">导航三</span>
      </el-menu-item>
      <el-menu-item index="4">
        <i class="el-icon-setting"></i>
        <span slot="title">导航四</span>
      </el-menu-item>
    </el-menu>
  </el-col>
</div>
```
冰镇的热狗
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue+饿了么 后台管理 布局，如何学习网页前端开发
m0_60567796的博客
03-18 382
项目用的vue-cli2 +element UI搭建目前 布局的 目录src：assets //放置一些静态资源home //布局login //登录view //组件页面router //路由配置。
vue+饿了么 后台管理 布局(1)，经典好文
m0_60452070的博客
03-18 468
name: ‘运营管理’,component: ()=> import(‘…/components/home/home.vue’), //布局页面name: ‘政策补贴’,},},})
饿了么团队开源项目 vue-element-admin 前后端分离构建和发布过程
weixin_42306858的博客
07-09 2508
饿了么团队开源项目 vue-element-admin 前后端分离构建和发布过程 1、构建和发布过程和注意事项参考： 构建和发布链接 2、跨域问题： 跨域问题说明链接 详细说明下跨域问题： nginx反向代理跨域流程图： 域名访问静态文件数据发送api接口请求vue前端服务器发送的api请求反向代理用户端nginx代理vue前端服务器flask后端服务器 说明：开发环境下是直接在一台机子上面进行v...
vue-element-admin 后台管理系统
最新发布
2401_84433974的博客
04-27 740
provide / inject API 主要解决了跨级组件间的通信问题，不过它的使用场景，主要是子组件获取上级组件的状态，跨级组件间建立了一种主动提供与依赖注入的关系。我是这样理解的，当我们的页面中需要好几个模块时好几个页面的时候，那么就可以写成文件的形式，方便引用，父子组件放同一个文件夹下形成一个嵌套的层级形式，比如user页面，views下有一个单个的页面比如这个·404页面，它无需很多的模块不用封装，而且它是被使用的，只是一个简单的路由引入就可以访问，那么就可以写成文件的形式。
我的基于Vue的饿了么项目有感
qq_39776508的博客
11-25 6003
我的基于vue的饿了么项目 学习前端也有五个月了，学完所有知识点之后买了个基于vue的饿了么项目来做，在花费了几天的时间之后总算完成了，心有感慨之余打算写一篇博客来记录下我在这整个过程的收获 创建基本项目结构 整个项目的开始的第一步就是创建这个项目，用到的指令是vue init webpack project(project是你要创建的项目名称),在这里我便出现了问题, download tem...
vue+饿了么 后台管理 布局，前端入门
m0_60388149的博客
04-01 330
el-button @click="resetForm('ruleForm2')">重置” @click=“userInfo”>账号信息。” @click=“update”>修改密码。” @click=“logout”>退出。取 消。没有children的leaf属性 点击直接跳转。将路由赋给视图 循环 没有hidden属性的展示。点击图标 左侧导航出现和隐藏切换。label=“确认密码”
(vue+【饿了么UI】tag组件封装)
Mr_wang_why的博客
02-05 503
(vue+【饿了么UI】tag组件封装) 根据项目所衍生的一种tag组件，废话不多说直接上代码 <template> <div> <!-- 素材标签 --> <div class="material_title"> <div class="m_title">素材标签:</div> <div class="m_input"> <el-tag v-fo
外卖点餐系统，后端：springboot+mybatis+mybatis-plus 前端：vue+elmen
05-08
后端使用Spring Boot和MyBatis作为开发框架，而前端使用Vue和ElementUI作为开发工具。 后端开发框架 后端使用Spring Boot作为开发框架，Spring Boot是一个轻量级的框架，易于学习和使用，可以快速搭建项目。它提供...
毕设项目商品大数据实时推荐系统前端：Vue + TypeScript + ElementUI，后端 Spring + Spark
10-23
前端：Vue + TypeScript + ElementUI，后端 Spring + Spark 毕设项目：商品大数据实时推荐系统。前端：Vue + TypeScript + ElementUI，后端 Spring + Spark 毕设项目：商品大数据实时推荐系统。前端：Vue + ...
高校图书馆管理系统源码 前端：vue + element-ui + axios 后端：Springboot 数据库：mysql
01-05
前端：vue + element-ui + axios 后端：Springboot 数据库：mysql 项目所包含的功能： 登录（包含滑块验证） 首页展示：echarts 折线堆叠图（展示借书及还书记录） 学员管理：添加学员、编辑学员、删除学员、学员...
毕设项目：商品大数据实时推荐系统 前端：Vue + TypeScript + ElementUI，后端Spring+Spark
07-11
**前端**使用 Vue + TypeScript + ElementUI 构建，build 的时候自动部署到后端业务工程的 webapps/static 目录下，随 Tomcat 一同启动 **后端**又分为业务模块和推荐模块，业务模块与前端交互、接收与反馈数据。...
Vue仿饿了么APP
08-12
Vue仿饿了么APP
饿了么 vue 源码可运行
04-15
饿了么 vue 源码可运行
Vue框架高仿饿了么移动端
04-28
Vue框架高仿外面App饿了么移动端，重点实现了饿了么商家页面商品浏览、商品添加购物车、购物车管理、商品评价管理等若干功能。前端主要用了Vue框架，后端数据主要存在MySQL中和JSON文件中，用到了webpack打包。
精仿饿了么多地图多城市订餐模板
03-30
注意：文件夹名称必须英文,否则点击地图的时候数据会出错。 模板默认时间是黑夜 白天方法： 首页找到id为background 然后设置class 为 “day” background-position: 1px -8197.08px; 若是不明白的话，可以看下更多饿了么网站模板讲解,http://www.sucaihuo.com/。 更多精品模板：http://www.sucaihuo.com/templates
vue-monitor:vue + vue路由器+ vuex + element-ui
05-18
监控器Vue监控项目构建设置 # install dependenciesnpm install# serve with hot reload at localhost:8080npm run dev# build for production with minificationnpm run build# build for production and view the ...
企业级后台集成方案vue-element-admin
热门推荐
程序猿追的博客
03-10 1万+
vue-element-admin 是一个后台前端解决方案，它基于 vue和 element-ui实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。相信不管你的需求是什么，本项目都能帮助到你。
HTML+CSS+JS网页设计期末课程大作业—— 绿色化妆品HTML+CSS+JavaScript
HTML网页设计
08-10 2184
💄美妆介绍、👜美妆分享、👒 品牌化妆品官网网站 、等网站的设计与制作。🏷️ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设......
vue3+ts+vite+element plus+i18n开源项目
10-23
Vue3 TS Vite Element Plus I18n开源项目是一个基于Vue3和TypeScript的快速开发框架，它集成了Element Plus组件库和国际化功能。 Vue3是目前最新的Vue版本，它带来了很多新的特性和改进，比如更好的性能、更强大的类型推断和优化的渲染逻辑。使用Vue3可以让开发者拥有更好的开发体验和更高效的编码方式。 TS是TypeScript的缩写，它是JavaScript的超集，为JavaScript添加了静态类型检查和其他新特性。使用TypeScript可以更早地发现代码错误，并提供更好的代码提示和重构能力，提高了代码的可维护性和可读性。 Vite是一个由Evan You（Vue的创造者）开发的新一代前端构建工具，它具有极快的冷启动和热重载能力，能够大大提升开发效率。使用Vite可以快速搭建起整个项目的开发环境。 Element Plus是一套基于Vue3的UI组件库，它提供了丰富的常用组件和样式，可以帮助开发者快速搭建精美的界面。Element Plus基于Vue3的语法进行了优化，提供了更好的性能和更丰富的功能。 I18n是国际化的缩写，它是指将应用程序适配到不同的语言和地区。开源项目中的I18n功能可以帮助开发者轻松实现多语言支持，提供了翻译和切换语言的功能。 综上所述，Vue3 TS Vite Element Plus I18n开源项目是一个强大的开发框架，它集成了最新的Vue版本、TypeScript、快速开发工具Vite、Element Plus组件库和国际化功能。使用这个项目可以大大提高前端开发的效率和质量，特别适合构建大型和多语言的应用程序。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值