ES6
1.什么是ECMAScript？
全称：ECMAScript （ECMA：欧洲计数机制造协会），其实就是JavaScript
2.ES5和ES6的一些新特性
2.1.let 和 const 命令
let 定义局步变量
let关键字是ES6的规范，idea默认支持的是ES5.1
const：常量
2.2.字符串的扩展
String的原始的方法有：
* indexOf：返回字符串的索引
* lastIndexOf：返回字符串的最后的索引
* length：获取字符串的长度
* substr(i,v)：从第i个索引开始截取v个长度的字符
* substring(i,v)：从第i个索引开始截取v个位置（不包含v）
* charAt(i)：获取第i个位置的字符
* concat：字符串连接
新的API：
* includes()：返回布尔值，表示是否找到了参数字符串
* startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部
* endsWith() ：返回布尔值，表示参数是否在原字符串的尾部
模板字符串：
let str = `
Hello
World
`;
在控制台显示的是 :
Hello
World
3.解构表达式
3.1.数组解构
比如：let arr = [1,2,3]
我想获取其中的值，只能通过角标，ES6可以这样
const [x,y,z] = arr; //x,y,z将与arr中的每一个位置对应来取值
//x=1，y=2，z= 3
3.2.对象解构
比如有一个person对象：
const person = {
name : "jack",
age : 21,
language : ['java','js','css']
}
解构操作，我们可以这么做：
const {name,age,language} = person
// name = jack
// age = 21
//language = ['java',;'js','css']
4.函数优化-函数的简写方式
//定义一个方法，计数a，b的值，如果b为null则将b赋值为 1
//传统写法
function add1(a,b) {
if (b == null) {
b = 1;
}
return a + b;
}
//传统改进写法一
function add2(a,b) {
if (!b) {
b = 1;
}
return a + b;
}
//传统改进写法二
function add3(a,b) {
b = b || 1;
return a + b;
}
//函数的简写方式
function add4(a,b = 1) {
return a + b;
}
5.箭头函数（掌握）
箭头函数：箭头函数不是必须的，但是使用箭头函数可以少写很多代码
代码演示：
/*******一个参数使用箭头函数**********/
/*******当使用了箭头函数可以少写很多代码**********/
//正常的定义函数
function print1(a) {
return a + 1;
}
//匿名函数
var print2 = function (a) {
return a + 1;
}
//箭头表达式
var print3 = a => {
return a +1;
}
//当只有一行打印时可以省略大括号和return
var print4 = a => a + 1;
/*******多个参数使用箭头函数**********/
//正常的定义函数
function print5(a,b) {
return a + b;
}
//匿名函数
var print6 = function (a,b) {
return a + b;
}
//箭头表达式
//同样的，当打印只有一行的时候可以省略大括号和return
var print7 = (a,b) => a+b;
6.对象的函数的属性的简写
//对象函数属性的简化
let person = {
name : "jimmy",
eat1 : function (food) {
console.log(this.name + "正在吃：" + food);
},
//箭头函数版 （这里拿不到this）
eat2 : food => console.log(person.name + "正在吃：" + food),
//简写版
eat3(food){
console.log(this.name + "正在吃：" + food)
}
}
7.数组的map方法
map()：接收一个函数，将原数组中的所有元素用这个函数处理后放回新数组返回
举列：有一个字符串数组，我们希望转为int数组
let arr = ["1","20","-5"]
console.log(arr)
arr = arr.map(s => parseInts(s));
console.log(arr)
vue
1.MVVM
MVVM：关注模板和视图–相当于后端的MVC，但是前段的MVVM比MVC强大
MVVM模式：
M：即Model，模型，包括数据可一些基本操作（数据层）
V：即View，视图，页面渲染结果（视图层）
VM：即View-Model，模型与视图间的双向操作，无需开发人员干涉（将Model层和View层绑定在一起的层，这一层vue已经自动完成好了）
MVVM模式的好处：
开发人员从后端获取的数据模型，然后通过DOM操作Model渲染到View中，而当用户操作视图，我们还需要通过DOM获取View中的数值，然后同步到View中。而MVVM中的VM要做的事情就是把DOM操作完全封装起来，开发人员不用再关心Model和View之间是如何相互影响的,只要我们Model发生了变化，View上自然就会表现出来,当用户改变了View，Model中的数据也会跟着变化把开发人员从繁琐的DOM操作中解放出来，把关注点放在如何操作Model上
2.vue快速入门
2.1.引入vue.js
2.2.vue的HelloWorld
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue快速入门</title>
<!--引入vue.js-->
<script src="js/vue.js"></script>
</head>
<body>
<!--
使用vue，要求页面必须有一个父容器，所有的内容都得放到这个父容器中
这个div要求有id，id的值随意，但是一般叫 app
这个div相当于view层
-->
<div id="app">
<h2>{{name}}好帅</h2>
<h2>有{{number}}个女孩追求</h2>
</div>
<!-- 绑定vue -->
<script>
// vue提供一个构造方法，构造方法中放对象
var vm = new Vue({
//el 相当于element（元素）
el : "#app",
data : {
name : "jimmy",
number : "200"
}
})
</script>
</body>
</html>
2.3.双向绑定
双向绑定：
方向一：当改变data属性内容的时候，view中自动更新
方向二：当页面改变XX的时候，data中的xx也会自动更新
注意点：页面的name得可以改变，此时就要选择文本框
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双向绑定</title>
<!-- 引入vue -->
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<input type = "text" v-model="context"/>
<br/>
{{context}}
</div>
<script>
new Vue({
el : "#app",
data : {
context : "最遗憾的不是后来，而是假如"
}
})
</script>
</body>
</html>
2.4.事件处理（点击事件）
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件处理（点击事件）</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="number"/>
<br/>
{{number}}
<bi/>
<br/>
<input type="button" v-on:click="number++" value="+"/>
<br/>
<input type="button" v-on:click="number--" value="-"/>
</div>
<!-- 绑定vue -->
<script>
new Vue({
el : "#app",
data : {
number : 2
}
})
</script>
</body>
</html>
3.vue实列
3.1.创建Vue实列：
每个Vue应用都是通过Vue函数创建一个新的Vue实例开始的
比如：
var vm = new Vue({
//选项
})
在构造函数中传入一个对象，并且在对象中声明Vue需要的2数据和方法，包括：
# el
# data
# methods
# ...
3.2.模板或元素
一个Vue实例都需要关联一段HTML模板，Vue会基于此模板进行视图渲染我们可以通过el属性来指定
模板：（父类容器）
<div id="app">
</div>
然后创建Vue实例，关联这个div
var vm = new Vue({
el : "#app"
})
这样，Vue就可以基于id为app的div元素作为模板进行渲染了，在这个div范围外的部分是无法使用vue特性的
3.3.数据
当Vue实例被创建时，它会尝试获取在data中自定义的所有属性，用于视图渲染，并且监视data中的属性变化，当data发生变化，所有相关的视图都将重新渲染，这就是 响应式 系统
HTML Code
<div>
<input type="text" v-model="name"/>
</div>
JS
var vm = new Vue({
el : "#app",
data : {
name : "刘德华"
}
})
name的变化会影响到input的值
input输入的值，也会导致vm中的name发生变化（这个操作总结下来可以叫双向绑定）
3.4.方法
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue-方法</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="+" v-on:click="add()"/>
<br/>
{{number}}
</div>
<script>
var vm = new Vue({
el : "#app",
data : {
number : 20
},
methods : {
add(){
//这里可以使用this，也可以使用vue对象点属性名
this.number++;
//vm.number++;
}
}
})
</script>
</body>
</html>
4.vue的生命周期（生命周期钩子函数）
4.1.vue生命周期的流程：
1.初始化前：BeforeCreate
2.初始化完成：发生ajax --created
3.双向数据绑定前：BeforeMount
4.双向数据绑定完成：Mounted
5.更新前：BeforeUpdate
6.更新完成：updated
7.销毁前：BeforeDestroy
8.销毁完成：Destroyed
4.2.钩子函数（生命周期钩子函数测试，代码）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>生命周期钩子函数的测试</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
{{content}}
</div>
<script>
var vm = new Vue({
el : "#app",
data : {
content : "this is content"
},
methods : {
},
//创建前
beforeCreate(){
method("创建前",this)
},
//创建完成
created(){
method("创建完成",this)
},
//双向数据绑定前
beforeMount(){
method("双向数据绑定前",this)
},
//双向数据绑定完成
mounted(){
method("双向数据绑定完成",this)
},
//更新前
beforeUpdate(){
method("更新前",this)
},
//更新完成
updated(){
method("更新完成",this)
},
//销毁前
beforeDestroy(){
method("销毁前",this)
},
//销毁完成
destroyed(){
method("销毁完成",this)
}
})
function method(process, obj) {
console.log("状态：" + process);
console.log("数据" + obj.content);
console.log("页面中的数据:"+document.getElementById("app").innerHTML)
console.log("-----------------------")
}
//更新数据
// vm.content = "this is updated content"
//销毁数据
vm.$destroy();
</script>
</body>
</html>
4.3.this（vue中的this）
以下代码说明vue中的this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue中的this</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
{{content}}
</div>
<script>
new Vue({
el : "#app",
data : {
content : "this is content"
},
created(){
this.content = "oh my day"
console.log(this)
}
})
</script>
</body>
</html>
结果：
content最终的结果是创建完成后被重新赋值的content 即值为 oh my day
4.4.指令
4.4.1.什么是指令：
指令（DirectIves）是带 v- 前缀的特殊特性。指令特性的预期值是单个JavaScript表达式。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应地作用于DOM。
比如：v-model，v-on…都是指令
4.4.2.插值表达式：
4.4.2.1.大括号
格式：{{表达式}}
说明：
改表达式支持JS语法，可以调用JS内置函数（必须有返回值）
表达式必须有返回结果，例如 1+1，没有表达式不允许使用，如：var a = 1 + 1
可以直接获取Vue实例中定义的数据或函数
4.4.3.插值闪烁
说明：使用{{}} 方式在网速比较慢是会出现问题，在数据未加载完成时，页面显示会出原始的{{}},加载完毕后才显示正确数据，我们称插值闪烁
4.4.4.插值闪烁的解决方案（v-text和v-html）
使用v-text和v-html指令来代替{{}}
作用：用来进行数据呈现的，可以代替{{}}，可以有效地解决插值闪烁问题
说明：
v-text：将数据输入到元素的内部，如果传输的数据有HTML代码，会作为普通文本输出
v-html：将数据输入到元素的内部，如果输入的数据有HTML代码，会被渲染
代码演示v-text 和 v-html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示解决插值闪烁问题的两个指令（v-text 和 v-html）</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<!--使用插值表达式（存在问题：当网速较慢时会出现插值闪烁[显示原有的表达式]）-->
<div>{{content}}</div>
<!-- v-text 当数据有html代码时不会解析 -->
<div v-text="content"></div>
<!-- v-html 当数据有html代码时会解析 -->
<div v-html="content"></div>
<br>
</div>
<script>
new Vue({
el : "#app",
data : {
content : "<h1>this is content</h1>"
}
})
</script>
</body>
</html>
4.4.5.v-model（双向绑定元素详解）
v-text和v-html可以看做单向绑定，数据影响了视图渲染，但是反过来就不行
v-model是双向绑定，视图（View）和模型（Model）之间会相互影响
双向绑定在视图中可以修改数据，这样也就限定了元素的类型，目前v-model的可使用元素有：
input-text
input-password
select
textarea
checkbox
redio
commponents (Vue中的自定义组件)
基本上除了最后一项，其他都是表单输入项
部分元素类型演示（除了select commponents）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双向绑定元素详解</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<!--文本框-->
<input type="text" v-model="name"/>{{name}}<br/>
<!--密码框-->
<input type="password" v-model="password"/>{{password}}<br/>
<!--多选框-->
<input type="checkbox" name="hobby" value="抽烟" v-model="hobby"/>抽烟
<input type="checkbox" name="hobby" value="喝酒" v-model="hobby"/>喝酒
<input type="checkbox" name="hobby" value="烫头" v-model="hobby"/>烫头
<br/>
{{hobby}}
<br/>
<!--单选框-->
<input type="radio" value="男" name="sex" v-model="sex"/>男
<input type="radio" value="女" name="sex" v-model="sex"/>女
<br/>
{{sex}}
<br/>
<!--文本域-->
<textarea v-model="content"></textarea>
<br/>
{{content}}
<br/>
</div>
<script>
new Vue({
el : "#app",
data : {
name : "",
password : "",
hobby : [],
sex : "",
content : ""
}
})
</script>
</body>
</html>
4.4.6.v-on
v-on指令用于给页面元素绑定事件。语法
v-on:事件名=“js片段函数名”
4.4.6.1.v-on:click （可以简写为@click）
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>点击事件的简写方式</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="v-on:click +" v-on:click="number++"/>
{{number}}
<br/>
<input type="button" value="@click +" @click="number++" />
{{number}}
</div>
<script>
new Vue({
el : "#app",
data : {
number : 1
}
})
</script>
</body>
</html>
4.4.6.2.v-on:keydown (键盘按下事件)
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>键盘按下的时候获取改键的ascii码值</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-on:keydown="show($event)"/>
<br>
<input type="text" @keydown="show($event)"/>
</div>
<script>
new Vue({
el : "#app",
data : {
},
methods: {
show(event){
console.log(event.keyCode)
}
}
})
</script>
</body>
</html>
4.4.6.3.v-on:mouseover 和 v-on:mouseout （鼠标移入事件 和 鼠标移出事件）
小案例 （功能：自定义一块区域鼠标移入的时候控制台打印鼠标移入，反之鼠标移出）
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标移入事件和鼠标移出事件</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<div style="width: 100px;height: 100px;color: red;background-color: green" @mouseover="over()" @mouseout="out()">
</div>
</div>
<script>
new Vue({
el : "#app",
data : {
},
methods : {
over(){
console.log("鼠标移入了")
},
out(){
console.log("鼠标移出了")
}
}
})
</script>
</body>
</html>
4.4.7.js冒泡：是一个问题，需要解决
概念：当事件发生后，这个事件就要开始传播（从里到外或者从外到里），会触发所有父层或者子层的方法
解决方案一（老的解决方案）：在父层或者子层的事件中传入一个$event [事件源]，通过事件源的方法去解决js冒泡问题
小案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js冒泡问题的解决方案</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<div style="background-color: red;width: 200px;height: 200px" @mouseover="over()" @mouseout="out()">
<div style="background-color: green;width: 100px;height: 100px;align-content: center" @mouseover="xover($event)" @mouseout="xout($event)">
</div>
</div>
</div>
<script>
new Vue({
el : "#app",
data : {
},
methods : {
over(){
console.log("大的div：鼠标移入了")
},
out(){
console.log("大的div：鼠标移出了")
},
xover(event){
console.log("小的div：鼠标移入了")
event.stopPropagation()
},
xout(event){
console.log("小的div：鼠标移出了")
event.stopPropagation()
}
}
})
</script>
</body>
</html>
解决方案二：事件修饰符–vue中解决冒泡等问题的方案
Vue.js为 v-on 提供事件修饰符来处理DOM事件细节，如：event.preventDefault() 或event.stopPropagation()
Vue.js通过由点(.)表示指令后缀来调用修饰符
.stop //停止触发，防止冒泡修饰符（掌握）
.prevent //阻止事件发生，阻止事件默认行为（掌握）
.capture //捕获
.self //只点自己身上运行
.once //只执行一次
小案例演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件修饰符--vue中解决冒泡的方法</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<div style="width: 200px;height: 200px;background-color: red" @mouseover="over()" @mouseout="out()">
<!-- .stop 停止触发，防止冒泡 -->
<div style="width: 100px;height: 100px;background-color: lime" @mouseover.stop="xover()" @mouseout.stop="xout()">
</div>
</div>
<!-- 阻止事件默认行为 -->
<form @submit.prevent action="http:www.baidu.com">
<input type="submit" value="提交"/>
</form>
</div>
<script>
new Vue({
el : "#app",
data : {
},
methods : {
over(){
console.log("大div：鼠标移入了")
},
out(){
console.log("大div：鼠标移了")
},
xover(){
console.log("小div：鼠标移入了")
},
xout(){
console.log("小div：鼠标移了")
}
}
})
</script>
</body>
</html>
4.4.8.按键修饰符
Vue允许为v-on在监听键盘事件时添加按键修饰符
全部的按键别名
.enter //表示键盘的enter建【回车键】
.tab
.delete // 捕获，删除 和 退格 键
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta
小案例：(需求：当按键是enter键时打印assii值)
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>当按键是enter时打印其ascii值</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<p>第一种方式 keydown.13</p>
<input type="text" @keydown.13="show($event)"/>
<p>第二种方式 keydown.enter</p>
<input type="text" @keydown.enter="show($event)"/>
</div>
<script>
new Vue({
el : "#app",
data : {
},
methods: {
show(event){
console.log(event.keyCode)
}
}
})
</script>
</body>
</html>
4.4.9.练习：
4.4.9.1.只允许文本框中输入0-9数字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>只允许文本框中输入0-9数字</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<p>0-9</p>
<input type="text" @keydown="show($event)"/>
</div>
<script>
new Vue({
el : "#app",
data : {},
methods : {
show(event){
var keyCode_ascii = event.keyCode;
if (keyCode_ascii >= 48 && keyCode_ascii <= 57) {
console.log("允许的数据:" + event.keyCode);
} else {
event.preventDefault()
console.log("不允许的数据:" + event.keyCode);
}
}
}
})
</script>
</body>
</html>
4.4.9.2.写一个登录页面，按下enter键的时候。如果下一个是文本框，则光标聚焦，如果下一个是提交则提交表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习二</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<p>需求：</p>
<p>写一个登录页面，按下enter键的时候。如果下一个是文本框，则光标聚焦，如果下一个是提交则提交表单</p>
<form action="http://www.baidu.com">
请输入用户名：<input type="text" @keydown.enter="method(0,$event)" placeholder="请输入用户名"/>
<br/>
请输入密码：<input type="text" @keydown.enter="method(1,$event)" placeholder="请输入密码"/>
<br/>
<input type="submit" @keydown.enter="method(2,$event)" value="提交"/>
</form>
<script>
new Vue({
el: "#app",
data: {},
methods: {
method(index, event) {
var tagName = document.getElementsByTagName("input");
if (index == (tagName.length - 2)) {
return; //也可以不写
} else {
tagName[index + 1].focus();
event.preventDefault();
}
}
}
})
// new Vue({
// el : "#app",
// data : {},
// methods: {
// method(index,event){
// var tagName = document.getElementsByTagName("input");
// for (var i = 0; i < tagName.length; i++) {
// if (tagName[index] == tagName[(tagName.length - 2)]) {
// return;
// } else if (tagName[index] == tagName[i]) {
// tagName[i + 1].focus();
// event.preventDefault();
// }
// }
// }
// }
// })
</script>
</div>
</body>
</html>
4.4.9.3.跑马灯
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习三</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<p>需求：</p>
<P>跑马灯效果</P>
<input type="button" value="开启跑马灯" @click="open()"/>
<br/>
{{content}}
</div>
<script>
var vm = new Vue({
el : "#app",
data : {
content : "好消息！好消息！"
},
methods : {
open(){
//方法一
setInterval(function () {
var first = vm.content.substring(0,1);
var end = vm.content.substring(1);
vm.content = end + first;
},500)
//方法二
// _this=this //将this给到_this然后传入函数内 this就是代表当前的vue对象
// setInterval(function () { //定时任务
// //console.log(_this.msg);
// var first=vm.content.substring(0,1);
// var end=_this.content.substring(1);
// _this.content=end+first;
// },500);
}
}
})
</script>
</body>
</html>
4.4.10.v-for
a.遍历数组
语法：
v-for = “item in items”
items：要遍历的数组
item：迭代得到的数组元素的别名
b.数组角标（索引）
数组遍历及显示角标的小案例（有序列表，和表格展示）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-for</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<!--有序列表遍历-->
<ol>
<li v-for="(user,index) in users">
{{index}} - {{user.name}} - {{user.age}} - {{user.sex}}
</li>
</ol>
<!--表格-->
<table width="150" border="1">
<tr>
<td>角标</td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
<tr v-for="(user,index) in users">
<td>{{index}}</td>
<td>{{user.name}}</td>
<td>{{user.age}}</td>
<td>{{user.sex}}</td>
</tr>
</table>
</div>
<script>
new Vue({
el : "#app",
data : {
users : [
{name : "jack",age : 18, sex: "男"},
{name : "lily",age : 18, sex: "女"},
{name : "tom",age : 18, sex: "男"},
{name : "rose",age : 18, sex: "女"}
]
}
})
</script>
</body>
</html>
4.4.11.v-if 和 v-show
共同点：都是条件判断
v-if：移出元素
v-show：只是简单的加display:none
基本使用：
v-if：条件判断，当得到结果为true时，所在的元素才会被渲染
语法：
v-if = “布尔表达式”
v-show：同v-if一样
更多的条件判断：
v-else
v-if-else
v-if v-show小案例演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-if AND v-show</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<p>案例需求：点击按钮显示数据，隐藏数据</p>
<input type="button" value="点击" @click="change()"/>
<!-- 第二种写法 -->
<input type="button" value="点击" @click="temp =! temp"/>
<br/>
<!--v-if-->
<p v-if="temp">{{content}}</p>
<!--v-show 控制台查看效果-->
<p v-show="temp">{{content}}</p>
</div>
<script>
new Vue({
el : "#app",
data : {
content : "this is content",
temp : true
},
methods : {
change(){
this.temp = !this.temp;
}
}
})
</script>
</body>
</html>
4.4.12.v-if和v-for结合小案例
需求：表格遍历用户数据，并只显示性别为男的用户数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-if AND v-for</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<p>需求：</p>
<p>表格遍历用户数据，并只显示性别为男的用户数据</p>
<table border="1">
<tr>
<td>角标</td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
<tr v-for="(user,index) in users" v-if="user.sex === '男' ">
<td>{{index}}</td>
<td>{{user.name}}</td>
<td>{{user.age}}</td>
<td>{{user.sex}}</td>
</tr>
</table>
</div>
<script>
new Vue({
el : "#app",
data : {
users : [
{name : "tom",age : 18 ,sex : "男"},
{name : "jack",age : 19 ,sex : "男"},
{name : "lily",age : 20 ,sex : "女"},
{name : "rose",age : 21 ,sex : "女"}
]
}
})
</script>
</body>
</html>
4.4.13.v-bind
v-bind绑定的是class样式
注意事项：
假如我们想动态的修改页面元素的属性，比如class属性，这样写是错误的
因为差值表达式不能用在属性值中
v-bind的使用（小案例）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-bind</title>
<script src="js/vue.js"></script>
</head>
<style>
.myStyle{
color: red;
size: 4px;
}
</style>
<body>
<div id="app">
<p>使用v-bind事件给font添加样式</p>
<!--
错误写法
<font class="{{myStyle}}">nice</font>
-->
<font v-bind:class="myStyle">nice</font>
</div>
<script>
new Vue({
el : "#app",
data : {
myStyle : "myStyle"
}
})
</script>
</body>
</html>
4.4.13.计算属性（未来用的非常多）
计算属性的本质是方法，写的时候是方法，用的时候是属性
计算属性的本质就是方法，但是一定要反回数据
案例（显示当前日期的年月日）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算属性</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<p>案例需求：在页面上显示当前事件 年-月-日</p>
<!--获取结果-->
{{method}}
<!--其他方式-->
<br/>
{{time.getFullYear()}} - {{time.getMonth() + 1}} - {{time.getDate()}}
</div>
<script>
new Vue({
el : "#app",
data : {
time : new Date()
},
methods : {
},
//计算属性：；计算出结果再显示
computed : {
method(){
//计算属性的本质是方法，但一定要返回数据
return this.time.getFullYear() +"-"+ (this.time.getMonth() + 1) +"-"+ this.time.getDate()
}
}
})
</script>
</body>
</html>
4.4.14.补充（select双向绑定）
小案例一：select双向绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>select双向绑定</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<select v-model="yes">
<option v-for="item in items" :value="item">{{item}}</option>
</select>
{{yes}}
</div>
<script>
new Vue({
el : "#app",
data : {
items : ["抽烟","喝酒","烫头"],
yes : ""
}
})
</script>
</body>
</html>
小案例二：select实现div背景色改变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>select实现div背景颜色改变</title>
<script src="js/vue.js"></script>
</head>
<style>
.red{
background-color: red;
width: 100px;
height: 100px;
}
.yellow{
background-color: yellow;
width: 100px;
height: 100px;
}
.lime{
background-color: lime;
width: 100px;
height: 100px;
}
</style>
<body>
<div id="app">
<select v-model="thisColor">
<option v-for="color in colors" :value="color">{{color}}</option>
</select>
<div :class="thisColor"></div>
</div>
<script>
new Vue({
el : "#app",
data : {
colors: ["red", "yellow", "lime"],
thisColor: ""
}
})
</script>
</body>
</html>
5.Vue.js AJAX
5.1.axios-发送ajax的技术
Axios：是一个基于promise的HTTP库，可以用在浏览器和node.js中
5.2.引入axios
使用 < script src=""> < /script>
5.3.请求方式 (官网拷贝的)
5.3.1.GET
// Make a request for a user with a given ID
axios.get('/user?ID=12345')
.then(function (response) {
// handle success
console.log(response);
})
.catch(function (error) {
// handle error
console.log(error);
})
.then(function () {
// always executed
});
// Optionally the request above could also be done as
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.then(function () {
// always executed
});
// Want to use async/await? Add the `async` keyword to your outer function/method.
async function getUser() {
try {
const response = await axios.get('/user?ID=12345');
console.log(response);
} catch (error) {
console.error(error);
}
}
5.3.2.POST
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
5.3.3.执行多个并发请求
function getUserAccount() {
return axios.get('/user/12345');
}
function getUserPermissions() {
return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) {
// Both requests are now complete
}));
5.4.网络文档摘抄 axios API
axios API
Requests can be made by passing the relevant config to axios.
axios(config)
// Send a POST request
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
});
// GET request for remote image
axios({
method:'get',
url:'http://bit.ly/2mTM3nY',
responseType:'stream'
})
.then(function (response) {
response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
});
axios(url[, config])
// Send a GET request (default method)
axios('/user/12345');
5.5.小案例（需求：使用axios对读取user.json文件的内容，并在页面上输出内容）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用axios对读取user.json文件的内容，并在页面上输出内容</title>
<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
</head>
<body>
<div id="app">
<table border="1">
<tr>
<td>username</td>
<td>age</td>
<td>sex</td>
</tr>
<tr v-for="user in users">
<td>{{user.username}}</td>
<td>{{user.age}}</td>
<td>{{user.sex}}</td>
</tr>
</table>
</div>
<script>
var vm = new Vue({
el : "#app",
data : {
users : []
},
created(){
//方式一
// axios.get("/data/users.json")
// .then(function (value) {
// console.log(value)
// console.log(value.data)
// vm.users = value.data
// })
//方式二
axios.get("data/users.json")
.then(res => {})
}
})
</script>
</body>
</html>
5.6.Vue结构的总结
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue结构的总结</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
</div>
<script>
new Vue({
el : "#app",
data : {
//数组类型
users : [],
//对象
user : {},
//string类型的变量
name : "",
//int类型的变量
age : 10
},
methods : {
},
created(){
},
//计算属性
computed(){
}
})
</script>
</body>
</html>
5.7.使用axios+Vue+SpringBoot 完成用户管理系统
domian
package com.czxy.domain;
import javax.persistence.Id;
import javax.persistence.Table;
/**
* @Author Jimmy
* @Date 2019/9/24 5:00 PM
* @Desc 用户类
*/
@Table(name = "T_USER")
public class User {
/**
* CREATE TABLE T_USER(
* id INT PRIMARY KEY AUTO_INCREMENT,
* age INT,
* username VARCHAR(20),
* password VARCHAR(50),
* email VARCHAR(50),
* sex VARCHAR(20)
* )
*/
@Id
private Integer id;
private Integer age;
private String username;
private String password;
private String email;
private String sex;
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public Integer getAge() {
return age;
}
public void setAge(Integer age) {
this.age = age;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public String getSex() {
return sex;
}
public void setSex(String sex) {
this.sex = sex;
}
@Override
public String toString() {
return "User{" +
"id=" + id +
", age=" + age +
", username='" + username + '\'' +
", password='" + password + '\'' +
", email='" + email + '\'' +
", sex='" + sex + '\'' +
'}';
}
}
dao
package com.czxy.dao;
import com.czxy.domain.User;
import org.apache.ibatis.annotations.*;
@Mapper
public interface UserMapper extends tk.mybatis.mapper.common.Mapper<User> {
}
service
package com.czxy.service;
import com.czxy.domain.User;
import java.util.List;
public interface UserService {
List<User> findAll();
User findUserById(Integer id);
Integer updateUserById(User user);
void deleteUserById(Integer id);
}
impl
package com.czxy.service.impl;
import com.czxy.dao.UserMapper;
import com.czxy.domain.User;
import com.czxy.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
/**
* @Author Jimmy
* @Date 2019/9/24 5:09 PM
* @Desc UserService的实现类
*/
@Service
public class UserServiceImpl implements UserService {
@Autowired
private UserMapper mapper;
@Override
public List<User> findAll() {
return mapper.selectAll();
}
@Override
public User findUserById(Integer id) {
return mapper.selectByPrimaryKey(id);
}
@Override
public Integer updateUserById(User user) {
return mapper.updateByPrimaryKey(user);
}
@Override
public void deleteUserById(Integer id) {
mapper.deleteByPrimaryKey(id);
}
}
controller
package com.czxy.controller;
import com.czxy.domain.User;
import com.czxy.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;
import java.util.List;
/**
* @Author Jimmy
* @Date 2019/9/24 5:10 PM
* @Desc
*/
@RestController
@RequestMapping("/user")
public class UserController {
@Autowired
private UserService userService;
//TODO 查询所有的用户信息
@GetMapping("/findAll")
public ResponseEntity<List<User>> findAll(){
System.out.println("findAll is ok");
try {
List<User> users = userService.findAll();
return ResponseEntity.ok(users);
} catch (Exception e) {
e.printStackTrace();
return new ResponseEntity<>(HttpStatus.INTERNAL_SERVER_ERROR);
}
}
//TODO 查询用户（根据用户ID回显用户信息）
@GetMapping("/findUserById/{id}")
public ResponseEntity<User> findUserById(@PathVariable(name = "id") Integer id){
try {
User user = userService.findUserById(id);
return ResponseEntity.ok(user);
} catch (Exception e) {
e.printStackTrace();
return new ResponseEntity<>(HttpStatus.INTERNAL_SERVER_ERROR);
}
}
//TODO 修改提交
@PutMapping("/updateUserById")
public ResponseEntity<Void> updateUserById(@RequestBody User user){
System.out.println("axios - user :"+user);
Integer number = userService.updateUserById(user);
if (number != null) {
return new ResponseEntity<>(HttpStatus.CREATED);
} else {
return new ResponseEntity<>(HttpStatus.INTERNAL_SERVER_ERROR);
}
}
//TODO 删除
@DeleteMapping("/deleteUserById/{id}")
public ResponseEntity<Void> deleteUserById(@PathVariable(name = "id") Integer id){
System.out.println("this id :" + id);
try {
userService.deleteUserById(id);
return new ResponseEntity<>(HttpStatus.NO_CONTENT);
} catch (Exception e) {
e.printStackTrace();
return new ResponseEntity<>(HttpStatus.INTERNAL_SERVER_ERROR);
}
}
}
HTML Code
<!DOCTYPE html>
<html>
<head>
<!-- 页面meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>数据 - AdminLTE2定制版</title>
<meta name="description" content="AdminLTE2定制版">
<meta name="keywords" content="AdminLTE2定制版">
<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
<link rel="stylesheet" href="./plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="./plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="./plugins/ionicons/css/ionicons.min.css">
<link rel="stylesheet" href="./plugins/iCheck/square/blue.css">
<link rel="stylesheet" href="./plugins/morris/morris.css">
<link rel="stylesheet" href="./plugins/jvectormap/jquery-jvectormap-1.2.2.css">
<link rel="stylesheet" href="./plugins/datepicker/datepicker3.css">
<link rel="stylesheet" href="./plugins/daterangepicker/daterangepicker.css">
<link rel="stylesheet" href="./plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
<link rel="stylesheet" href="./plugins/datatables/dataTables.bootstrap.css">
<link rel="stylesheet" href="./plugins/treeTable/jquery.treetable.css">
<link rel="stylesheet" href="./plugins/treeTable/jquery.treetable.theme.default.css">
<link rel="stylesheet" href="./plugins/select2/select2.css">
<link rel="stylesheet" href="./plugins/colorpicker/bootstrap-colorpicker.min.css">
<link rel="stylesheet" href="./plugins/bootstrap-markdown/css/bootstrap-markdown.min.css">
<link rel="stylesheet" href="./plugins/adminLTE/css/AdminLTE.css">
<link rel="stylesheet" href="./plugins/adminLTE/css/skins/_all-skins.min.css">
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./plugins/ionslider/ion.rangeSlider.css">
<link rel="stylesheet" href="./plugins/ionslider/ion.rangeSlider.skinNice.css">
<link rel="stylesheet" href="./plugins/bootstrap-slider/slider.css">
<link rel="stylesheet" href="./plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.css">
<script src="js/vue-2.5.17.js"></script>
<script src="js/axios-0.18.0.js"></script>
</head>
<body class="hold-transition skin-purple sidebar-mini">
<div id="app">
<!-- 页面头部 -->
<header class="main-header">
<!-- Logo -->
<a href="all-admin-index.html" class="logo">
<!-- mini logo for sidebar mini 50x50 pixels -->
<span class="logo-mini"><b>数据</b></span>
<!-- logo for regular state and mobile devices -->
<span class="logo-lg">用户后台管理</span>
</a>
<!-- Header Navbar: style can be found in header.less -->
<nav class="navbar navbar-static-top">
<!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
<span class="sr-only">Toggle navigation</span>
</a>
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<!-- User Account: style can be found in dropdown.less -->
<li class="dropdown user user-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<img src="./img/user2-160x160.jpg" class="user-image" alt="User Image">
<span class="hidden-xs">奇哥</span>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header">
<img src="./img/user2-160x160.jpg" class="img-circle" alt="User Image">
<p>
奇哥 - 数据管理员
<small>最后登录 11:20AM</small>
</p>
</li>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
<a href="#" class="btn btn-default btn-flat">修改密码</a>
</div>
<div class="pull-right">
<a href="#" class="btn btn-default btn-flat">注销</a>
</div>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</header>
<!-- 页面头部 /-->
<!-- 导航侧栏 -->
<aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- Sidebar user panel -->
<div class="user-panel">
<div class="pull-left image">
<img src="./img/user2-160x160.jpg" class="img-circle" alt="User Image">
</div>
<div class="pull-left info">
<p>奇哥</p>
<a href="#"><i class="fa fa-circle text-success"></i> 在线</a>
</div>
</div>
<!-- sidebar menu: : style can be found in sidebar.less -->
<ul class="sidebar-menu">
<li class="header">菜单</li>
<li id="admin-index"><a href="all-admin-index.html"><i class="fa fa-dashboard"></i> <span>首页</span></a>
</li>
<!-- 菜单 -->
<li class="treeview">
<a href="#">
<i class="fa fa-folder"></i> <span>用户管理</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="admin-login">
<a href="#">
<i class="fa fa-circle-o"></i> 查询所有用户
</a>
</li>
</ul>
</li>
<!-- 菜单 /-->
</ul>
</section>
<!-- /.sidebar -->
</aside>
<!-- 导航侧栏 /-->
<!-- 内容区域 -->
<!-- @@master = admin-layout.html-->
<!-- @@block = content -->
<div class="content-wrapper">
<!-- 内容头部 -->
<section class="content-header">
<h1>
用户管理
</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
<li><a href="#">用户管理</a></li>
</ol>
</section>
<!-- 内容头部 /-->
<!-- 正文区域 -->
<section class="content">
<!-- .box-body -->
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">列表</h3>
</div>
<div class="box-body">
<!-- 数据表格 -->
<div class="table-box">
<!--工具栏-->
<div class="pull-left">
<div class="form-group form-inline">
<div class="btn-group">
<button type="button" class="btn btn-default" title="新建"><i
class="fa fa-file-o"></i> 新建
</button>
<button type="button" class="btn btn-default" title="删除"><i
class="fa fa-trash-o"></i> 删除
</button>
<button type="button" class="btn btn-default" title="开启"><i class="fa fa-check"></i>
开启
</button>
<button type="button" class="btn btn-default" title="屏蔽"><i class="fa fa-ban"></i>
屏蔽
</button>
<button type="button" class="btn btn-default" title="刷新"><i
class="fa fa-refresh"></i> 刷新
</button>
</div>
</div>
</div>
<div class="box-tools pull-right">
<div class="has-feedback">
<input type="text" class="form-control input-sm" placeholder="搜索">
<span class="glyphicon glyphicon-search form-control-feedback"></span>
</div>
</div>
<!--工具栏/-->
<!--数据列表-->
<table id="dataList" class="table table-bordered table-striped table-hover dataTable">
<thead>
<tr>
<th class="" style="padding-right:0px;">
<input id="selall" type="checkbox" class="icheckbox_square-blue">
</th>
<th class="sorting_asc">ID</th>
<th class="sorting_desc">用户名</th>
<th class="sorting_asc sorting_asc_disabled">密码</th>
<th class="sorting_desc sorting_desc_disabled">性别</th>
<th class="sorting">年龄</th>
<th class="text-center sorting">邮箱</th>
<th class="text-center">操作</th>
</tr>
</thead>
<tbody>
<!--<tr>-->
<!--<td><input name="ids" type="checkbox"></td>-->
<!--<td>1</td>-->
<!--<td>张三</td>-->
<!--<td>123456</td>-->
<!--<td>男</td>-->
<!--<td>18</td>-->
<!--<td class="text-center">zhangsan@126.com</td>-->
<!--<td class="text-center">-->
<!--<button type="button" class="btn bg-olive btn-xs">详情</button>-->
<!--<button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#myModal" >编辑</button>-->
<!--</td>-->
<!--</tr>-->
<!--<tr>-->
<!--<td><input name="ids" type="checkbox"></td>-->
<!--<td>1</td>-->
<!--<td>张三</td>-->
<!--<td>123456</td>-->
<!--<td>男</td>-->
<!--<td>18</td>-->
<!--<td class="text-center">zhangsan@126.com</td>-->
<!--<td class="text-center">-->
<!--<button type="button" class="btn bg-olive btn-xs">详情</button>-->
<!--<button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#myModal" >编辑</button>-->
<!--</td>-->
<!--</tr>-->
<!--<tr>-->
<!--<td><input name="ids" type="checkbox"></td>-->
<!--<td>1</td>-->
<!--<td>张三</td>-->
<!--<td>123456</td>-->
<!--<td>男</td>-->
<!--<td>18</td>-->
<!--<td class="text-center">zhangsan@126.com</td>-->
<!--<td class="text-center">-->
<!--<button type="button" class="btn bg-olive btn-xs">详情</button>-->
<!--<button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#myModal" >编辑</button>-->
<!--</td>-->
<!--</tr>-->
<tr v-for="user in users">
<td><input name="ids" type="checkbox"></td>
<td>{{user.id}}</td>
<td>{{user.username}}</td>
<td>{{user.password}}</td>
<td>{{user.sex}}</td>
<td>{{user.age}}</td>
<td class="text-center">{{user.email}}</td>
<td class="text-center">
<button type="button" class="btn bg-olive btn-xs" @click="deleteUserById(user.id)">删除</button>
<button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#myModal" @click="findUserById(user.id)">编辑</button>
</td>
</tr>
</tbody>
<!--模态窗口-->
<div class="tab-pane" id="tab-model">
<div id="myModal" class="modal modal-primary" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title">用户信息</h4>
</div>
<div class="modal-body">
<div class="box-body">
<div class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">用户名:</label>
<div class="col-sm-5">
<input type="text" :value="user.username" v-model="user.username" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">密码:</label>
<div class="col-sm-5">
<input type="text" :value="user.password" v-model="user.password" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">性别:</label>
<div class="col-sm-5">
<input type="text" :value="user.sex" v-model="user.sex" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">年龄:</label>
<div class="col-sm-5">
<input type="text" :value="user.age" v-model="user.age" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">邮箱:</label>
<div class="col-sm-5">
<input type="text" :value="user.email" v-model="user.email" class="form-control">
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-outline" data-dismiss="modal" @click="update()">修改</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
</div>
<!--模态窗口/-->
</table>
<!--数据列表/-->
</div>
<!-- 数据表格 /-->
</div>
<!-- /.box-body -->
<!-- .box-footer-->
<div class="box-footer">
<div class="pull-left">
<div class="form-group form-inline">
总共2 页，共14 条数据。 每页
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select> 条
</div>
</div>
<div class="box-tools pull-right">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">首页</a>
</li>
<li><a href="#">上一页</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">下一页</a></li>
<li>
<a href="#" aria-label="Next">尾页</a>
</li>
</ul>
</div>
</div>
<!-- /.box-footer-->
</div>
</section>
<!-- 正文区域 /-->
</div>
<!-- @@close -->
<!-- 内容区域 /-->
<!-- 底部导航 -->
<footer class="main-footer">
<div class="pull-right hidden-xs">
<b>Version</b> 1.0.8
</div>
<strong>Copyright © 2014-2017 <a href="http://www.czxy.com">传智学院研发部</a>.</strong> All rights reserved.
</footer>
<!-- 底部导航 /-->
</div>
<script>
var vm = new Vue({
el : "#app",
data : {
users : [],
user : {}
},
methods : {
findAll(){
axios.get("/user/findAll")
.then(function (value) {
vm.users = value.data;
})
},
findUserById(id){
axios.get("/user/findUserById/"+id)
.then(function (value) {
console.log(value.data)
vm.user = value.data;
})
},
update(){
console.log(vm.user)
axios.put("/user/updateUserById",vm.user)
.then(function () {
vm.findAll()
})
},
deleteUserById(id){
console.log(id)
axios.delete("/user/deleteUserById/"+id)
.then(function () {
vm.findAll()
})
}
},
created(){
axios.get("/user/findAll")
.then(function (value) {
vm.users = value.data;
})
}
})
</script>
<script src="./plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="./plugins/jQueryUI/jquery-ui.min.js"></script>
<script>
$.widget.bridge('uibutton', $.ui.button);
</script>
<script src="./plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="./plugins/raphael/raphael-min.js"></script>
<script src="./plugins/morris/morris.min.js"></script>
<script src="./plugins/sparkline/jquery.sparkline.min.js"></script>
<script src="./plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="./plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<script src="./plugins/knob/jquery.knob.js"></script>
<script src="./plugins/daterangepicker/moment.min.js"></script>
<script src="./plugins/daterangepicker/daterangepicker.js"></script>
<script src="./plugins/daterangepicker/daterangepicker.zh-CN.js"></script>
<script src="./plugins/datepicker/bootstrap-datepicker.js"></script>
<script src="./plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
<script src="./plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<script src="./plugins/slimScroll/jquery.slimscroll.min.js"></script>
<script src="./plugins/fastclick/fastclick.js"></script>
<script src="./plugins/iCheck/icheck.min.js"></script>
<script src="./plugins/adminLTE/js/app.min.js"></script>
<script src="./plugins/treeTable/jquery.treetable.js"></script>
<script src="./plugins/select2/select2.full.min.js"></script>
<script src="./plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
<script src="./plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.zh-CN.js"></script>
<script src="./plugins/bootstrap-markdown/js/bootstrap-markdown.js"></script>
<script src="./plugins/bootstrap-markdown/locale/bootstrap-markdown.zh.js"></script>
<script src="./plugins/bootstrap-markdown/js/markdown.js"></script>
<script src="./plugins/bootstrap-markdown/js/to-markdown.js"></script>
<script src="./plugins/ckeditor/ckeditor.js"></script>
<script src="./plugins/input-mask/jquery.inputmask.js"></script>
<script src="./plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
<script src="./plugins/input-mask/jquery.inputmask.extensions.js"></script>
<script src="./plugins/datatables/jquery.dataTables.min.js"></script>
<script src="./plugins/datatables/dataTables.bootstrap.min.js"></script>
<script src="./plugins/chartjs/Chart.min.js"></script>
<script src="./plugins/flot/jquery.flot.min.js"></script>
<script src="./plugins/flot/jquery.flot.resize.min.js"></script>
<script src="./plugins/flot/jquery.flot.pie.min.js"></script>
<script src="./plugins/flot/jquery.flot.categories.min.js"></script>
<script src="./plugins/ionslider/ion.rangeSlider.min.js"></script>
<script src="./plugins/bootstrap-slider/bootstrap-slider.js"></script>
<script src="./plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.js"></script>
<script src="./plugins/bootstrap-datetimepicker/locales/bootstrap-datetimepicker.zh-CN.js"></script>
</body>
</html>
6.组件化
组件：
在大型应用开发的时候，页面可以划分成很多部分，往往不同的页面，也会有不同的部分，例如可能会有相同的头部导航，尾部信息模块
但是如果每一页面都独自开发，这无疑增加了我们的开发成本，所以我们会吧页面的不同不封拆分成独立的组件，然后在不同的页面就可以共享这些组件，避免重复开发
6.1.定义全局组件
我们可以使用Vue.component来定义一个组件
Vue.component(组件名称，Vue对象) 注意组件名称只能小写
在Vue对象中我们需要使用template来定义组件的HTML部分
例子：
Vue.component(‘hello’,{
template : '<p>hello world ！</p>'
})
小案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue-全局组件一</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<hello></hello>
</div>
<script>
//在这里定义全局组件
//这里有两个值
//第一个值：组件的名称
//第二个值：组件的内容
Vue.component("hello",{
//将html代码写在这里
//每个组件必须有且只有一个根标签
template : "<p>这是一个段落</p>" //使用模版字符串定义
})
new Vue({
el : "#app"
})
</script>
</body>
</html>
加强一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue-全局组件二</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<p>在案例一的基础上进行加强</p>
<hello></hello>
</div>
<script>
//在这里定义全局组件
//这里有两个值
//第一个值：组件的名称
//第二个值：组件的内容
Vue.component("hello",{
//将html代码写在这里
//每个组件必须有且只有一个根标签
template : "<button @click='number++'>+{{number}}</button>", //使用模版字符串定义
data(){
return {
number : 0
}
}
})
new Vue({
el : "#app"
})
</script>
</body>
</html>
加强二：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue-全局组件三</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<p>在案例一的基础上进行加强</p>
<hello></hello>
</div>
<script>
//在这里定义全局组件
//这里有两个值
//第一个值：组件的名称
//第二个值：组件的内容
Vue.component("hello",{
//将html代码写在这里
//每个组件必须有且只有一个根标签
// template : "<button @click='number++'>+{{number}}</button>", //使用模版字符串定义
template : "<button @click='add()'>+{{number}}</button>", //使用模版字符串定义
data(){
return {
number : 0
}
},
methods : {
add(){
this.number++;
}
}
})
new Vue({
el : "#app"
})
</script>
</body>
</html>
6.2.组件的复用
一个页面可以定义多个组件，每个组件互不干扰
案例演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件的复用</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<hello1></hello1>
<hello2></hello2>
<hello2></hello2>
</div>
<script>
//一个页面可以定义多个组件
//定义全局组件
Vue.component("hello1",{
template : "<button>点</button>"
})
Vue.component("hello2",{
template : "<input value='123'/>"
})
new Vue({
el : "#app"
})
</script>
</body>
</html>
6.3.局部组件
局部组件的定义方式：
//定义局部组件
const hello = {
template : "<button @click='add()'></button>",
data(){
return {
number : 0
}
},
methods : {
add(){
this.number++
}
}
}
局部组件需要注册：
new Vue({
//局部组件需要注册
el : "#app",
components : {
//前面是注册标签的名字后面才是真正的组件，当两个名字一样时可以简写
// hello : hello
//简写
hello
}
})
完整的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>局部组件</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<hello></hello>
</div>
<script>
//定义局部组件
const hello = {
template : "<button @click='add()'>+{{number}}</button>",
data(){
return {
number : 0
}
},
methods : {
add(){
this.number++
}
}
}
new Vue({
//局部组件需要注册
el : "#app",
components : {
//前面是注册标签的名字后面才是真正的组件，当两个名字一样时可以简写
// hello : hello
//简写
hello
}
})
</script>
</body>
</html>
6.4.组件通信
6.4.1.父子传值（父的值是不变的）
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子向父传值</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
{{number}}
<br/>
<hello :num="number" @incr="thisFAdd" @redues="fredues"></hello>
</div>
<script>
Vue.component("hello",{
template : "<div><button @click='add()'>+ {{num}}</button><button @click='redu()'>- {{num}}</button></div>",
props : ["num"],
methods : {
add(){
//在此通过vue提供的对象 $.emit 回调父组件的方法
this.$emit("incr")
},
redu(){
this.$emit("redues")
}
}
})
new Vue({
el : "#app",
data :{
number : 0
},
methods:{
thisFAdd(){
this.number++
},
fredues(){
this.number--
}
}
})
</script>
</body>
</html>
6.4.3.传参
案例演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>父子传值 -- 传参</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
{{number}}
<hello @outchuan="gefu"></hello>
</div>
<script>
Vue.component("hello",{
template : "<button @click='chuan(10)'>传</button>",
methods : {
chuan(no){
this.$emit("outchuan",no)
}
}
})
new Vue({
el : "#app",
data : {
number : 0
},
methods:{
gefu(no){
this.number = no
}
}
})
</script>
</body>
</html>
6.4.4.子向父传值 – 超链接方式
案例演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子向父传值 -- 超链接方式</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
{{number}}
<br/>
<hello @outchuan="gefu"></hello>
</div>
<script>
Vue.component("hello",{
template : "<div><a href='#' @click.prevent='chuan(1024)'>子向父传值 -- 超链接方式</a></div>",
methods : {
chuan(no){
this.$emit("outchuan",no)
}
}
})
new Vue({
el : "#app",
data : {
number : 0
},
methods:{
gefu(no){
this.number = no
}
}
})
</script>
</body>
</html>
7.vue的重点总结：
7.1.MvVM：
前端的设计模式。它与MVC的区别是：MVVM它实现了双向数据绑定，MVC没有实现双向数据绑定
7.2.双向数据绑定：
当model数据发生变化之后，页面View层自动改变；当页面数据发生改变时，Model层数据也会自动改变
7.3.生命周期钩子函数（8个钩子函数）：
(只需要记住created）created：new Vue() 执行完成，在双向数据绑定之前，通常用来获取数据，紧跟着就可以进行双向数据绑定
7.4.指令：
7.4.1.插值表达式{{}}
7.4.2.v-text,v-html
7.4.3.v-model：绑定表单元素的input，radio，CheckBox，textare，select
7.4.4.v-on：事件 简写@ 有 @click @mouseover @mouseout @keydown @keyup...
7.4.5.js的冒泡事件：阻止冒泡的发生 stop
7.4.6.阻止js的默认事件： 事件.prevent
7.4.7.v-if
7.4.8.v-for
7.4.9.v-bind：绑定的是属性，简写 :
7.4.10.计算属性：本质是方法，但我们可以以属性的方式调用
7.4.11.axios：发生ajax
7.4.12.组件：父子传值
8.goods-management案例 (SpringBoot +RestFlu + vue + elementUI 完成分页)
com.jimmy
controller
package com.jimmy.controller;
import com.jimmy.domian.BaseResult;
import com.jimmy.domian.Goods;
import com.jimmy.service.GoodsService;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import javax.annotation.Resource;
import java.util.List;
/**
* @Author Jimmy
* @Date 2019/10/1 8:15 AM
* @Desc GoodsController
*/
@RestController
public class GoodsController {
@Resource
private GoodsService goodsService;
//TODO 查询所有
@GetMapping("all")
public ResponseEntity<List<Goods>> all() {
try {
List<Goods> goods = goodsService.all();
return ResponseEntity.ok(goods);
} catch (Exception e) {
e.printStackTrace();
return new ResponseEntity<>(HttpStatus.INTERNAL_SERVER_ERROR);
}
}
//TODO 分页查询
@GetMapping("/pageShowList")
public ResponseEntity<BaseResult> pageShowList(Integer page,Integer rows) {
BaseResult br = goodsService.pageShowList(page,rows);
return new ResponseEntity<>(br,HttpStatus.OK);
}
}
domain
package com.jimmy.domian;
/**
* @Author Jimmy
* @Date 2019/10/1 11:07 AM
* @Desc
*/
public class BaseResult {
//总条数
private Integer total;
//object
private Object data;
public Integer getTotal() {
return total;
}
public void setTotal(Integer total) {
this.total = total;
}
public Object getData() {
return data;
}
public void setData(Object data) {
this.data = data;
}
}
package com.jimmy.domian;
import javax.persistence.Id;
import javax.persistence.Table;
/**
* @Author Jimmy
* @Date 2019/10/1 8:11 AM
* @Desc 商品类
*/
@Table(name = "goods")
public class Goods {
/*
id int primary key AUTO_INCREMENT,
name varchar(255),
image varchar(255),
price double
*/
@Id
private Integer id;
private String name;
private String image;
private Double price;
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getImage() {
return image;
}
public void setImage(String image) {
this.image = image;
}
public Double getPrice() {
return price;
}
public void setPrice(Double price) {
this.price = price;
}
@Override
public String toString() {
return "Goods{" +
"id=" + id +
", name='" + name + '\'' +
", image='" + image + '\'' +
", price=" + price +
'}';
}
}
dao
package com.jimmy.dao;
import com.jimmy.domian.Goods;
import org.apache.ibatis.annotations.Mapper;
@Mapper
public interface GoodsMapper extends tk.mybatis.mapper.common.Mapper<Goods> {
}
service
package com.jimmy.service;
import com.jimmy.domian.BaseResult;
import com.jimmy.domian.Goods;
import java.util.List;
public interface GoodsService {
List<Goods> all();
BaseResult pageShowList(Integer page, Integer rows);
}
impl
package com.jimmy.service.impl;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.jimmy.dao.GoodsMapper;
import com.jimmy.domian.BaseResult;
import com.jimmy.domian.Goods;
import com.jimmy.service.GoodsService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import javax.annotation.Resource;
import java.util.List;
/**
* @Author Jimmy
* @Date 2019/10/1 8:14 AM
* @Desc GoodsService接口的实现类
*/
@Service
@Transactional
public class GoodsServiceImpl implements GoodsService {
@Resource
private GoodsMapper mapper;
@Override
public List<Goods> all() {
return mapper.selectAll();
}
@Override
public BaseResult pageShowList(Integer page, Integer rows) {
PageHelper.startPage(page,rows);
List<Goods> goods = mapper.selectAll();
PageInfo<Goods> pageInfo = new PageInfo<>(goods);
BaseResult br = new BaseResult();
br.setTotal((int) pageInfo.getTotal());
br.setData(pageInfo.getList());
return br;
}
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>goods</title>
<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<table border="1" width="300" cellspacing="0" cellpadding="1">
<thead>
<tr>
<td>ID</td>
<td>商品名称</td>
<td>商品描述</td>
<td>商品价格</td>
</tr>
</thead>
<tbody>
<tr v-for="good in goods">
<td>{{good.id}}</td>
<td>{{good.name}}</td>
<td><img :src="good.image" height="50" width="50"></td>
<td>{{good.price}}</td>
</tr>
</tbody>
</table>
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[1, 2, 3, 4]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
<script>
var vm = new Vue({
el : "#app",
data : {
//当前页数
currentPage : 1,
//每页显示1个
pageSize : 1,
//一共200页
total : 200,
goods :[]
},
methods : {
pageShowList(){
axios.get("/pageShowList?page="+this.currentPage+"&rows="+this.pageSize)
.then(function (value) {
console.log(value)
vm.goods = value.data.data
})
}
,
handleSizeChange(val){
vm.pageSize = val
vm.pageShowList()
},
handleCurrentChange(val){
vm.currentPage = val
vm.pageShowList()
}
},
created(){
//展示所有
// axios.get("/all")
// .then(function (value) {
// vm.goods = value.data
// })
//分页展示
//ajax GET请求参数
// 1.当前页显示条数
// 2.当前页码
this.pageShowList()
}
})
</script>
</body>
</html>
9.elementUI分页组件的使用
9.1.引入：
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
9.2.分页效果代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>elementUI分页</title>
<script src="js/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 30, 40]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
<script>
new Vue({
el : "#app",
data : {
//当前页码
currentPage : 1,
//一页显示多少个
pageSize : 10,
//总页数
total : 200
},
methods : {
//改变每页的显示条数，参数就是新选择的参数
handleSizeChange(val){
console.log("当前页的条数为：" + val + "条");
},
//当前页码
handleCurrentChange(val){
console.log("当前页码为：" + val);
}
}
})
</script>
</body>
</html>
1383
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
