Vue
Vue概述
- Vue是一套前端框架，免除原生JavaScript中的DOM操作，简化书写
- 基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上
- 官网：https://cn.vuejs.org/
MVC：只能实现模型到视图的单向展示
MVVM：可以实现数据的双向绑定
Vue快速入门
- 新建HTML页面，引入Vue.js文件
- 在JS代码区域，创建Vue核心对象，进行数据绑定
- 编写视图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--3--> <div id="app"> <input name="username" v-model="username"> <!--插值表达式--> {{username }} </div> <!--1--> <script src="js/vue.js"></script> <script> //2 new Vue({ //选择器 el:"#app", //数据 data(){ return{ username:"" } } }); </script> </body> </html>
Vue常用指令
指令：HTML标签上带有v-前缀的特殊属性，不同指令具有不同含义。
常用指令
指令 作用 v-bind 为HTML标签绑定属性值，如设置href，css样式等 v-model 在表单元素上创建双向数据绑定 v-on 为HTML标签绑定事件 v-if 条件性的渲染某元素，判定为true则渲染，判定为false则不渲染 v-else 条件性的渲染某元素，判定为true则渲染，判定为false则不渲染 v-else-if 条件性的渲染某元素，判定为true则渲染，判定为false则不渲染 v-show 根据条件展示某元素，区别在于切换的是display属性的值 v-for 列表渲染，遍历容器的元素或者对象的属性
v-bind
<body>
<div id="app">
<a v-bind:href="url">点击一下</a>
<!--简化书写-->
<a :href="url">点击一下</a>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#app",
data(){
return{
username:"",
url:"http://www.baidu.com"
}
}
});
</script>
</body>
v-model
<body>
<div id="app">
<a v-bind:href="url">点击一下</a>
<!--简化书写-->
<a :href="url">点击一下</a>
<input v-model="url">
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#app",
data(){
return{
username:"",
url:"http://www.baidu.com"
}
}
});
</script>
</body>
v-on
<body>
<div id="app">
<input type="button" value="btn" v-on:click="show()">
<!--简化书写-->
<input type="button" value="btn" @click="show()">
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#app",
methods:{
show(){
alert("clicked");
}
}
});
</script>
</body>
v-if & v-else-if & v-else
<body>
<div id="app">
<div v-if="count==1">div1</div>
<div v-else-if="count==2">div2</div>
<div v-else>div3</div>
<input v-model="count">
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#app",
data(){
return{
count:3
}
}
});
</script>
</body>
v-show
<body>
<div id="app">
<div v-show="count==3">div v-show</div>
<input v-model="count">
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#app",
data(){
return{
count:3
}
}
});
</script>
</body>
v-for
<body>
<div id="app">
<div v-for="addr in addrs">
{{addr}}<br>
</div>
<!--加索引-->
<div v-for="(addr,i) in addrs">
{{i+1}}--{{addr}}<br>
</div>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#app",
data(){
return{
addrs:["beijing", "shanghai", "jinagsu"]
}
}
});
</script>
</body>
Vue生命周期
- 生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法（钩子）
状态 阶段周期 beforeCreate 创建前 created 创建后 beforeMount 载入前 mounted 挂载完成 beforeUpdate 更新前 updated 更新后 beforeDestroy 销毁前 destroyed 销毁后 - mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。
- 发送异步请求
<!--使用方法-->
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#app",
mounted:function(){
alert("vue挂载完毕");
},
//简化书写
mounted(){
alert("vue挂载完毕");
}
});
</script>
案例
使用Vue简化品牌列表数据查询和添加功能
<!--brand.html-->
<body>
<div id="app">
<input type="button" value="add" id="add"><br>
<table border="1" cellspacing="0" width="800" id="brandTable">
<tr>
<th>ID</th>
<th>品牌</th>
<th>公司</th>
<th>状态</th>
<th>操作</th>
</tr>
<!--遍历，使用v-for-->
<tr v-for="(brand,i) in brands" align="center">
<td>{{i + 1}}</td>
<td>{{brand.brandName}}</td>
<td>{{brand.companyName}}</td>
<td>{{brand.statusStr}}</td>
<td><a href="#">编辑</a> <a href="#">删除</a></td>
</tr>
</table>
</div>
<script src="js/axios.js"></script>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#app",
data(){
return{
brands:[]
}
},
mounted(){
//页面加载完成后，发送异步请求，查询数据
//提取Vue的this对象
var _this = this;
axios({
method:'get',
url:'http://localhost:8080/Demo7/selectAllServlet'
}).then(function (response){
//this.brands = response.data; 此处的this是axios的this对象
_this.brands = response.data;
})
}
})
</script>
<script>
document.getElementById("add").onclick = function () {
window.location.href = "/Demo7/addBrand.html";
}
</script>
</body>
<!--addBrand.html-->
<body>
<div id="app">
<h3>添加品牌</h3>
<form action="/Demo7/addServlet" method="post">
brandName:<input type="text" name="brandName" id="brandName" v-model="brand.brandName"/><br>
companyName:<input type="text" name="companyName" id="companyName" v-model="brand.companyName"/><br>
status:
<input type="radio" name="status" value="0" v-model="brand.status"/>禁用
<input type="radio" name="status" value="1" v-model="brand.status"/>启用<br>
<input type="submit" value="提交" @click="submitForm" id="btn"/>
</form>
</div>
<script src="js/axios.js"></script>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#app",
data(){
return{
brand:{}
}
},
methods:{
submitForm(){
//发送ajax请求
var _this = this;
axios({
method:"post",
url:"http://localhost:8080/Demo7/addServlet",
data:_this.brand
}).then(function (response){
if(response.data == "success"){
location.href = "http://localhost:8080/Demo7/brand.html";
}
})
}
}
})
</script>
</body>
Element
Element：基于Vue的网站组件库，用于快速构建网页
组件：组成网页的部件，例如：超链接、按钮、图片、表格等
官网：https://element.eleme.cn/#/zh-CN
Element快速入门
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组件代码
<div id="app">
<el-button type="danger">危险按钮</el-button>
</div>
Element布局
1. Layout布局
通过基础的24分栏，迅速简便地创建布局
<head>
<meta charset="UTF-8">
<title>demo</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">
<el-row>
<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>
<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>
2. Container布局
用于布局地容器组件，方便快速搭建页面的基本结构
<head>
<meta charset="UTF-8">
<title>demo</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>
Element组件
在Element官网上找需要的组件，加以修改便可使用。
具体使用详见综合案例
