本文介绍了Vue框架的基础知识和特性，包括其易用性、灵活性及高性能特点。通过一个快速入门示例展示了如何在HTML中使用Vue进行数据绑定和事件处理。此外，文章详细解释了Vue中的常用指令，如文本插值、属性绑定、条件渲染、列表渲染、事件绑定和表单绑定。最后，介绍了Element UI组件库，展示了如何使用其提供的按钮、布局、表单、表格和导航栏组件来构建美观的用户界面。
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">
<!-- 判断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 :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="xiugai4()">改变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="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>
扫一扫
1087
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
