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">[email protected]</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">[email protected]</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">[email protected]</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>