Vue & Element

2021/11/25 6:11:28

编程Tag： vue element data console el color log

本文主要是介绍Vue & Element，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

目录
  • Vue 介绍
    • 前端技术发展历史
    • MVVM 模型
    • 认识 Vue
    • Vue 安装
    • Vue 入门程序
  • Vue 常用指令
    • 文本插值：v-text、v-html
    • 双向绑定：v-mode
    • 事件绑定：v-on
      • 事件修饰符
    • 遍历：v-for
    • 条件判断：v-if、v-show
    • 属性绑定：v-bind
    • 计算属性：computed
    • 监控：watch
    • 组件：component
  • Element 介绍
    • 什么是 Element ？
    • Element 快速入门
  • Element 常用组件
    • 基础布局
      • 容器布局
    • 表单组件
    • 表格组件
    • 顶部导航栏组件
    • 侧边导航栏组件
  • Vue 高级使用
    • Vue 自定义组件
    • Vue 生命周期
    • Vue 异步操作
  • 综合案例：学生管理系统


Vue 介绍

前端技术发展历史

先了解一下前端开发模式的发展。

静态页面

最初的网页以 HTML 为主，是纯静态的网页。网页是只读的，信息流只能从服务端到客户端单向流通。开发人员也只关心页面的样式和内容。

异步刷新，操作 DOM

  • 1995 年，网景工程师 Brendan Eich 花了 10 天时间设计了 JavaScript 语言。
    随着 JavaScript 的诞生，我们可以操作页面的 DOM 元素及样式，页面有了一些动态的效果，但是依然是以静态为主。

  • Ajax 盛行

    • 2005 年开始，Ajax 逐渐被前端开发人员所重视，因为不用刷新页面就可以更新页面的数据和渲染效果。
    • 此时的开发人员不仅仅要编写 HTML 样式，还要懂 Ajax 与后端交互，然后通过 JS 操作 DOM 元素来实现页面动态效果。比较流行的框架如 jQuery 就是典型代表。

MVVM，关注模型和视图

  • 2008 年，google 的 Chrome 发布，随后就以极快的速度占领市场，超过 IE 成为浏览器市场的主导者。

  • 2009 年，Ryan Dahl 在谷歌的 Chrome V8 引擎基础上，打造了基于事件循环的异步 I/O 框架：Node.js 。

    • 基于时间循环的异步 I/O 。
    • 单线程运行，避免多线程的变量同步问题。
    • JS 可以编写后台 diamante，前后台统一编程语言。

  • Node.js 的伟大之处不在于让 JS 迈向了后端开发，而是构建了一个庞大的生态系统。

  • 2010 年，NPM 作为 Node.js 的包管理系统首次发布，开发人员可以遵循 Common.js 规范来编写 Node.js 模块，然后发布到 NPM 上供其他开发人员使用。目前已经是世界最大的包模块管理系统。

  • 随后，在 node 的基础上，涌现出了一大批的前端框架:
    image


MVVM 模型

  • M：即 Model，模型，包括数据和一些基本操作。
  • V：即 View，视图，页面渲染结果。
  • VM：即 View-Model，模型与视图间的双向操作（无需开发人员干涉）

在 MVVM 之前，开发人员首先从后端获取需要的数据模型，然后要通过 DOM 操作 Model 渲染到 View 中。而后当用户操作视图时，我们还需要通过 DOM 获取 View 中的数据，然后同步到 Model 中。

而 MVVM 中的 VM 要做的事情就是把 DOM 操作完全封装起来，开发人员不用再关心 Model 和 View 之间是如何互相影响的：

  • 只要 Model 发生了改变，View 上自然就会表现出来；
  • 当用户修改了 View，Model 中的数据也会跟着改变。

MVVM 把开发人员从繁琐的 DOM 操作中解放出来，把关注点放在如何操作 Model 上。

image


认识 Vue

什么是 Vue ？

Vue 是一套用于构建用户界面的渐进式前端框架，通过视图与模型（MV）的双向绑定，简化了前端操作，以提高前端开发效率。

与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用，Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

  • 官网
  • 使用指南

前端框架三巨头：

  • Vue.js、React.js、Angular.js
  • 其中 Vue.js 以其轻量易用著称
  • 目前 Vue.js 和 React.js 发展速度最快

Vue 特点：

  • 渐进式：可以选择性地使用该框架的一个或一些组件，这些组件的使用也不需要将框架全部组件都应用；而且用了这些组件也不要求你的系统全部都使用该框架。
  • 简单易用
    • 只关注视图层，并且非常容易学习，还可以很方便地与其它库或已有项目整合。
    • 通过尽可能简单的 API 来实现响应数据的绑定和组合的视图组件。
    • 在有 HTML、CSS、JavaScript 的基础上，可以快速上手。
  • 灵活：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。
  • 性能：20kb min+gzip 运行大小、超快虚拟 DOM、最省心的优化。

Vue 安装

Vue 其实是一个 js 文件，因此其使用方法是下载 vue.js 文件并在页面中引入该 js 文件。

vue.js 的下载方式：

方式一：引用在线的 vue.js

<!--开发环境版本，包含了用帮助的命令行警告-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度-->
<script src="https://cdn.isdelivr.net/npm/vue"></script>

方法二：离线下载 vue.js

下载地址

方法三：使用 npm 包资源管理器下载 vue.js

在项目的根目录下执行以下命令：

# 初始化
npm init -y
# 下载 vue 模块
npm install vue --save

下载成功后生成：

image


Vue 入门程序

Vue 开发步骤：

  1. 下载和引入 vue.js 文件
  2. Vue 程序包含视图和脚本两个核心部分：
    • 视图（负责页面渲染，主要由 HTML+CSS 构成）：数据绑定{{变量名}}
    • 脚本（负责业务数据模型（Model）以及数据的处理逻辑）
      • 创建 Vue 实例对象：new vue({参数列表})
      • 参数列表
        • el：接收获取的元素
        • data：保存数据
        • methods：定义方法
        • 钩子函数：不同的钩子函数会在 Vue 实例生命周期中不同的阶段自动调用，具体有：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、boforeDestroy、destroyed 等。其中 created 较为常用，常用于在 Vue 实例化时初始化数据。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <div>信息：{{msg}}</div>
        <div>姓名：{{name}}</div>
        <div>班级：{{className}}</div>
        <button onclick="hi()">打招呼</button>
        <button onclick="update()">修改班级</button>
    </div>
    <script text="text/javascript">
        // 创建vue实例对象
        var vm = new Vue({
            el: "#app",  // el：用于接收获取到的页面元素，即定义了视图范围（根据常用选择器获取）。
            data: {  // 用于保存当前Vue实例对象中的数据。在视图中声明的变量需要在此处赋值（如 msg 变量）。
                name: "张三",
                className: "幼儿园"
            },
            methods:{  // 用于定义方法。方法可以直接通过对象名调用，this代表当前Vue实例对象。
                study(){
                    alert(this.name + " 正在 " + this.className + " 好好学习!");
                }
            },
            // 钩子函数
            created() {
                this.msg = "hello vue, created.";
                console.log(this);
            }
        });

        //定义打招呼方法
        function hi(){
            vm.study();
        }

        //定义修改班级
        function update(){
            vm.className = "大班";
        }
    </script>
</body>
</html>

页面效果：

image


Vue 常用指令

Vue 指令：是指带有v-前缀的特殊属性，例如 v-html，v-if，v-for 等，不同指令具有不同含义。

使用指令时，通常编写在标签的属性上，值可以使用 JS 表达式。

常用指令如下：

image


文本插值：v-text、v-html

插值可以使用在需要显示 vue 实例教据的地方，可以在插值表达式中调用实例的数据属性和函数。

v-text 和 v-html 的作用：可以将数据在模板中进行显示。

区别：

  • v-html：会对内容中出现的 html 标签进行渲染。
  • v-text：会将内容当做普遍文本输出到元素里面。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本插值</title>
    <script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="div">
    <div>{{msg}}</div>
    <div v-html="msg"></div>
    <div v-text="msg"></div>
</div>
</body>
<script>
    new Vue({
        el:"#div",
        data:{
            msg:"<b>Hello Vue</b>"
        }
    });
</script>
</html>

页面效果：

image


双向绑定：v-mode

刚才的 v-text 和 v-html 可以看做是单向绑定，数据影响了视图渲染，但是反过来就不行。而 v-model 则是双向绑定的，视图（View）和模型（Model）之间会互相影响。

既然是双向绑定，一定是在视图中可以修改数据，这样就限定了视图的元素类型，目前 v-model 的可使用元素有：

  • input、textarea：input 和 textarea 默认对应的 model 是字符串。
  • select：select 单选对应字符串；多选对应数组。
  • checkbox：多个 checkbox 对应一个 model 时，model 的类型是一个数组；单个 checkbox 值的 model 则是 boolean 类型。
  • radio：radio 对应的 model 是 input 的 value 值。
  • components（Vue 中的自定义组件）

基本上除了最后一项，其它都是表单的输入项。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>双向绑定</title>
    <script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="checkbox" value="Java" v-model="language">Java<br/>
    <input type="checkbox" value="Python" v-model="language">Python<br/>
    <input type="checkbox" value="Go" v-model="language">Go<br/>
    <h2>
        您选择了：{{language.join(",")}}  <!-- 使用逗号组合 -->
    </h2>
</div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            language:[]
        }
    });
</script>
</html>

页面效果：

image


事件绑定：v-on

v-on 用于给页面元素绑定事件。

语法：v-on:事件名="js片段或函数名"

简写语法：@事件名="js片段或函数名"

例如v-on:click="add"可以简写为@click="add"。

事件修饰符

在事件处理程序中调用 event.preventDefau1t() 或 event.stoppropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

为了解决这个问题，Vue.is 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的：

  • .stop：阻止事件冒泡
  • .prevent：阻止默认事件发生
  • .capture：使用事件捕获模式
  • .self：只有元素自身触发事件才执行（冒泡或捕获的都不执行）
  • .once：只执行一次

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件绑定</title>
    <script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <button v-on:click="num++">增加</button>
    <button @click="decrement">减少</button>
    <h2>
        num = {{num}}
    </h2>
    <hr>
    事件冒泡测试：<br/>
    <div @click="print('div被点击了')">
        <!-- 如果不加.stop，那么在触发button的click事件时，也会同时触发父节点div的click事件 -->
        <button @click.stop="print('点击了button')">点我试试</button>
    </div>
    <br/>
    阻止默认事件：<br/>
    <!--
        如果不加.prevent，则页面会进行跳转
        加了.prevent，则只会触发print方法，而不会进行跳转页面
    -->
    <a href="https://www.baidu.com" @click.prevent="print('点击了超链接')">超链接</a>
</div>

</body>
<script>
    new Vue({
        el:"#app",
        data:{
            num: 1
        },
        methods:{
           // 递减
           decrement() {
               this.num--;
           },
           // 打印
            print(str) {
               console.log(str);
            }
        }
    });
</script>
</html>

页面效果：

image


遍历：v-for

遍历数据以渲染页面时非常常见的需求，Vue 中通过 v-for 指令来实现。

具体实现方式：可以在 vue 实例化的时候指定要遍历的数据，然后通过 v-for 指令在模板中遍历显示数据。一般情况下，要遍历的数据可以通过钩子函数 created() 发送异步请求获取数据。

数组遍历：

语法：v-for="item in items"

  • items：要遍历的数组，需要在 vue 的 data 中定义好。
  • item：自定义的循环变量名。

对象遍历：

v-for 除了可以遍历数组，也可以迭代对象。两者语法基本类似。

语法:

v-for="vabue in object"
v-for="(value, key) in object"
v-for="(value, key, index) in object"
  • 1 个参数时，得到的是对象的值。
  • 2 个参数时，第一个表示值，第二个表示键。
  • 3 个参数时，第三个表示索引，从 0 开始。

key：

当 Vue.is 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。

如果使用 key 这个功能可以有效的提高渲染的效率；key 一般使用在遍历完后又增、减集合元素时，更有意义。

但是要实现这个功能，你需要给 Vue 一些提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的且唯一的id。也就是 key 是该项的唯一标识。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for</title>
    <script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <!-- 数组遍历 -->
    <li v-for="user in users">
        {{user.name}}--{{user.age}}--{{user.hobby}}
    </li>
    <hr>
    <!-- 对象遍历 -->
    <li v-for="(value, key, index) in person">
        {{value}}--{{key}}--{{index}}
    </li>
    <hr>
    <!--
        这里使用了一个特殊语法`:key=""`后文会讲到。
        它可以让你读取 vue 中的属性，并赋值给 key 属性。
        这里绑定的 key 是数组的索引，应该是唯一的。 
    -->
    <li v-for="(user, index) in users" :key="index">
        {{index}}--{{user.name}}--{{user.age}}--{{user.hobby}}
    </li>
</div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            users: [
                {"name":"xiaoming", "age":13, "hobby":"basketball"},
                {"name":"xiaohua", "age":11, "hobby":"piano"},
                {"name":"xiaoshu", "age":16, "hobby":"dance"}
            ],
            person: {"name":"xiaosi", "age":17, "hobby":"study", "nation":"中国"}
        }
    });
</script>
</html>

页面效果：

image


条件判断：v-if、v-show

v-if：顾名思义，条件判断。当得到结果为 true 时，所在的元素才会被渲染。

语法：v-if="布尔表达式"

另一个用于根据条件展示元素的选项是 v-show 指令，用法大致一样。不同的是，带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性为 display。

总结：

  • v-if 在条件不满足时，元素不会存在。
  • v-show 在条件不满足时，是对元素进行了隐藏。

示例一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>条件判断</title>
    <script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="div">
    <!-- 判断num的值，对3取余：若余数为0则显示div1，余数为1则显示div2，余数为2则显示div3 -->
    <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-show="flag">div4</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            num:1,
            flag:false
        }
    });
</script>
</html>

页面效果：

image

示例二：

当 v-if 和 v-for 出现在一起时，v-for 优先级更高。也就是说，会先遍历，再判断条件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-if</title>
    <script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <button @click="show=!show">点我</button>
    <h2 v-if="show">
        Hello Vue.js
    </h2>
    <ul>
        <li v-for="user in users" v-if="user.gender=='女'" style="background-color: aqua">
            {{user.name}}--{{user.age}}--{{user.gender}}
        </li>
        <li v-else style="background-color: indianred">
            {{user.name}}--{{user.age}}--{{user.gender}}
        </li>
    </ul>
</div>

</body>
<script>
    new Vue({
        el:"#app",
        data:{
            show :true,
            users: [
                {"name":"xiaoming", "age":13, "gender":"男"},
                {"name":"xiaohua", "age":11, "gender":"女"},
                {"name":"xiaoshu", "age":16, "gender":"女"}
            ]
        }
    });
</script>
</html>

页面效果：

image


属性绑定：v-bind

v-bind 的作用：

可以对所有元素的属性设置 vue 实例的数据。

例如 <img src="" height="">，其中 src 和 height 的值如果不想写死，而是想获取 vue 实例中的数据属性值的话，那么就可以通过使用 v-bind 实现：

<!-- v-bind: 可简写为剩余一个冒号 -->
<img v-bind:src="vue实例中的数据属性名" :height="vue实例中的数据属性名"/>

class 属性的特殊用法：

Vue 对 class 属性进行了特殊处理，可以接收数组或对象格式的语法。

如可以传给 class 一个对象，以动态地切换 class:

<div :class="{red:true, blue:fa1se}"></div>

对象中，key 是已经定义的 class 样式的名称，value 是一个布尔值，如果为 true，则这个样式会生效，如果为 false，则该样式不生效。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-bind</title>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <style>
        div {
            width: 100px;
            height: 110px;
            color: white;
        }
        .red {
            background-color: red;
        }
        .blue {
            background-color: blue;
        }
    </style>
</head>
<body>
<div id="app">
    <button @click="color='red'">红色</button>
    <button @click="color='blue'">蓝色</button>

    <div v-bind:class="color">
        点击按钮改变背景颜色
    </div>
    <hr>
    <button @click="flag=!flag">点我改变背景颜色</button>
    <!-- red和blue是已定义好的CSS样式 -->
    <div :class="{red:flag, blue:!flag}">
        点击按钮改变背景颜色
    </div>
</div>

</body>
<script>
    new Vue({
        el:"#app",
        data:{
            color: "red",
            flag: true
        }
    });
</script>
</html>

页面效果：

image


计算属性：computed

计算属性（computed）的作用：在插值或者指令表达式较为复杂的时候，可以将一些属性数据先经过方法处理之后再返回给使用方。

例如，要将一个日期的亳秒值显示为格式化（yyyy-MM-dd）日期字符串，那么就可以使用 computed 计算属性里面的方法进行处理。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>computed</title>
    <script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <h2>
        您的生日是：{{new Date(birthday).getFullYear()}}-{{new Date(birthday).getMonth()+1}}-{{new Date(birthday).getDay()}}
    </h2>
    <hr>
    <!-- 使用computed -->
    <h2>
        您的生日是：{{birth}}
    </h2>
</div>

</body>
<script>
    new Vue({
        el:"#app",
        data:{
            birthday: 1429032123201,
        },
        computed:{
            birth(){
                const date = new Date(this.birthday);
                return date.getFullYear() + "-" + (date.getMonth()+1) + "-" + date.getDay();
            }
        }
    });
</script>
</html>

页面效果：

image


监控：watch

在 vue 实例中，数据属性因为在页面中修改而产生了变化时，可以通过 watch 监控获取其改变前后的值。

如果是修改的对象数据属性，可以开启深度监控，获取修改后最新的对象数据。

使用场景：可以监控视图中数据的变化以做出响应。如下拉框列表中，当如果选择了对应的下拉框选项后，要根据选择值去加载一些其它数据。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>watch</title>
    <script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="message">
    <hr>
    <input type="text" v-model="person.name"><br>
    <input type="text" v-model="person.age"><button @click="person.age++">+</button>
    <h3>
        姓名为：{{person.name}}；年龄为：{{person.age}}
    </h3>
</div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            message: "hello vue",
            person: {"name":"xiaoming", "age":14}
        },
        watch: {
            message(newValue, oldValue) {
                console.log("新值："+newValue+"；旧值："+oldValue);
            },
            person:{
                // 开启深度监控，监控对象中的属性值变化
                deep: true,
                handler(obj){
                    console.log("name="+obj.name+"；age="+obj.age);
                }
            }
        }
    });
</script>
</html>

页面效果：

image


组件：component

组件的作用：可以将通用的页面模块抽取成 vue 组件，在 vue 实例中引用。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>component</title>
    <script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <!-- 使用注册好的全局组件 -->
    <counter></counter>
</div>
</body>
<script>
    // 定义组件
    const myCounter = {
        template: "<button @click='num++'>你点击了 {{num}} 次</button>",
        data(){
            return {num: 0}
        }
    }

    // 使用vue实例全局注册组件
    // 参数1：自定义组件名  参数2：定义好的组件
    Vue.component("counter", myCounter);

    // 定义视图位置
    new Vue({
        el:"#app"
    });
</script>
</html>

页面效果：

image

说明：

  • 组件其实也是一个 Vue 实例，因此它在定义时也会接收 data、methods、生命周期函数等参数。
  • 不同的是，组件不会与页面的元素绑定，否则就无法复用了，因此没有 el 属性。
  • 但是组件渲染需要 html 模板，所以增加了 template 属性，值就是 HTML 模板。
  • 全局组件定义完毕，任何 vue 实例都可以直接在 html 中通过组件名称来使用组件。 * data 的定义方式比较特殊，必须是一个函数。

Element 介绍

什么是 Element ？

  • Element 是网站快速成型工具，是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库。

  • 组件：组成网页的部件，例如超链接、按钮、图片、表格等等。

  • 使用 Element 的前提是必须要有 Vue。

  • Element 官网：

样式示例：

  • 自己完成的按钮：
    image

  • Element 提供的按钮：
    image


Element 快速入门

开发步骤：

  1. 下载 Element 核心库。
  2. 引入 Element 样式文件。
  3. 引入 Vue 核心 js 文件。
  4. 引入 Element 核心 js 文件。
  5. 编写按钮标签。
  6. 通过 Vue 核心对象加载元素。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Element</title>
    <!-- 引入 Element 样式文件 -->
    <link rel="stylesheet" href="../node_modules/element-ui/lib/theme-chalk/index.css">
    <!-- 引入 Vue 核心 js 文件 -->
    <script src="../node_modules/vue/dist/vue.js"></script>
    <!-- 引入 Element 核心 js 文件 -->
    <script src="../node_modules/element-ui/lib/index.js"></script>
</head>
<body>
    <button>我是按钮</button>
    <hr>
    <div id="app">
        <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:"#app"
    });
</script>
</html>

页面效果：

image


Element 常用组件

基础布局

Element 基础布局可以将页面分成最多 24 个部分（列），且可以自由切分。

image

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Element</title>
    <!-- 引入 Element 样式文件 -->
    <link rel="stylesheet" href="../node_modules/element-ui/lib/theme-chalk/index.css">
    <!-- 引入 Vue 核心 js 文件 -->
    <script src="../node_modules/vue/dist/vue.js"></script>
    <!-- 引入 Element 核心 js 文件 -->
    <script src="../node_modules/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>
    <button>我是按钮</button>
    <hr>
    <div id="app">
        <el-row>
            <!-- span值最大为24，超过则元素不显示 -->
            <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
        </el-row>
        <el-row>
            <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="12"><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:"#app"
    });
</script>
</html>

页面效果：

image


容器布局

容器布局：将页面分成头部区域、侧边栏区域、主区域、底部区域。

image

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Element</title>
    <!-- 引入 Element 样式文件 -->
    <link rel="stylesheet" href="../node_modules/element-ui/lib/theme-chalk/index.css">
    <!-- 引入 Vue 核心 js 文件 -->
    <script src="../node_modules/vue/dist/vue.js"></script>
    <!-- 引入 Element 核心 js 文件 -->
    <script src="../node_modules/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>
    <div id="app">
        <!-- 
            多个contatiner嵌套时，是多行分布的关系
        -->
        <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:"#app"
    });
</script>
</html>

页面效果：

image


表单组件

表单：由输入框、下拉列表、单选框、多选框等控件组成，用以收集、校验、提交数据。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Element</title>
    <!-- 引入 Element 样式文件 -->
    <link rel="stylesheet" href="../node_modules/element-ui/lib/theme-chalk/index.css">
    <!-- 引入 Vue 核心 js 文件 -->
    <script src="../node_modules/vue/dist/vue.js"></script>
    <!-- 引入 Element 核心 js 文件 -->
    <script src="../node_modules/element-ui/lib/index.js"></script>
</head>
<body>
    <div id="app">
        <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:"#app",
        data:{
            ruleForm: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            rules: {
                name: [
                    { required: true, 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:{
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    });
</script>
</html>

页面效果：

image


表格组件

表格：用于展示多条结构类似的数据，可对数据进行编辑、删除或其他自定义操作。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Element</title>
    <!-- 引入 Element 样式文件 -->
    <link rel="stylesheet" href="../node_modules/element-ui/lib/theme-chalk/index.css">
    <!-- 引入 Vue 核心 js 文件 -->
    <script src="../node_modules/vue/dist/vue.js"></script>
    <!-- 引入 Element 核心 js 文件 -->
    <script src="../node_modules/element-ui/lib/index.js"></script>
</head>
<body>
    <div id="app">
        <template>
            <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-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:"#app",
        data:{
            tableData: [{
                date: '2016-05-02',
                name: '王小龙',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '石黑豹',
                address: '上海市普陀区金沙江路 1519 弄'
            }]
        }
    });
</script>
</html>

页面效果：

image


顶部导航栏组件

image

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Element</title>
    <!-- 引入 Element 样式文件 -->
    <link rel="stylesheet" href="../node_modules/element-ui/lib/theme-chalk/index.css">
    <!-- 引入 Vue 核心 js 文件 -->
    <script src="../node_modules/vue/dist/vue.js"></script>
    <!-- 引入 Element 核心 js 文件 -->
    <script src="../node_modules/element-ui/lib/index.js"></script>
</head>
<body>
    <div id="app">
        <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>

            <el-menu-item index="3" disabled>消息中心</el-menu-item>

            <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>

        </el-menu>
    </div>
</body>
<script>
    new Vue({
        el:"#app"
    });
</script>
</html>

侧边导航栏组件

image

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Element</title>
    <!-- 引入 Element 样式文件 -->
    <link rel="stylesheet" href="../node_modules/element-ui/lib/theme-chalk/index.css">
    <!-- 引入 Vue 核心 js 文件 -->
    <script src="../node_modules/vue/dist/vue.js"></script>
    <!-- 引入 Element 核心 js 文件 -->
    <script src="../node_modules/element-ui/lib/index.js"></script>
</head>
<body>
    <div id="app">
        <el-col :span="6">  <!-- 侧边导航栏宽度 -->
            <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:"#app"
    });
</script>
</html>

Vue 高级使用

Vue 自定义组件

学习了 Element 组件后，我们会发现组件其实就是自定义的标签。

本质上，组件就是带有一个名字且可复用的 Vue 实例，我们完全可以自己定义。

定义格式：

Vue.component(组件名称, {
 props:组件的属性,
 data: 组件的数据函数,
 template: 组件解析的标签模板
})

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义组件</title>
    <!-- 引入 Vue 核心 js 文件 -->
    <script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <my-button></my-button>
    </div>
</body>
<script>
    // 注册全局组件
    Vue.component("my-button",{
        // 属性
        props:["style"],
        // 数据函数
        data: function(){
            return{
                msg:"我的按钮"
            }
        },
        //解析标签模板
        template:"<button style='color:red'>{{msg}}</button>"
    });

    new Vue({
        el:"#app",
    });
    
</script>
</html>

Vue 生命周期

Vue 生命周期 官方图解：

image

生命周期的八个阶段：

image

官方代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue的生命周期</title>
    <!-- 引入 Vue 核心 js 文件 -->
    <script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        {{message}}
    </div>
</body>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            message: 'Vue的生命周期'
        },
        beforeCreate: function() {
            console.group('------beforeCreate创建前状态------');
            console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
            console.log("%c%s", "color:red", "data   : " + this.$data); //undefined
            console.log("%c%s", "color:red", "message: " + this.message);//undefined
        },
        created: function() {
            console.group('------created创建完毕状态------');
            console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
            console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化
            console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
        },
        beforeMount: function() {
            console.group('------beforeMount挂载前状态------');
            console.log("%c%s", "color:red", "el     : " + (this.$el)); //已被初始化
            console.log(this.$el);
            console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化
            console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
        },
        mounted: function() {
            console.group('------mounted 挂载结束状态------');
            console.log("%c%s", "color:red", "el     : " + this.$el); //已被初始化
            console.log(this.$el);
            console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化
            console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
        },
        beforeUpdate: function() {
            console.group('beforeUpdate 更新前状态===============》');
            let dom = document.getElementById("app").innerHTML;
            console.log(dom);
            console.log("%c%s", "color:red", "el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red", "data   : " + this.$data);
            console.log("%c%s", "color:red", "message: " + this.message);
        },
        updated: function() {
            console.group('updated 更新完成状态===============》');
            let dom = document.getElementById("app").innerHTML;
            console.log(dom);
            console.log("%c%s", "color:red", "el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red", "data   : " + this.$data);
            console.log("%c%s", "color:red", "message: " + this.message);
        },
        beforeDestroy: function() {
            console.group('beforeDestroy 销毁前状态===============》');
            console.log("%c%s", "color:red", "el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red", "data   : " + this.$data);
            console.log("%c%s", "color:red", "message: " + this.message);
        },
        destroyed: function() {
            console.group('destroyed 销毁完成状态===============》');
            console.log("%c%s", "color:red", "el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red", "data   : " + this.$data);
            console.log("%c%s", "color:red", "message: " + this.message);
        }
    });

    // 销毁Vue对象
    //vm.$destroy();
    //vm.message = "hehe";	// 销毁后 Vue 实例会解绑所有内容

    // 设置data中message数据值
    vm.message = "good...";
</script>
</html>

页面效果：

image


Vue 异步操作

在 Vue 中发送异步请求，本质上还是 AJAX。我们可以使用 axios 这个插件来简化操作。

使用步骤：

  1. 引入 axios 核心 js 文件。
  2. 调用 axios 对象的方法来发起异步请求。
  3. 调用 axios 对象的方法来处理响应的数据。

axios常用方法：

image

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue 异步</title>
    <!-- 引入 Vue 核心 js 文件 -->
    <script src="../node_modules/vue/dist/vue.js"></script>
    <!-- 引入 axios js 文件 -->
    <script src="../axios/axios-0.18.0.js"></script>
</head>
<body>
<div id="div">
    {{name}}
    <button @click="send()">发起请求</button>
</div>
</body>
<script>
    new Vue({
        el:"#div",
        data:{
            name:"张三"
        },
        methods:{
            send(){
                // GET方式请求
                // axios.get("testServlet?name=" + this.name)
                //     .then(resp => {
                //         alert(resp.data);
                //     })
                //     .catch(error => {
                //         alert(error);
                //     })

                // POST方式请求
                axios.post("testServlet","name=" + this.name)
                    .then(resp => {
                        alert(resp.data);
                    })
                    .catch(error => {
                        alert(error);
                    })
            }
        }
    });
</script>
</html>

综合案例：学生管理系统

Web 工程地址：

https://github.com/juno3550/VueElementWebDemo

实现效果：

image



这篇关于Vue & Element的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！


相关编程文章

更多>
本站官方QQ
官方QQ:
23002807

沪ICP备2023033072号-1

     

扫一扫关注最新编程教程