vue介绍
Vue 是一套构建用户界面的渐进式前端框架。
只关注视图层,并且非常容易学习,还可以很方便的与其它库或已有项目整合。
通过尽可能简单的 API 来实现响应数据的绑定和组合的视图组件。
特点
- 易用:在有 HTML CSS JavaScript 的基础上,快速上手。
- 灵活:简单小巧的核心,渐进式技术栈,足以应付任何规模的应用。
- 性能:20kb min+gzip 运行大小、超快虚拟 DOM、最省心的优化。
快速入门
- 下载和引入 vue.js 文件。
https://cn.vuejs.org/ - 编写入门程序。
视图:负责页面渲染,主要由 HTML+CSS 构成。
脚本:负责业务数据模型(Model)以及数据的处理逻辑。
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<!-- 第一步:定义视图 -->
<div id="dv">
<!-- 使用{{}}获取属性 -->
{{msg}}
<!-- 使用'@事件名'绑定事件,@click表示绑定单击事件 -->
<button @click="study()">点击调用方法</button>
</div>
<script>
// 第二步:定义脚本
let vueObj = new Vue({
el:"#dv",
/*data中定义vueObj对象的属性*/
data:{
msg:"Hello Vue"
},
/*methods中定义vueObj对象的方法*/
methods:{
study:function(){
alert("为中华软件崛起而读书"+this.msg);
}
}
});
</script>
</body>
</html>
效果
快速入门小结
- vue对象的属性在data中,方法在methods
- 在vue对象中有个this,this表示当前vue对象,可以通过this.来调用方法和属性
- 一般情况下在一个页面只需要创建一个vue对象即可
- 使用vue绑定事件@click=’xx’ ‘单引号中如果调用无参方法,可以省略()’,如果是有参方法必须加()
指令
介绍
指令:是带有 v- 前缀的特殊属性,不同指令具有不同含义。例如 v-html,v-if,v-for。
使用指令时,通常编写在标签的属性上,值可以使用 js 的表达式。
指令 | 作用 |
---|---|
v-html | 把文本解析为HTML代码 |
v-bind | 为HTML标签绑定属性值 |
v-if 、v-else、v-else-if | 条件性的渲染某元素,判定为true时渲染,否则不渲染 |
v-show | 根据条件展示某元素,区别在于切换的是display属性的值 |
v-for | 列表渲染,遍历容器的元素或者对象的属性 |
v-on | 为HTML标签绑定事件 |
v-model | 在表单元素上创建双向数据绑定 |
文本插值
双大括号
数据绑定最常见的形式就是使用(双大括号)的文本插值,入门案例中已经用过,表示获取vue对象的属性值
{{msg}}
v-html和v-text
说明
只能作用于双标签,比如
,不能作用于自闭合标签,比如。底层调用innerText或innerHTML操作标签体内容<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body >
<div id="app">
<!-- 会将message的值直接以普通字符串形式展示到页面 -->
<div v-text="message" style="background-color: red;"></div>
<!-- 会将message的值解析,然后展示到页面 -->
<div v-html="message" style="background-color: seagreen;"></div>
</div>
<script>
new Vue({
el:"#app",
data:{
message:"<a href='#'>百度</a>"
}
});
</script>
</body>
</html>
运行结果
条件渲染v-if
- v-if和v-show这两个指令都是控制元素是否要显示到页面。运行效果一模一样。
- v-if的结果如果是false则元素不会被插入到页面,v-show的结果是false则元素会被插入到页面,但是display的值是none。如果某个元素需要频繁的显示隐藏,那么就是用v-show,不需要vue框架频繁渲染dom,效率更高。
案例:判断gender的值,如果是1页面显示男,如果是0页面显示女。分别用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>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<span v-show="gender==1">男</span>
<span v-show="gender==0">女</span>
<button @click='change'>变</button>
</div>
<script>
new Vue({
el:"#app",
data:{
gender:1
},
methods:{
//修改gender的值
change:function(){
if(this.gender==1){
this.gender=0;
}else{
this.gender=1;
}
}
}
});
</script>
</body>
</html>
运行效果
列表渲染v-for
简单语法,遍历的时候仅仅获取元素
遍历数组 v-for="item in arr"
遍历对象 v-for="item in obj"
复杂语法,遍历的时候不仅可以获取元素,还可以获取索引
遍历数组:v-for="(item,index) in arr"
遍历对象: v-for="(value,key,index) in obj"
遍历数组代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<ol>
<li v-for="site in sites">
{{ site.name }}
</li>
</ol>
</div>
<script>
new Vue({
el: '#app',
data: {
sites: [
{ name: 'Runoob' },
{ name: 'Google' },
{ name: 'Taobao' }
]
}
})
</script>
</body>
</html>
效果
遍历对象代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<ol style="list-style: none;">
<li v-for="(v,k,i) in person">
属性值:{{ v }} 属性名:{{k}} 索引:{{i}}
</li>
</ol>
</div>
<script>
new Vue({
el: '#app',
data: {
person:{
name:"jack",
age:34
}
}
})
</script>
</body>
</html>
效果
绑定事件v-on
事件监听可以使用 v-on:事件名=""
指令,简写@事件名=""
注意事项
- @事件名=”” 双引号中只能写调用方法的代码或者操作vue对象属性的代码
- 如果双引号中调用方法是无参的,那么()可以省略,如果双引号中调用属性,不能加this
案例:vue对象中有个属性num值是1,在页面添加按钮并给按钮绑定单击事件,单击时将num的值+1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 适口,一般针对移动端页面使用,目的是为了禁止页面的缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 第一步:引入js -->
<script src="js/vue.js"></script>
</head>
<body>
<!-- 第二步:创建容器,用于显示数据 -->
<div id="app">
{{num}}
<!-- 调用方法,因为是无参的,所以()可以省略 -->
<button @click="play">点我</button>
<!-- 直接操作属性,不能加this -->
<button @click="num++" >点我</button>
</div>
<!-- 第三步:定义Vue对象,将数据存进去 -->
<script>
new Vue({
el:"#app",
data:{
num:0
},
methods:{
play:function(){
this.num++;
}
}
});
</script>
</body>
</html>
运行效果
属性绑定v-bind
单向数据绑定 内存改变影响页面改变. 其实是对属性的简单赋值,当内存中值改变,还是会触发重新渲染
语法v-bind:属性名='值'
,简化语法::属性名='值'
案例:一只vue对象的属性值有两个,分别是url:”http://www.baidu.com",img:" //www.baidu.com/img/flexible/logo/pc/result.png “,请将该属性分别绑定给a和img标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<a :href="url">百度</a>
<img :src="img" alt="">
</div>
<script>
new Vue({
el:"#app",
data:{
url:"http://www.baidu.com",
img:" //www.baidu.com/img/flexible/logo/pc/result.png "
}
});
</script>
</body>
</html>
表单绑定v-model
双向数据流(绑定)
- 页面改变影响内存(js)
- 内存(js)改变影响页面
使用v-model=""
可以将vue对象中的属性值与表单的值双向绑定:表单的值发送改变,那么vue对象的属性值也会发生改变,vue对象的属性值发生改变,表单的值也会发生改变。
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<form action="">
用户名<input v-model="formData.username"> <br>
密码<input v-model="formData.password"> <br>
爱好 <input type="checkbox" v-model="formData.hobbies" value="eat"> 吃 <input type="checkbox" v-model="formData.hobbies" value="drink"> 喝 <br>
性别 <input type="radio" v-model="formData.gender" value="man"> 男 <input type="radio" v-model="formData.gender" value="woman"> 女 <br>
祖籍 <select v-model="formData.address">
<option value="shandong">山东</option>
<option value="shanxi">山西</option>
</select>
</form>
<button type="button" @click="print()">打印表单数据到控制台</button>
</div>
<script>
new Vue({
el:"#app",
data:{
formData:{
username:"",
password:"",
hobbies:[],
gender:"",
address:""
}
},
methods:{
print:function(){
console.log(this.formData);
}
}
})
</script>
</body>
</html>
当输入表单数据,点击打印表单数据到控制台按钮,输出结果如下
单向绑定与双向绑定
单向绑定
双向绑定
ElementUI
学习目标
使用ElementUI编写学生列表页面,效果如下.使用文档参见官网
介绍
Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助你的网站快速成型。 点击直达ElementUI主页
快速入门
下面是使用ElmentUI构建页面的开发步骤
- 下载 Element 核心库。https://element.eleme.cn/#/zh-CN/component/installation
- 引入 Element 样式文件,所在目录
lib/theme-chalk/index.css
- 引入 Vue 核心 js 文件
- 引入 Element 核心 js 文件,所在目录
lib/index.js
- 编写按钮标签。
- 通过 Vue 核心对象加载元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 第一步:引入Vue和ElementUI相关样式与JS -->
<script src="js/vue.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script src="element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<!-- 第二步:使用ElementUI提供的组件 -->
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
</div>
<script>
// 第三步:创建Vue对象,加载元素
new Vue({
el:"#app",
});
</script>
</body>
</html>
Layout 布局
通过基础的 24 分栏,迅速简便地创建布局。 一行最多允许分成24列。
使用方式
- 使用el-row定义行标签
- 使用el-col定义列标签
- 在el-col 标签中使用:span绑定该列所占的份额
通过 row 和 col 组件,并通过 col 组件的 span
属性我们就可以自由地组合布局。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入Vue和ElementUI相关样式与JS -->
<script src="js/vue.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script src="element-ui/lib/index.js"></script>
<style>
.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">
<!-- 1.使用<el-row>定义行标签 -->
<el-row>
<!-- 2.使用<el-col>定义列标签,一行24栏,当前列栈10栏 -->
<el-col :span="10"><div class="grid-content bg-purple-dark"></div></el-col>
<!-- 2.使用<el-col>定义列标签,一行24栏,当前列栈10栏 -->
<el-col :span="10"><div class="grid-content bg-purple-light"></div></el-col>
<!-- 2.使用<el-col>定义列标签,一行24栏,当前列栈4栏 -->
<el-col :span="4"><div class="grid-content bg-purple-dark"></div></el-col>
</el-row>
</div>
<script>
new Vue({
el:"#app",
});
</script>
</body>
</html>
效果
Container 布局容器
容器布局:将页面分成头部区域、侧边栏区域、主区域、底部区域。
el-container标签中可以包含:el-container、el-header、el-aside、el-main、el-footer五个标签,默认el-container中的标签会从左向右排列,如果包含el-header或者el-footer,那么从上往下排列
代码
<!DOCTYPE html>
<html lang="en" style="height: 100%;">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入Vue和ElementUI相关样式与JS -->
<script src="js/vue.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script src="element-ui/lib/index.js"></script>
<style>
*{
padding: 0;
margin: 0;
}
</style>
</head>
<body style="height: 100%;">
<div id="app" style="height: 100%;">
<!--html,body,div高度100%,并且使用*{}去掉默认的padding和margin值-->
<el-container style="height: 100%;">
<el-header style="background-color: #B3C0D1;">Header</el-header>
<el-container >
<el-aside style="background-color: #D3DCE6;">Aside</el-aside>
<el-container style="height: 100%;">
<el-main style="background-color: #E9EEF3;">Main</el-main>
<el-footer style="background-color:#B3C0D1;">Footer</el-footer>
</el-container>
</el-container>
</el-container>
</div>
<script>
new Vue({
el:"#app",
});
</script>
</body>
</html>
效果
表单
由输入框、选择器、单选框、多选框等控件组成,用以收集、校验、提交数据
代码
<!DOCTYPE html>
<html lang="en" style="height: 100%;">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入Vue和ElementUI相关样式与JS -->
<script src="js/vue.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script src="element-ui/lib/index.js"></script>
<style>
*{
padding: 0;
margin: 0;
}
</style>
</head>
<body style="height: 100%;">
<div id="app" style="height: 100%;">
<el-form :model="myForm" :rules="myRules" ref="ruleFormxxx" label-width="100px" class="demo-ruleForm">
<!-- prop表示检验规则的名字 -->
<el-form-item label="帐号" prop="usernameRule">
<el-input v-model="myForm.username"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm()">立即创建</el-button>
<el-button @click="resetForm()">重置</el-button>
</el-form-item>
</el-form>
</div>
<script>
new Vue({
el:"#app",
data:{
myForm:{
},
myRules:{
usernameRule:[
{ required: true, message: '请输入帐号', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
]
}
},
methods: {
submitForm:function() {
this.$refs["ruleFormxxx"].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm() {
this.$refs["ruleFormxxx"].resetFields();
}
}
});
</script>
</body>
</html>
效果
vue表单校验 : 正则表达式校验
rules: {//校验规则
price: [ // 金额正则表达式校验
{required: true, message: '项目编码为必填项', trigger: 'blur'},
{
required: true,
pattern:/^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/,
message: '输入的金额不合法',
trigger: 'blur'
}
]
}
各属性对应关系
axios异步请求
Get请求传参格式
格式一
axios.get('/user?id=12345&name=user')
.then(function (res) {
console.log(res);
}).catch(function (err) {
console.log(err);
});
格式二
axios.get('/user', { //params参数必写 , 如果没有参数传{}也可以
params: {
id: 12345,
name: user
}
})
.then(function (res) {
console.log(res);
})
.catch(function (err) {
console.log(err);
});
Post请求传参格式
直接传值后端获取不到数据,需要设置请求头
格式一
将数据转换拼接到URL中传给服务器,不安全
axios({
headers: {
'Content-Type': 'application/json;'
},
method: 'post',
transformRequest: [function (data) {
return JSON.stringify(data)
}],
url: '接口地址',
params: {//表单数据
}
}).then(resp=>{
}).catch(function (error) {
console.log(error);
}).finally(()=>{
})
格式二
URL中不会显示数据,更安全,需要导入Qs工具类 点击下载Qs工具类
axios.post("接口地址",Qs.stringify({
currentPage:1,
pageSize:3
})).then(resp=>{
console.log(resp)
}).catch(error=>{
console.log(error)
}).finally(()=>{
});
分页查询
接口信息
功能:分页查询学生列表,该接口接收startPage,pageSize两个参数,返回当前页需要的数据
效果
步骤
引入表格和分页组件
<el-table :data="tableData">
<el-table-column prop="number" label="学号" width="120">
</el-table-column>
<el-table-column prop="name" label="姓名" width="120">
</el-table-column>
<el-table-column prop="birthday" label="生日" width="140">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
<el-table-column label="操作" width="180">
<template slot-scope="props">
<el-button type="warning">编辑</el-button>
<el-button type="danger">删除</el-button>
</template>
</el-table-column>
</el-table>
<!--
分页组件
@size-change: 当改变每页条数时触发的函数
@current-change:当改变页码时触发的函数
current-page :默认的页码
:page-sizes:每页条数选择框中显示的值
:page-size : 默认的每页条数
layout: 分页组件的布局
total(总条数), sizes(每页条数), prev(上一页), pager(所有的页码), next(下一页), jumper(跳转页码)
:total: 总条数
-->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pagination.currentPage"
:page-sizes="[3,5,8]"
:page-size="pagination.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="pagination.total">
</el-pagination>
初始化表格和分页条数据
<script>
new Vue({
el: "#div",
data: {
tableData: [],//表格数据
pagination: {
currentPage: 1, //当前页
pageSize: 5, //每页显示条数
total: 0 //总条数
}
}
});
</script>
编写方法分页查询数据以及分页组件需要的handleSizeChange和handleCurrentChange方法
methods: {
/*分页查询*/
findByPage: function () {
axios.get("FindStudentByPageServlet", {
params: {
pageSize: this.pagination.pageSize,
currentPage: this.pagination.currentPage
}
}).then(resp => {
this.tableData = resp.data.list;//设置表格数据
this.pagination.currentPage = resp.data.pageNum;//设置当前页
this.pagination.total = resp.data.total;//设置总条数
});
},
//改变每页条数时执行的函数
handleSizeChange(pageSize) {
//修改分页查询的参数
this.pagination.pageSize = pageSize;
//重新执行查询
this.findByPage();
},
//改变页码时执行的函数
handleCurrentChange(pageNum) {
//修改分页查询的参数
this.pagination.currentPage = pageNum;
//重新执行查询
this.findByPage();
},
}
组件加载完毕后初始化分页条
created: function () {
this.findByPage();
}
完整js代码
<script>
new Vue({
el: "#div",
data: {
tableData: [],//表格数据
pagination: {
currentPage: 1, //当前页
pageSize: 5, //每页显示条数
total: 0 //总条数
}
},
methods: {
/*分页查询*/
findByPage: function () {
axios.get("FindStudentByPageServlet", {
params: {
pageSize: this.pagination.pageSize,
currentPage: this.pagination.currentPage
}
}).then(resp => {
this.tableData = resp.data.list;//设置表格数据
this.pagination.currentPage = resp.data.pageNum;//设置当前页
this.pagination.total = resp.data.total;//设置总条数
});
},
//改变每页条数时执行的函数
handleSizeChange(pageSize) {
//修改分页查询的参数
this.pagination.pageSize = pageSize;
//重新执行查询
this.findByPage();
},
//改变页码时执行的函数
handleCurrentChange(pageNum) {
//修改分页查询的参数
this.pagination.currentPage = pageNum;
//重新执行查询
this.findByPage();
},
},
created: function () {
this.findByPage();
}
});
</script>