Vue基礎之v-bind、計算屬性

薦Vscode編譯器、vue官網：https://cn.vuejs.org/v2/guide/installation.html

1.v-bind（style對象屬性）

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
</head>
<body>
<div id='app'>
    <!-- <h2 :style="{key（屬性值）:value(屬性值)}">{{message}}</h2> -->
    <h2 :style="{fontSize:finalSize,color:finalColor}">{{message}}</h2>
</div>
<script src='../js/vue.js'></script>
<script>
    const app = new Vue({
        el:'#app', //用于掛載要管理的元素
        data:{ //定義數據
            message:    '你好啊，李銀河！',
            name:   'codewhy',
            finalSize: '50px',
            finalColor: 'red'
        }
    })
</script>
</body>
</html>

函數方法改進：

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
</head>
<body>
<div id='app'>
    <!-- <h2 :style="{key（屬性值）:value(屬性值)}">{{message}}</h2> -->
    <h2 :style="getStyles()">{{message}}</h2>
</div>
<script src='../js/vue.js'></script>
<script>
    const app = new Vue({
        el:'#app', //用于掛載要管理的元素
        data:{ //定義數據
            message:    '你好啊，李銀河！',
            name:   'codewhy',
            finalSize: '50px',
            finalColor: 'red'
        },
        methods:{
            getStyles:function(){
                return {fontSize:this.finalSize,color:this.finalColor};
            }
        }
    })
</script>
</body>
</html>

2.v-bind（style數組屬性）

了解即可

在這里插入圖片描述

.VueJS 概述與快速入門

1.1VueJS介紹

Vue.js是一個構建數據驅動的 web 界面的漸進式框架。Vue.js 的目標是通過盡可能簡單的 API 實現響應的數據綁定和組合的視圖組件。它不僅易于上手，還便于與第三方庫或既有項目整合。

官網:https://cn.vuejs.org/

1.2MVVM模式

MVVM是Model-View-ViewModel的簡寫。它本質上就是MVC 的改進版。MVVM 就是將其中的View 的狀態和行為抽象化，讓我們將視圖 UI 和業務邏輯分開

MVVM模式和MVC模式一樣，主要目的是分離視圖（View）和模型（Model）

Vue.js 是一個提供了 MVVM 風格的雙向數據綁定的 Javascript 庫，專注于View 層。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel負責連接 View 和 Model，保證視圖和數據的一致性，這種輕量級的架構讓前端開發更加高效、便捷

1.3VueJS 快速入門

1.3VueJS 快速入門

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>快速入門</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
{{message}}
</div>
<script>
new Vue({
el:'#app', //表示當前vue對象接管了div區域data:{
message:'hello world' //注意不要寫分號結尾
}
});
</script>
</body>
</html>

1.4插值表達式

數據綁定最常見的形式就是使用“Mustache”語法 (雙大括號) 的文本插值，Mustache 標簽將會被替代為對應數據對象上屬性的值。無論何時，綁定的數據對象上屬性發生了改變，插值處的內容都會更新。

Vue.js 都提供了完全的 JavaScript 表達式支持。

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}

這些表達式會在所屬 Vue 實例的數據作用域下作為 JavaScript 被解析。有個限制就是，每個綁定都只能包含單個表達式，所以下面的例子都不會生效。

<!-- 這是語句，不是表達式 -->
{{ var a = 1 }}
<!-- 流控制也不會生效，請使用三元表達式 -->
{{ if (ok) { return message } }}

2.VueJS 常用系統指令

2.1v-on

可以用指令監聽 DOM 事件，并在觸發時運行一些 JavaScript 代碼

2.1.1v-on:click

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

new Vue({

el:'#app', //表示當前vue對象接管了div區域data:{

message:'hello world' //注意不要寫分號結尾

methods:{

fun1:function(msg){ this.message=msg;

}

});

</script>

</body>

</html>

2.1.2v-on:keydown

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>事件處理 v-on示例2</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<input type="text"v-on:keydown="fun2('good',$event)">
</div>
<script>
new Vue({
el:'#app', //表示當前vue對象接管了div區域methods:{
fun2:function(msg,event){
if(! ((event.keyCode>=48&&event.keyCode<=57)||event.keyCode==8||event.keyCode==46)){
event.preventDefault();
}
}
}
});
</script>
</body>
</html>

2.1.3v-on:mouseover

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>事件處理 v-on示例3</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<div v-on:mouseover="fun1" id="div">
<textarea v-on:mouseover="fun2($event)">這是一個文件域</textarea>
</div>
</div>
<script>
new Vue({
el:'#app', //表示當前vue對象接管了div區域methods:{
fun1:function(){ alert("div");
},
fun2:function(event){ alert("textarea"); event.stopPropagation();//阻止冒泡
}
}
});
</script>
</body>
</html>

2.1.4事件修飾符

Vue.js 為 v-on 提供了事件修飾符來處理 DOM 事件細節，如：event.preventDefault() 或

event.stopPropagation()。

Vue.js通過由點(.)表示的指令后綴來調用修飾符。

.stop

.prevent

.capture

.self

.once

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-on 事件修飾符</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<form @submit.prevent action="http://www.itcast.cn" method="get">
<input type="submit" value="提交"/>
</form>
<div @click="fun1">
<a @click.stop >itcast</a>
</div>
</div>
<script>
new Vue({
el:'#app', //表示當前vue對象接管了div區域methods:{
fun1:function(){ alert("hello itcast");
}
}
});
</script>
</body>
</html>

2.1.5按鍵修飾符

Vue 允許為 v-on 在監聽鍵盤事件時添加按鍵修飾符全部的按鍵別名：

.enter

.tab

.delete(捕獲 “刪除” 和 “退格” 鍵)

.esc

.space

.up

.down

.left

.right

.ctrl

.alt

.shift

.meta

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-on 按鈕修飾符</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-on:keyup.enter="fun1">
</div>
<script>
new Vue({
el:'#app', //表示當前vue對象接管了div區域methods:{
fun1:function(){ alert("你按了回車");
}
}
});
</script>
</body>
</html>
<p><!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

v-on簡寫方式

<!-- 完整語法 -->
<a v-on:click="doSomething">...</a>
<!-- 縮 寫 -->
<a @click="doSomething">...</a>

2.2v-text與v-html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-html與v-text</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<div v-text="message"></div>
<div v-html="message"></div>
</div>
<script>
new Vue({
el:'#app', //表示當前vue對象接管了div區域data:{
message:"<h1>傳智黑馬</h1>"
}
});
</script>
</body>
</html>

2.3v-bind

插值語法不能作用在 HTML 特性上，遇到這種情況應該使用 v-bind指令

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-bind</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<font size="5" v-bind:color="ys1">傳智播客</font>
<font size="5" :color="ys2">黑馬程序員</font>
<hr>
<a v-bind={href:"http://www.itcast.cn/index/"+id}>itcast</a>
</div>
<script>
new Vue({
el:'#app', //表示當前vue對象接管了div區域data:{
ys1:"red",
ys2:"green", id:1
}
});
</script>
</body>
</html>

v-bind簡寫方式

<!-- 完整語法 -->
<a v-bind:href="url">...</a>
<!-- 縮 寫 -->
<a :href="url">...</a>

2.4v-model

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-model</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
姓名:<input type="text" id="username" v-model="user.username"><br>
密碼:<input type="password" id="password" v-model="user.password"><br>
<input type="button" @click="fun" value="獲取">
</div>
<script>
new Vue({
el:'#app', //表示當前vue對象接管了div區域data:{
user:{username:"",password:""}
},
methods:{
fun:function(){
alert(this.user.username+"	"+this.user.password); this.user.username="tom"; this.user.password="11111111";
}
}
});
</script>
</body>
</html>

2.5v-for

操作array

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-model</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in list">{{item+" "+index}}</li>
</ul>
</div>
<script>
new Vue({
el:'#app', //表示當前vue對象接管了div區域
data:{
list:[1,2,3,4,5,6]
}
});
</script>
</body>
</html>

操作對象

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-for示例1</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(value,key) in product">{{key}}--{{value}}</li>
</ul>
</div>
<script>
new Vue({
el:'#app', //表示當前vue對象接管了div區域data:{
product:{id:1,pname:"電視機",price:6000}
}
});
</script>
</body>
</html>

操作對象數組

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-for示例1</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<table border="1">
<tr>
<td>序號</td>
<td>名稱</td>
<td>價格</td>
</tr>
<tr v-for="p in products">
<td>
{{p.id}}
</td>
<td>
{{p.pname}}
</td>
<td>
{{p.price}}
</td>
</tr>
</table>
</div>
<script>
new Vue({
el:'#app', //表示當前vue對象接管了div區域data:{
products:[{id:1,pname:"電視機",price:6000},{id:2,pname:"電冰箱",price:8000},
{id:3,pname:"電風扇",price:600}]
}
});
</script>
</body>
</html>

v-if是根據表達式的值來決定是否渲染元素

v-show是根據表達式的值來切換元素的display css屬性

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-if與v-show</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<span v-if="flag">傳智播客</span>
<span v-show="flag">itcast</span>
<button @click="toggle">切換</button>
</div>
<script>
new Vue({
el:'#app', //表示當前vue對象接管了div區域data:{
flag:false
},
methods:{
toggle:function(){
this.flag=!this.flag;
}
}
});
</script>
</body>
</html>

3.VueJS生命周期

每個 Vue 實例在被創建之前都要經過一系列的初始化過程.

vue 在生命周期中有這些狀態， beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,beforeDestroy,destroyed 。 Vue 在實例化的過程中，會調用這些生命周期的鉤子，給我們提供了執行自定義邏輯的機會。那么，在這些vue鉤子中，vue實例到底執行了那些操作，我們先看下面執行的例子

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>生命周期</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
{{message}}
</div>
<script>
var vm = new Vue({ el: "#app", data: {
message: 'hello world'
},
beforeCreate: function() { console.log(this);
showData('創建vue實例前', this);
},
created: function() {
showData('創建vue實例后', this);
},
beforeMount: function() { showData('掛載到dom前', this);
},
mounted: function() {
showData('掛載到dom后', this);
},
beforeUpdate: function() { showData('數據變化更新前', this);
},
updated: function() {
showData('數據變化更新后', this);
},
beforeDestroy: function() { vm.test = "3333";
showData('vue實例銷毀前', this);
},
destroyed: function() { showData('vue實例銷毀后', this);
}
});
function realDom() {
console.log('真實dom結構：' + document.getElementById('app').innerHTML);
}
function showData(process, obj) { console.log(process);
console.log('data 數據：' + obj.message) console.log(' 掛 載 的 對 象 ：') console.log(obj.$el)
realDom();
console.log('	')
console.log('	')
}
vm.message="good	";
vm.$destroy();
</script>
</body>
</html>

vue對象初始化過程中，會執行到beforeCreate,created,beforeMount,mounted 這幾個鉤子的內容

beforeCreate ：數據還沒有監聽，沒有綁定到vue對象實例，同時也沒有掛載對象

created ：數據已經綁定到了對象實例，但是還沒有掛載對象

beforeMount: 模板已經編譯好了，根據數據和模板已經生成了對應的元素對象，將數據對象關聯到了對象的el屬性，el屬性是一個HTMLElement對象，也就是這個階段，vue實例通過原生的createElement等方法來創建這個html片段，準備注入到我們vue實例指明的el屬性所對應的掛載點

mounted:將el的內容掛載到了el，相當于我們在jquery執行了(el).html(el),生成頁面上真正的dom，上面我們就會發現dom的元素和我們el的元素是一致的。在此之后，我們能夠用方法來獲取到el元素下的dom對象，并進行各種操作

當我們的data發生改變時，會調用beforeUpdate和updated方

beforeUpdate ：數據更新到dom之前，我們可以看到$el對象已經修改，但是我們頁面上dom的數據還沒有發生改變

updated: dom結構會通過虛擬dom的原則，找到需要更新頁面dom結構的最小路徑，將改變更新到dom上面，完成更新

beforeDestroy,destroed :實例的銷毀，vue實例還是存在的，只是解綁了事件的監聽還有watcher對象數據與view的綁定，即數據驅動

4.VueJS ajax

4.1vue-resource

vue-resource是Vue.js的插件提供了使用XMLHttpRequest或JSONP進行Web請求和處理響應的服務。當vue更新到2.0之后，作者就宣告不再對vue-resource更新，而是推薦的axios，在這里大家了解一下vue-resource就可以。

vue-resource的github: https://github.com/pagekit/vue-resource

4.2axios

Axios 是一個基于 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中

axios的github:https://github.com/axios/axios

4.2.1引入axios

首先就是引入axios,如果你使用es6，只需要安裝axios模塊之后

import axios from 'axios';
//安裝方法
npm install axios
//或
bower install axios

當然也可以用script引入

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

4.2.2get請求

//通過給定的ID來發送請求axios.get('/user?ID=12345')
.then(function(response){ console.log(response);
})
.catch(function(err){ console.log(err);
});
//以上請求也可以通過這種方式來發送axios.get('/user',{
params:{ ID:12345
}
})
.then(function(response){ console.log(response);
})
.catch(function(err){ console.log(err);
});

4.2.3post請求

axios.post('/user',{ firstName:'Fred', lastName:'Flintstone'
})
.then(function(res){ console.log(res);
})
.catch(function(err){ console.log(err);
});

為方便起見，為所有支持的請求方法提供了別名

axios.request(con?g)

axios.get(url[, con?g]) axios.delete(url[, con?g]) axios.head(url[, con?g]) axios.post(url[, data[, con?g]]) axios.put(url[, data[, con?g]]) axios.patch(url[, data[, con?g]])

5.綜合案例

5.1案例需求

完成用戶的查詢與修改操作

5.2數據庫設計與表結構

CREATE DATABASE vuejsdemo; USE vuejsdemo;
CREATE TABLE USER(
id INT PRIMARY KEY AUTO_INCREMENT,
age INT,
username VARCHAR(20), PASSWORD VARCHAR(50), email VARCHAR(50), sex VARCHAR(20)
)

User類

public class User { private Integer id;
private String username; private String password; private String sex; private int age;
private String email;
省略getter/setter
｝

5.3服務器端

5.3.1配置文件

pom.xml

<?xml version="1.0" encoding="UTF-8"?>

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema- instance"

xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">

<groupId>com.itheima.vuejsDemo</groupId>

<artifactId>vuejsDemo</artifactId>

<version>1.0-SNAPSHOT</version>

<name>vuejsDemo Maven Webapp</name>

<url>http://www.example.com</url>

<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>

<maven.compiler.source>1.8</maven.compiler.source>

<maven.compiler.target>1.8</maven.compiler.target>

<spring.version>5.0.2.RELEASE</spring.version>

<slf4j.version>1.6.6</slf4j.version>

<log4j.version>1.2.12</log4j.version>

<mybatis.version>3.4.5</mybatis.version>

</properties>

<groupId>org.aspectj</groupId>

<artifactId>aspectjweaver</artifactId>

</dependency>

<groupId>org.springframework</groupId>

<artifactId>spring-aop</artifactId>