目录
【Vue】
【概述】
- Vue 是一套前端框架,免除原生JavaScript中的DOM操作,简化书写
- 基于MVVM(Model-View-ViewModel)思想,实现数据的双向绑定,将编程的关注点放在数据上
【使用】
1、新建HTML页面,引入Vue.js文件
<script src="js/vue.js"></script>
2、在JS代码区域,创建Vue核心对象,进行数据绑定
//创建vue核心对象
new Vue({
el: "#app",
data() {
return {
username: ""
}
}
})
3、编写视图
<div id="app">
<input v-model="username">
<!--插值表达式-->
{{username}}
</div>
【Vue指令】
【概述】
指令:HTML 标签上带有 v- 前缀的特殊属性,不同指令具有不同含义。例如:v-if,v-for…
【常用指令】
指令 | 作用 |
v-bind | 为HTML标签绑定属性值,如设置href,css样式等 |
v-model | 在表单元素上创建双向数据绑定 |
【v-bind】
<a v-bind:href="url">点击一下</a>或
<a :href="url">点击一下</a>
【v-model】
<input name="username" v-model="username">
例:
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<a v-bind:href="url">点击一下</a>
<input v-model="url">
</div>
<script src="js/vue.js"></script>
<script>
//创建vue核心对象
new Vue({
el: "#app",
data() {
return {
username: "",
url: "https://www.baidu.com"
}
}
})
</script>
</body>
</html>
指令 | 作用 |
v-on | 为HTML标签绑定事件 |
【v-on】
- html
<input type="button" value="一个按钮" v-on:click="show()">
<input type="button" value="一个按钮" @click="show()">
- vue
new Vue({
el: "#app",
methods:{
show() {
alert("我被点了");
}
}
});
例:
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input type="button" value="一个按钮" v-on:click="show()"><br>
</div>
<script src="js/vue.js"></script>
<script>
//创建vue核心对象
new Vue({
el: "#app",
data() {
return {
username: "",
url: "https://www.baidu.com"
}
},
methods:{
show() {
alert("我被点了");
}
}
});
</script>
</body>
</html>
指令 | 作用 |
v-if | 条件性的渲染某元素,判定为true时渲染,否则不渲染 |
v-else | |
v-else-if | |
v-show | 根据条件展示某元素,区别在于切换的时display属性的值 |
【v-if】
<div v-if="count ==3">div1</div>
<div v-else-if="count ==4">div2</div>
<div v-else>div3</div>
【v-show】
<div v-show="count==2">div-show</div>
例:
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<div v-if="count ==3">div1</div>
<div v-else-if="count ==4">div2</div>
<div v-else>div3</div>
<hr>
<div v-show="count==2">div-show</div>
<br>
<input v-model="count">
</div>
<script src="js/vue.js"></script>
<script>
//创建vue核心对象
new Vue({
el: "#app",
data() {
return {
username: "",
url: "https://www.baidu.com",
count: "3"
}
},
methods: {
show() {
alert("我被点了");
}
}
});
</script>
</body>
</html>
指令 | 作用 |
v-for | 列表渲染,遍历容器的元素或者对象的属性 |
【v-for】
<div v-for="adder in address">
{{adder}}<br>
</div>
<div v-for="(adder,i) in address">
<!--i表示索引,从0开始-->
{{i+1}}--{{adder}}<br>
</div>
例:
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<div v-for="adder in address">
{{adder}}<br>
</div>
<hr>
<div v-for="(adder,i) in address">
{{i+1}}--{{adder}}<br>
</div>
</div>
<script src="js/vue.js"></script>
<script>
//创建vue核心对象
new Vue({
el: "#app",
data() {
return {
username: "",
url: "https://www.baidu.com",
count: "3",
address:["北京","西安","上海"]
}
},
methods: {
show() {
alert("我被点了");
}
}
});
</script>
</body>
</html>
【Vue生命周期】
生命周期的八个阶段:每触发一个生命周期事件,会自动执行一个生命周期方法(钩子)
状态 | 阶段周期 |
berforeCreate | 创建前 |
created | 创建后 |
beforeMount | 载入前 |
mounted | 挂载完成 |
beforeUpdate | 更新前 |
updated | 更新后 |
befoerDestroy | 销毁前 |
destroyed | 销毁后 |
【mounted】
挂载完成,Vue初始化成功,HTML页面渲染成功。
new Vue({
el:"#app",
mounted(){
alert("vue 挂载完毕,发送异步请求");
}
});
【作用】
发送异步请求,加载数据
例:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
</div>
<script src="js/vue.js"></script>
<script>
//创建vue核心对象
new Vue({
el: "#app",
data() {
return {
username: "",
url: "https://www.baidu.com",
count: "3",
address:["北京","西安","上海"]
}
},
methods: {
show() {
alert("我被点了");
}
},
mounted(){
alert("加载完成")
}
});
</script>
</body>
</html>
【Element】
【概述】
Element:是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库,用于快速构建网页
组件:组成网页的部件,例如 超链接、按钮、图片、表格等等~
【官网】
【使用】
1、引入Element的css、js文件和Vue.js
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
2、创建Vue核心对象
<script>
new Vue({
el:"#app"
})
</script>
3、官网复制Element组件代码
<el-row>
<el-button type="danger">删除</el-button>
</el-row>
例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<el-row>
<el-button type="danger">删除</el-button>
</el-row>
</div>
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script>
new Vue({
el:"#app"
})
</script>
</body>
</html>
【Element布局】
【方式】
- Layout布局:通过基础的24分栏,迅速简便地创建布局
例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.el-row {
margin-bottom: 20px;
}
.el-col {
border-radius: 4px;
}
.bg-purple-dark {
background: #99a9bf;
}
.bg-purple {
background: #d3dce6;
}
.bg-purple-light {
background: #e5e9f2;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
}
.row-bg {
padding: 10px 0;
background-color: #f9fafc;
}
</style>
</head>
<body>
<div id="app">
<!--
添加一行,8个格子
-->
<el-row>
<el-col :span="3"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="3"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="3"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="3"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
</div>
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script>
new Vue({
el:"#app"
})
</script>
</body>
</html>
- Container布局容器:用于布局的容器组件,方便快速搭建也买你的基本结构
例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.el-header {
background-color: #B3C0D1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
</style>
</head>
<body>
<div id="app">
<el-container style="height: 500px; border: 1px solid #eee">
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<el-menu :default-openeds="['1', '3']">
<el-submenu index="1">
<template slot="title"><i class="el-icon-message"></i>导航一</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">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-menu"></i>导航二</template>
<el-menu-item-group>
<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-group>
<el-menu-item-group title="分组2">
<el-menu-item index="2-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="2-4">
<template slot="title">选项4</template>
<el-menu-item index="2-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="3">
<template slot="title"><i class="el-icon-setting"></i>导航三</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="3-1">选项1</el-menu-item>
<el-menu-item index="3-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="3-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="3-4">
<template slot="title">选项4</template>
<el-menu-item index="3-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu>
</el-aside>
<el-container>
<el-header style="text-align: right; font-size: 12px">
<el-dropdown>
<i class="el-icon-setting" style="margin-right: 15px"></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>查看</el-dropdown-item>
<el-dropdown-item>新增</el-dropdown-item>
<el-dropdown-item>删除</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<span>王小虎</span>
</el-header>
<el-main>
<el-table :data="tableData">
<el-table-column prop="date" label="日期" width="140">
</el-table-column>
<el-table-column prop="name" label="姓名" width="120">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
</el-table>
</el-main>
</el-container>
</el-container>
</div>
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script>
new Vue({
el:"#app",
data() {
const item = {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
};
return {
tableData: Array(20).fill(item)
}
}
})
</script>
</body>
</html>
【Element组件】
【案例】
实现如图页面
例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>品牌列表</title>
<style>
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
</style>
</head>
<body>
<div id="app">
<!--表单-->
<el-form :inline="true" :model="brand" class="demo-form-inline">
<el-form-item label="当前状态">
<el-select v-model="brand.status" placeholder="当前状态">
<el-option label="启用" value="1"></el-option>
<el-option label="禁用" value="0"></el-option>
</el-select>
</el-form-item>
<el-form-item label="企业名称">
<el-input v-model="brand.companyName" placeholder="企业名称"></el-input>
</el-form-item>
<el-form-item label="品牌名称">
<el-input v-model="brand.brandName" placeholder="品牌名称"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item>
</el-form>
<!--按钮-->
<el-row>
<el-button type="danger" plain>批量删除</el-button>
<el-button type="primary" plain @click="dialogVisible = true">新增</el-button>
</el-row>
<!--添加数据的对话框-->
<el-dialog
title="编辑品牌"
:visible.sync="dialogVisible"
width="30%">
<el-form ref="form" :model="brand" label-width="80px">
<el-form-item label="品牌名称">
<el-input v-model="brand.brandName"></el-input>
</el-form-item>
<el-form-item label="企业名称">
<el-input v-model="brand.companyName"></el-input>
</el-form-item>
<el-form-item label="排序">
<el-input v-model="brand.ordered"></el-input>
</el-form-item>
<el-form-item label="备注">
<el-input type="textarea" v-model="brand.description"></el-input>
</el-form-item>
<el-form-item label="状态">
<el-switch v-model="brand.status"
active-value="1"
inactive-value="0"></el-switch>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="addBrand">提 交</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</el-form-item>
</el-form>
</span>
</el-dialog>
<!--表格-->
<template>
<el-table
:data="tableData"
style="width: 100%"
:row-class-name="tableRowClassName"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
type="index"
width="50">
</el-table-column>
<el-table-column
prop="brandName"
label="品牌名称"
align="center">
</el-table-column>
<el-table-column
prop="companyName"
label="企业名称"
align="center">
</el-table-column>
<el-table-column
prop="ordered"
label="排序"
align="center">
</el-table-column>
<el-table-column
prop="status"
label="当前状态"
align="center">
</el-table-column>
<el-table-column
label="操作"
align="center">
<el-row>
<el-button type="primary">修改</el-button>
<el-button type="danger">删除</el-button>
</el-row>
</el-table-column>
</el-table>
</template>
<!--分页工具条-->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage4"
:page-sizes="[5,10,15,20]"
:page-size="5"
layout="total, sizes, prev, pager, next, jumper"
:total="400">
</el-pagination>
</div>
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script>
new Vue({
el: "#app",
methods: {
tableRowClassName({row, rowIndex}) {
if (rowIndex === 1) {
return 'warning-row';
} else if (rowIndex === 3) {
return 'success-row';
}
return '';
},
//复选框选中后执行的方法
handleSelectionChange(val) {
this.multipleSelection = val;
console.log(this.multipleSelection);
},
//查询方法
onSubmit() {
console.log(this.brand);
},
//添加数据
addBrand() {
console.log(this.brand);
},
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
}
},
data() {
return {
//当前页码
currentPage: 4,
//添加数据对话框是否展示的标记
dialogVisible: false,
//品牌数据模型
brand: {
status: '',
brandName: '',
companyName: '',
id: '',
ordered: '',
description: ''
},
//复选框选中数据集合
multipleSelection: [],
//表格数据
tableData: [{
brandName: '小米',
companyName: '小米科技有限公司',
ordered: '100',
status: "1"
}, {
brandName: '小米',
companyName: '小米科技有限公司',
ordered: '100',
status: "1"
}, {
brandName: '小米',
companyName: '小米科技有限公司',
ordered: '100',
status: "1"
}, {
brandName: '小米',
companyName: '小米科技有限公司',
ordered: '100',
status: "1"
}]
}
}
})
</script>
</body>
</html>