10-10
1. Vue概述
目標：MVVM模式應用特點，Vue概念
小結：
MVVM通過檢視與模型的雙向繫結，簡化前端操作。Vue是一款前端漸進式框架，可以提高前端開發效率。
2. 搭建示例工程
目標：使用IDEA建立示例工程並在工程中通過npm安裝下載vue.js
分析：
vue是一個前端框架，也是其實是一個js檔案；下載vue.js檔案並在頁面中引入該js檔案。
vue.js的下載方式：
- 可以引用線上的vue.js；
- 可以離線下載vue.js；
- npm包資源管理器，可以下載vue.js
小結：
使用了npm的方式安裝vue模組：
#初始化 npm init -y #下載vue模組 npm install vue --save
3. 演示雙向繫結與事件處理
目標：建立01-demo.html頁面並初始化Vue例項，通過console修改Vue資料實現雙向繫結效果和建立按鈕實現點選即自增
分析：
- 建立頁面，初始化vue；
- {{}}獲取顯示資料；
- v-model實現雙向繫結；
- v-on演示事件處理
小結：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vuejs測試</title> <script src="node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"> <input type="text" v-model="num"><button v-on:click="num++">點我</button> <h2>{{name}} 非常酷！有{{num}}個學科。</h2> </div> <script type="text/javascript"> var app = new Vue({ el:"#app", data:{ name:"黑馬", num: 1 } }); </script> </body> </html>
4. Vue例項生命週期及鉤子函式
目標：瞭解Vue例項生命週期，生命週期的鉤子函式及created函式常用場景
分析：
在建立vue例項的時候可以指定模板id、資料和方法；而如果要在例項化、模板渲染的過程中需要執行一些其它操作的話；那麼可以使用鉤子函式。
小結：
鉤子函式會在vue例項的各個生命週期階段自動呼叫；具體有：beforeCreate，created,beforeMount,mounted,updated,beforeUpdate，destroyed，beforeDestroy
created鉤子函式常用場景：用於初始化資料
鉤子函式不要使用箭頭函式的方式編寫。
5. 插值、v-text和v-html
目標：插值使用場景和要求；v-text和v-html的作用
小結：
插值可以使用在有需要顯示vue例項資料的地方，可以在插值表示式中呼叫例項的資料屬性和函式。
v-text和v-html的作用：可以將資料在模板中進行顯示；區別：v-html會對內容中出現的html標籤進行渲染，而v-text會將內容當做普遍文字輸出到元素裡面。
6. 指令-v-model使用
目標：使用v-model指令實現複選框的雙向繫結
小結：
<div id="app">
<input type="checkbox" value="Java" v-model="language">Java<br>
<input type="checkbox" value="Python" v-model="language">Python<br>
<input type="checkbox" value="Swift" v-model="language">Swift<br>
<h2>
你選擇了：{{language.join("，")}}
</h2>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
language:[]
}
});
</script>
多個 checkbox 對應一個model時，model的型別是一個數組，單個checkbox值是boolean型別
radio對應的值是input的value值
input 和 textarea 預設對應的model是字串
select 單選對應字串，多選對應也是陣列
7. 指令-v-on使用
目標：瞭解v-on指令的語法實現按鈕點選後的遞增和遞減
分析：
在沒有使用vue之前；頁面標籤可以通過設定onXXX響應事件；在vue中可以通過v-on指令響應事件。
小結：
v-on的使用：
<div id="app">
<button v-on:click="num++">增加</button>
<button @click="decrement">減少</button>
<h2>
num = {{num}}
</h2>
<hr>
事件冒泡測試：<br>
<div style="background-color: lightblue; width:100px;height:100px" @click="print('div被點選了')">
<button @click.stop="print('點選了button')">點我試試</button>
</div>
<br>阻止預設事件：<br>
<a href="http://www.itcast.cn" @click.prevent="print('點選了超連結')" >傳智播客</a>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
num:1
},
methods: {
//遞減
decrement(){
this.num--;
},
//列印
print(str){
console.log(str);
}
}
});
</script>
事件修飾符：語法v-on:xxxx.修飾符，常用的修飾符有：
.stop ：阻止事件冒泡
.prevent ：阻止預設事件發生
.capture ：使用事件捕獲模式
.self ：只有元素自身觸發事件才執行。（冒泡或捕獲的都不執行）
.once ：只執行一次
8. 指令v-for使用
目標：瞭解v-for指令語法實現對陣列、物件的遍歷
分析：
實現：可以在vue例項化的時候指定要遍歷的資料，然後通過v-for指令在模板中遍歷顯示資料。一般情況下，要遍歷的資料可以通過鉤子函式created傳送非同步請求獲取資料。
小結：
可以使用v-for遍歷陣列、物件：
<div id="app">
<ul>
<li v-for="(user, index) in users" :key="index">
{{index}}--{{user.name}}--{{user.age}}--{{user.gender}}
</li>
</ul>
<hr>
<ul>
<li v-for="(value, key, index) in person">
{{index}}--{{key}}--{{value}}
</li>
</ul>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
users:[
{"name":"黑馬","age":13,"gender":"男"},
{"name":"傳智播客","age":13,"gender":"女"},
{"name":"酷丁魚","age":4,"gender":"男"}
],
person:{"name":"傳智匯","age":13,"gender":"男","address":"中國"}
}
});
</script>
如果遍歷的時候需要使用到索引號，可以在迴圈遍歷的位置，新增一個引數；該索引號是從0開始的。
9. 指令-v-if和v-show使用
目標：說出v-if與v-show的區別；通過一個按鈕的點選，實現遍歷陣列結果的顯示存在與否並在遍歷過程中使用v-if對資料進行判斷處理；實現文字內容的隱藏
分析：
- v-if：通過一個按鈕的點選，實現遍歷陣列結果的顯示存在與否並在遍歷過程中使用v-if對資料進行判斷處理
- v-show：實現文字內容的隱藏
小結：
v-if在條件不滿足的時候元素不會存在；v-show條件不滿足的時候只是對元素進行隱藏。
10. 指令-v-bind使用
目標：瞭解v-bind語法和作用；實現點選不同按鈕切換不同的屬性值；使用class屬性中的特殊用法實現一個按鈕切換背景色
分析：
其中src和height的值如果不想寫死，而是想獲取vue例項中的資料屬性值的話；那可以通過使用v-bind實現：
<img v-bind:src="vue例項中的資料屬性名" :height="vue例項中的資料屬性名"/>
小結：
可以使用v-bind：
<div id="app">
<button @click="color='red'">紅色</button>
<button @click="color='blue'">藍色</button>
<div :class="color">
點選按鈕改變背景顏色
</div>
<hr>
<br>
<button @click="bool=!bool">點我改變下面色塊的顏色</button>
<div :class="{red:bool, blue:!bool}">
點選按鈕改變背景顏色
</div>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
color:"red",
bool:true
}
});
</script>
v-bind的作用：可以對所有元素的屬性設定vue例項的資料。
11. 計算屬性的使用
目標：計算屬性的應用場景，實現將一個日期時間值轉換為yyyy-MM-dd格式字串
分析：
一個日期的毫秒值要顯示為格式化（yyyy-MM-dd）的日期字串的話；可以使用computed計算屬性裡面的方法進行處理。
小結：
計算屬性的應用：
<div id="app">
<h2>
你的生日是：
{{new Date(birthday).getFullYear()}}-{{new Date(birthday).getMonth()+1}}-{{new Date(birthday).getDay()}}
</h2>
<hr>
<h2>
你的生日是：
{{birth}}
</h2>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
birthday:1429032123201
},
computed:{
birth(){
const date = new Date(this.birthday);
return date.getFullYear() + "-" + (date.getMonth()+1) + "-" + date.getDay();
}
}
});
</script>
computed計算屬性的應用場景：可以應用在插值或者指令表示式複雜的時候。可以將一些屬性資料經過方法處理之後返回。
12. watch基本和深度監控
目標：watch的使用場景；並使用其監聽簡單屬性值及其物件中屬性值的變化
分析：
在vue例項中資料屬性；因為在頁面中修改而產生了變化；可以通過watch監控獲取其改變前後的值。
如果是修改的物件資料屬性，可以開啟深度監控獲取修改後最新的物件資料。如：person.name
小結：
可以如下使用watch進行資料屬性的監控：
<div id="app">
<input type="text" v-model="message">
<hr><br>
<input type="text" v-model="person.name"><br>
<input type="text" v-model="person.age"><button @click="person.age++">+</button>
<h2>
姓名為：{{person.name}}；年齡為：{{person.age}}
</h2>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
message:"黑馬",
person:{"name":"heima", "age":13}
},
watch:{
message(newValue, oldValue){
console.log("新值：" + newValue + "；舊值：" + oldValue);
},
person: {
//開啟深度監控；監控物件中的屬性值變化
deep: true,
//可以獲取到最新的物件屬性資料
handler(obj){
console.log("name = " + obj.name + "; age=" + obj.age);
}
}
}
});
</script>
watch使用場景：可以監控檢視中資料的變化而做出響應；如：下拉框列表中，當如果選擇了對於的下拉框選項之後，要根據最新的值去載入一些其它資料的話。
13. 元件使用
目標：瞭解元件的使用場景；定義點選則計數的元件並使用全域性註冊和區域性註冊方式
分析：
可以將通用或者公用的頁面模組抽取成vue元件，在vue例項中引用。
小結：
在頁面中可以如下實驗元件：
<div id="app">
<!--使用元件-->
<counter></counter>
<counter></counter>
<counter></counter>
</div>
<script type="text/javascript">
//定義元件
const counter = {
template:"<button @click='num++'>你點選了{{num}}次</button>",
data(){
return {num:0}
}
};
//全域性註冊元件：在所有的vue例項中都可以使用元件
//引數1：元件名稱，引數2：具體的元件
//Vue.component("counter", counter);
var app = new Vue({
el:"#app",
components:{
counter: counter
}
});
</script>
元件使用場景：在專案需要重用某個模組（頭部、尾部、新聞。。。）的時候，可以將模組抽取成元件，其它頁面中註冊元件並引用。
- 全域性註冊：在任何vue例項中都可以引用，如：一般網站的頭部導航選單
- 區域性註冊：可以在有需要的頁面引入元件，如：商城網站首頁頁面中各種活動模組
14. 父元件向子元件通訊
目標：父元件與子元件通訊的意義；實現父元件將簡單字串和物件更新到子元件
小結：
元件通訊意義：父子元件之間資料的交換，能夠及時更新元件內容。
- 父元件將簡單字串更新傳遞到子元件
<div id="app">
<!--使用元件-->
<introduce :title="msg"></introduce>
</div>
<script type="text/javascript">
//定義元件
const introduce = {
template:"<h2>{{title}}</h2>",
//定義接收父元件的屬性
props:["title"]
};
//全域性註冊元件：在所有的vue例項中都可以使用元件
//引數1：元件名稱，引數2：具體的元件
Vue.component("introduce", introduce);
var app = new Vue({
el:"#app",
data:{
msg:"父元件的msg屬性資料內容"
}
});
</script>
- 父元件將陣列更新傳遞到子元件
<div id="app">
<!--使用元件-->
<my-list :items="lessons" ></my-list>
</div>
<script type="text/javascript">
//定義元件
const myList = {
template:`
<ul>
<li v-for="item in items" :key="item.id">{{item.id}}--{{item.name}}</li>
</ul>
`,
//定義接收父元件的屬性
props:{
items:{
//資料型別，如果是陣列則是Array，如果是物件則是Object
type:Array,
//預設值
default:[]
}
}
};
var app = new Vue({
el:"#app",
data:{
msg:"父元件的msg屬性資料內容",
:[
{"id":1, "name":"Java"},
{"id":2, "name":"Php"},
{"id":3, "name":"前端"}
]
},
components:{
myList
}
});
</script>
15. 子元件向父元件通訊
目標：在子元件中點選對應按鈕實現父元件中屬性資料的改變
小結：
<div id="app">
<h2>num = {{num}}</h2>
<!--使用元件-->
<counter @plus="numPlus" @reduce="numReduce" :snum="num"></counter>
</div>
<script type="text/javascript">
//定義元件
const counter = {
template:`
<div>
<button @click='incrNum'>+</button>
<button @click='decrNum'>-</button>
</div>
`,
props:["snum"],
methods:{
//遞增
incrNum(){
//呼叫到父元件中的方法
return this.$emit("plus");
},
decrNum(){
//呼叫到父元件中的方法
return this.$emit("reduce");
}
}
};
//全域性註冊元件：在所有的vue例項中都可以使用元件
//引數1：元件名稱，引數2：具體的元件
//Vue.component("counter", counter);
var app = new Vue({
el:"#app",
components:{
counter: counter
},
data:{
num:0
},
methods:{
numPlus(){
this.num++;
},
numReduce(){
this.num--;
}
}
});
</script>
16. axios概述
目標：axios的用途及瞭解常見方法
小結：
axios的作用：傳送非同步請求獲取資料。常見的方法：get、post；在傳送的時候可以指定引數（地址、請求方式和請求頭部資訊）；返回資料結構（data/status/statusText/headers/config）
17. axios方法及get、post方法使用
目標：使用axios方法獲取資料並在頁面中將資料遍歷顯示；切換改為get/post方法實現資料載入
小結：
可以使用axios獲取對應伺服器資料；如果不是同一個服務的資料則可能會出現跨域請求；需要在響應的伺服器上配置跨域。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vuejs測試</title>
<script src="node_modules/vue/dist/vue.js"></script>
<script src="js/axios.min.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(user, index) in users" :key="index">
{{index}}--{{user.name}}--{{user.age}}--{{user.gender}}
</li>
</ul>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
users:[]
},
created(){
//初始化載入資料
axios.post("data.json").then(res=>{
console.log(res);
//將資料賦值到vue例項中的資料屬性users；
//不能使用this，在axios回撥函式中表示視窗，不是vue例項
app.users = res.data;
}).catch(err=>alert(err));
axios.get("http://localhost/user/8").then(res=>{
console.log(res.data);
}).catch(err=>alert(err));
/*
axios.get("data.json").then(res=>{
console.log(res);
//將資料賦值到vue例項中的資料屬性users；
//不能使用this，在axios回撥函式中表示視窗，不是vue例項
app.users = res.data;
}).catch(err=>alert(err));
*/
/*
axios({
url:"data.json",
method:"get"
}).then(res=>{
console.log(res);
//將資料賦值到vue例項中的資料屬性users；
//不能使用this，在axios回撥函式中表示視窗，不是vue例項
app.users = res.data;
}).catch(err=>alert(err));
*/
}
});
</script>
</body>
</html>
跨域：在前端js中如果傳送非同步請求的話，請求的地址與當前伺服器的ip或者埠號不同都是跨域請求，可以使用如下方式在伺服器端進行配置：