Vue和Element基础

技术2025-07-18 13

Vue

Vue 介绍

Vue 是一套构建用户界面的渐进式前端框架。只关注视图层，并且非常容易学习，还可以很方便的与其它库或已有项目整合。通过尽可能简单的 API 来实现响应数据的绑定和组合的视图组件。特点易用：在有 HTML CSS JavaScript 的基础上，快速上手。灵活：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。性能：20kb min+gzip 运行大小、超快虚拟 DOM、最省心的优化。

Vue 快速入门

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>快速入门升级</title> </head> <body>  <div id="div"> <div>姓名：{{name}}</div> <div>班级：{{classRoom}}</div> <button οnclick="hi()">打招呼</button> <button οnclick="update()">修改班级</button> </div> </body> <script src="js/vue.js"></script> <script> // 脚本 let vm = new Vue({ // el 选项：用于接收获取到页面中的元素。(根据常用选择器获取)。 el:"#div", // data 选项：用于保存当前 Vue 对象中的数据。在视图中声明的变量需要在此处赋值。 data:{ name:"张三", classRoom:"1班" }, // methods 选项：用于定义方法。方法可以直接通过对象名调用，this 代表当前 Vue 对象 methods:{ study(){ alert(this.name + "正在" + this.classRoom + "好好学习!"); } } }); //定义打招呼方法 function hi(){ vm.study(); } //定义修改班级 function update(){ vm.classRoom = "2班"; } </script> </html>

Vue 常用指令

指令介绍

指令：是带有 v- 前缀的特殊属性，不同指令具有不同含义。例如 v-html，v-if，v-for。使用指令时，通常编写在标签的属性上，值可以使用 JS 的表达式。常用指令**😗*

1. 文本插值

v-html：把文本解析为 HTML 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>文本插值</title> </head> <body> <div id="div"> <div>{{msg}}</div> <div v-html="msg"></div> <div v-html="msg"></div> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el : "#div", data:{ msg: "<i>Hwllo Vue</i>"//使用V-html方法可以把文本解析成HTML代码 } }); </script> </html>

2. 绑定属性

v-bind：为 HTML 标签绑定属性值。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>绑定属性</title> <style> .my{ border: 1px solid red; } </style> </head> <body> <div id="div"> <a v-bind:href="url ">百度一下</a> <br> <a :href="url">百度一下</a> <br> <div :class="cls" id="myid">我是div</div> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el:"div", data:{ url:"http://www.4399.com", cls:"my", myid:"myid" } }) </script> </html>

3. 条件渲染

1. v-if：条件性的渲染某元素，判定为真时渲染,否则不渲染。 2. v-else：条件性的渲染。 3. v-else-if：条件性的渲染。 4. v-show：根据条件展示某元素，区别在于切换的是 display 属性的值 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>条件渲染</title> </head> <body> <div id="div">  <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 :10, flag:false } }); </script> </html>

4. 列表渲染

v-for：列表渲染，遍历容器的元素或者对象的属性

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>列表渲染</title> </head> <body> <div id="div"> <ul> <li v-for="name in names "> {{name}} </li> <li v-for="value in student"> {{value}} </li> </ul> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el:"#div", data :{ names:["张三","隔壁","老王"], student:{ name:"隔壁老王", age:23 } }} ) </script> </html>

5. 事件绑定

v-on：为 HTML 标签绑定事件。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>事件绑定</title> </head> <body> <div id="div"> <div>{{name}}</div> <button v-on:click="change()">改变div的内容</button> <button v-on:dblclick="xiugai1()">双击改变div的内容</button> <button @click="xiugai2()">改变div的内容</button>  <button @click="xiugai3()">改变div的内容</button> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el:"#div", data:{ name:"你*潮呀!" }, methods:{ change(){ this.name = "AABB" }, xiugai1(){ this.name = "太对了割" }, xiugai2(){ this.name = "割太对" }, xiugai3(){ this.name = "流川枫,流川枫" }, xiugai4(){ this.name = "交个朋友" } } }); </script> </html>

6. 表单绑定

v-model：在表单元素上创建双向数据绑定。

双向数据绑定

更新 data 数据，页面中的数据也会更新。更新页面数据，data 数据也会更新。

MVVM模型(Model View ViewModel)：是 MVC 模式的改进版

在前端页面中，JS 对象表示 Model，页面表示 View，两者做到了最大限度的分离。将 Model 和 View 关联起来的就是 ViewModel，它是桥梁。ViewModel 负责把 Model 的数据同步到 View 显示出来，还负责把 View 修改的数据同步回 Model。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表单绑定</title> </head> <body> <div id="div"> <form autocomplete="off"> 姓名：<input type="text" name="username" v-model="username"> <br> 年龄：<input type="number" name="age" v-model="age"> </form> <button @click="getUsername">text</button> </div> </body> <script src="js/vue.js"></script> <script> new Vue ({ el:"div", data:{ username:"隔壁老王", age:28 }, methods:{ getUsername:function () { alert(this.username), alert(this.age) } } }); </script> </html>

Element

Element 介绍

Element：网站快速成型工具。是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库。使用 Element 前提必须要有 Vue。组件：组成网页的部件，例如超链接、按钮、图片、表格等等~Element 官网：https://element.eleme.cn/#/zh-CN自己完成的按钮

6. lement 提供的按钮

<!DOCTYPE html> <html lang="en"> <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"> <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> <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> </html>

布局方式

基础布局：

将页面分成最多 24 个部分，自由切分。

<!DOCTYPE html> <html lang="en"> <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: rgb(241, 3, 134); } .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="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-dark"></div></el-col> </el-row> </div> </body> <script> new Vue({ el:"#div" }); </script> </html>

容器布局：

将页面分成头部区域、侧边栏区域、主区域、底部区域。

<!DOCTYPE html> <html lang="en"> <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> <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> </html>

表单组件

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

<!DOCTYPE html> <html lang="en"> <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> </head> <body> <div id="div"> <el-form :model="student" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="学生姓名" prop="name"> <el-input v-model="student.name" placeholder="请输入学生姓名"></el-input> </el-form-item> <el-form-item label="学生年龄" prop="age"> <el-input v-model="student.age" placeholder="请输入学生年龄"></el-inout> </el-form-item> <el-form-item label="家庭地址" prop="region"> <el-select v-model="student.region" placeholder="请选择家庭地址"> <el-option label="区域一" value="shanghai"></el-option> <el-option label="区域二" value="beijing"></el-option> </el-select> </el-form-item> </el-form> </div> </body> <script> new Vue({ el:"#div", data:{ student: { name: '', region: '', age:'' }, rules: { name: [ { required: true, message: '请输入活动名称', trigger: 'blur' }, { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' } ], region: [ { required: true, message: '请选择活动区域', trigger: 'change' } ] } }, 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>

表格组件

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

<!DOCTYPE html> <html lang="en"> <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> </head> <body> <div id="div"> <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 prop="age" label="年龄"> </el-table-column> </el-table> </template> </div> </body> <script> new Vue({ el:"#div", data(){ return { tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄', age:'18' }, { date: '2016-05-04', name: '王大虎', address: '上海市普陀区金沙江路 1517 弄', age:'28' }, { date: '2016-05-01', name: '王二虎', address: '上海市普陀区金沙江路 1519 弄', age:'38' }, { date: '2016-05-03', name: '王三虎', address: '上海市普陀区金沙江路 1516 弄', age:'48' }] } } }); </script> </html>

导航栏组件

顶部导航栏

<!DOCTYPE html> <html lang="en"> <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> </head> <body> <div id="div"> <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:"#div" }); </script> </html>

侧边导航栏

<!DOCTYPE html> <html lang="en"> <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> </head> <body> <div id="div"> <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:"#div" }); </script> </html>

Processed: 0.012, SQL: 9