--------------------------------------------不是井裡沒有水，而是你挖的不夠深.
3. Vue對象提供的屬性功能
3.1 過濾器
過濾器，就是vue允許開發者自定義的文本格式化函數，可以使用在兩個地方：輸出内容和操作資料中。
定義過濾器的方式有兩種。
3.1.1 使用Vue.filter()進行全局定義
Vue.filter("RMB1", function(v){
//就是來格式化(處理)v這個資料的
if(v==0){
return v
}
return v+"元"
})
3.1.2 在vue對象中通過filters屬性來定義
var vm = new Vue({
el:"#app",
data:{},
filters:{
RMB2:function(value){
if(value==''){
return;
}else{
return '¥ '+value;
}
}
}
});
3.2 阻止事件冒泡和重新整理頁面
事件冒泡
在js的事件操作中,子元素的事件觸發以後,會預設情況把事件傳播給其父級元素,然後一層層往外傳播,這種現象就是"事件冒泡".
事件冒泡
點我呀~
阻止事件冒泡
下面案例中,在事件綁定的時候,vue.js提供了一個屬性.top可以幫助我們阻止事件往外傳播.
Title
.box{
background-color: #fff;
border-radius: 5px;
padding-top: 15px;
padding-left: 30px;
padding-bottom: 15px;
width: 290px;
height: 160px;
position: fixed;
margin: auto;
left: 0px;
right: 0px;
top:0;
bottom: 0;
}
.container{
background: rgba(0,0,0,0.6);
width: 100%;
margin:auto;
position: fixed;
top:0;
left: 0;
bottom:0;
right:0;
}
顯示
賬号:
密碼:
let vm = new Vue({
el:"#app",
data:{
is_show:false,
},
methods:{
},
})
阻止頁面重新整理
Title
百度
let vm = new Vue({
el:"#app",
data:{
},
})
使用.stop和.prevent的例子
Title
.box1{
width: 200px;
height: 200px;
background: #ccc;
}
.box2{
width: 100px;
height: 100px;
background: pink;
}
window.onload = function(){
var vm = new Vue({
el:"#app",
data:{}
})
}
3.4 計算和偵聽屬性
3.4.1 計算屬性
字元串反轉
let str1 = "hello";
let reverse_str = str1.split('').reverse().join("");
console.log(reverse_str);
如果直接把反轉的代碼寫在元素中，則會使得其他同僚在開發時時不易發現資料被調整了，是以vue提供了一個計算屬性(computed)，可以讓我們把調整data資料的代碼存在在該屬性中。
Title
window.onload = function(){
var vm = new Vue({
el:"#app",
data:{
str1: "abcdefgh"
},
computed:{ //計算屬性：裡面的函數都必須有傳回值
strRevs: function(){
var ret = this.str1.split("").reverse().join("");
return ret
}
}
});
}
{{ str1 }}
{{ strRevs }}
3.4.2 監聽屬性
偵聽屬性，可以幫助我們偵聽data某個資料的變化，進而做相應的自定義操作。
偵聽屬性是一個對象，它的鍵是要監聽的對象或者變量，值一般是函數，當偵聽的data資料發生變化時，會自定執行的對應函數，這個函數在被調用時，vue會傳入兩個形參，第一個是變化前的資料值，第二個是變化後的資料值。
Title
window.onload = function(){
var vm = new Vue({
el:"#app",
data:{
num:20
},
watch:{
num:function(newval,oldval){
//num發生變化的時候，要執行的代碼
console.log("num已經發生了變化！");
}
}
})
}
{{ num }}
按鈕
3.5 vue對象的生命周期
每個Vue對象在建立時都要經過一系列的初始化過程。在這個過程中Vue.js會自動運作一些叫做生命周期的的鈎子函數，我們可以使用這些函數，在對象建立的不同階段加上我們需要的代碼，實作特定的功能。
Title
window.onload = function(){
var vm = new Vue({
el:"#app",
data:{
num:0
},
beforeCreate:function(){
console.log("beforeCreate,vm對象尚未建立,num="+ this.num); //undefined
this.name=10; // 此時沒有this對象呢，是以設定的name無效，被在建立對象的時候被覆寫為0
},
created:function(){
console.log("created,vm對象建立完成,設定好了要控制的元素範圍,num="+this.num ); // 0
this.num = 20;
},
beforeMount:function(){
console.log( this.$el.innerHTML ); //
{{num}}
console.log("beforeMount,vm對象尚未把data資料顯示到頁面中,num="+this.num ); // 20
this.num = 30;
},
mounted:function(){
console.log( this.$el.innerHTML ); //
30
console.log("mounted,vm對象已經把data資料顯示到頁面中,num="+this.num); // 30
},
beforeUpdate:function(){
// this.$el 就是我們上面的el屬性了，$el表示目前vue.js所控制的元素#app
console.log( this.$el.innerHTML ); //
30
console.log("beforeUpdate,vm對象尚未把更新後的data資料顯示到頁面中,num="+this.num); // beforeUpdate----31
},
updated:function(){
console.log( this.$el.innerHTML ); //
31
console.log("updated,vm對象已經把過呢更新後的data資料顯示到頁面中,num=" + this.num ); // updated----31
},
});
}
{{num}}
按鈕
總結：
在vue使用的過程中，如果要初始化操作，把初始化操作的代碼放在 mounted 中執行。
mounted階段就是在vm對象已經把data資料實作到頁面以後。一般頁面初始化使用。例如，使用者通路頁面加載成功以後，就要執行的ajax請求。
另一個就是created，這個階段就是在 vue對象建立以後，把ajax請求後端資料的代碼放進 created
4. 通過axios實作資料請求
vue.js預設沒有提供ajax功能的。
是以使用vue的時候，一般都會使用axios的插件來實作ajax與後端伺服器的資料互動。
注意，axios本質上就是javascript的ajax封裝，是以會被同源政策限制。
下載下傳位址：
https://unpkg.com/[email protected]/dist/axios.js
https://unpkg.com/[email protected]/dist/axios.min.js
axios提供發送請求的常用方法有兩個：axios.get() 和 axios.post() 。
// 發送get請求
// 參數1: 必填，字元串，請求的資料接口的url位址
// 參數2：必填，json對象，要提供給資料接口的參數
// 參數3：可選，json對象，請求頭資訊
axios.get('/user',{
ID:'12345',
})
.then(function (response) { // 請求成功以後的回調函數
console.log("請求成功");
console.log(response);
})
.catch(function (error) { // 請求失敗以後的回調函數
console.log("請求失敗");
console.log(error);
});
// 發送post請求，參數和使用和axios.get()一樣。
axios.post('/user',{
params:{
firstName: 'Fred',
lastName: 'Flintstone'
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
// b'firstName=Fred&lastName=Flintstone'
4.1 json
json是 JavaScript Object Notation 的首字母縮寫，單詞的意思是javascript對象表示法，這裡說的json指的是類似于javascript對象的一種資料格式。
json的作用：在不同的系統平台，或不同程式設計語言之間傳遞資料。
4.1.1 json資料的文法
json資料對象類似于JavaScript中的對象，但是它的鍵對應的值裡面是沒有函數方法的，值可以是普通變量，不支援undefined，值還可以是數組或者json對象。
// json資料的對象格式：
{
"name":"tom",
"age":18
}
// json資料的數組格式：
["tom",18,"programmer"]
複雜的json格式資料可以包含對象和數組的寫法。
{
"name":"小明",
"age":38,
"fav":["code","eat","swim","read"],
"son":{
"name":"小小明",
"age":10,
}
}
// 數組結構也可以作為json傳輸資料。
json資料可以儲存在.json檔案中，一般裡面就隻有一個json對象。
總結：
1. json檔案的字尾是json
2. json檔案一般儲存一個單一的json資料對象
3. json資料的屬性不能是方法或者undefined，屬性值隻能：數值、字元串、對象和數組
4. json資料隻使用雙引号、每一個屬性成員之間使用逗号隔開，并且最後一個成員沒有逗号。
{
"name":"小明",
"age":200,
"fav":["code","eat","swim","read"],
"son":{
"name":"小小明",
"age":100
}
}
4.1.2 js中提供的json資料轉換方法
javascript提供了一個JSON對象來操作json資料的資料轉換.
方法參數傳回值描述
stringify
json對象
字元串
json對象轉成字元串
parse
字元串
json對象
字元串格式的json資料轉成json對象
Document
var json_obj = {
"name":"小明",
"age":200,
"fav":["code","eat","swim","read"],
"son":{
"name":"小小明",
"age":100
}
};
// json對象轉換成字元串格式的json資料
var data_str = JSON.stringify(json_obj);
console.log( data_str );
// 字元串格式的json資料轉換成json對象
var data_json = JSON.parse(data_str);
console.log( data_json );
代碼執行結果：
4.2 ajax
ajax，一般中文稱之為："阿賈克斯"，是英文 “Async Javascript And Xml”的簡寫，譯作：異步js和xml資料傳輸資料。
ajax的作用： ajax可以讓js代替浏覽器向後端程式發送http請求，與後端通信，在使用者不知道的情況下操作資料和資訊，進而實作頁面局部重新整理資料/無重新整理更新資料。
是以開發中ajax是很常用的技術，主要用于操作後端提供的資料接口，進而實作網站的前後端分離。
ajax技術的原理是執行個體化js的XMLHttpRequest對象，使用此對象提供的内置方法就可以與後端進行資料通信。
4.2.1 資料接口
資料接口，也叫api接口，表示後端提供操作資料/功能的url位址給用戶端使用。
用戶端通過發起請求向服務端提供的url位址申請操作資料【操作一般：增删查改】
同時在工作中，大部分資料接口都不是手寫，而是通過函數庫/架構來生成。
4.2.2 前後端分離
在開發Web應用中，有兩種應用模式：
前後端不分離
前後端分離
4.2.3 ajax的使用
ajax的使用必須與服務端程式配合使用，但是目前我們先學習ajax的使用，是以暫時先不涉及到服務端python代碼的編寫。是以，我們可以使用别人寫好的資料接口進行調用。
jQuery将ajax封裝成了一個函數$.ajax()，我們可以直接用這個函數來執行ajax請求。
編寫代碼擷取接口提供的資料：
jQ版本
Title
$(function(){
$("#btn").on("click",function(){
$.ajax({
// 後端程式的url位址
url: 'http://wthrcdn.etouch.cn/weather_mini',
// 也可以使用method，送出資料的方式，預設是'GET'，常用的還有'POST'
type: 'get',
dataType: 'json', // 傳回的資料格式，常用的有是'json','html',"jsonp"
data:{ // 設定發送給伺服器的資料，如果是get請求，也可以寫在url位址的?後面
"city":'北京'
}
})
.done(function(resp) { // 請求成功以後的操作
console.log(resp);
})
.fail(function(error) { // 請求失敗以後的操作
console.log(error);
});
});
})
點選擷取資料
點選按鈕以後的效果：
總結：
1. 發送ajax請求，要通過$.ajax()，參數是對象，裡面有固定的參數名稱。
$.ajax({
"url":"資料接口url位址",
"method":"http請求方式，前端隻支援get和post",
"dataType":"設定伺服器傳回的資料格式，常用的json，html，jsonp，預設值就是json",
// 要發送給後端的資料參數，post時，資料必須寫在data，get可以寫在data,也可以跟在位址欄?号後面
"data":{
"資料名稱":"資料值",
}
}).then(function(resp){ // ajax請求資料成功時會自動調用then方法的匿名函數
console.log( resp ); // 服務端傳回的資料
}).fail(function(error){ // ajax請求資料失敗時會自動調用fail方法的匿名函數
console.log( error );
});
2. ajax的使用往往配合事件操作進行調用。
jQuery還提供了$.get 和 $post簡寫$.ajax的操作。
// 發送get請求
// 參數1：資料接口的請求位址
// 參數2：發送給接口位址的資料參數
// 參數3：ajax請求成功以後，調用的匿名函數，匿名函數的第一個參數還是服務端傳回的資料
// 參數4：設定服務端傳回的資料格式，告訴給jQuery
$.get("test.php", { "func": "getNameAndTime" },
function(data){
alert(data.name); // John
console.log(data.time); // 2pm
}, "json");
// 發送post請求
// 參數1：資料接口的請求位址
// 參數2：發送給接口位址的資料參數
// 參數3：ajax請求成功以後，調用的匿名函數，匿名函數的第一個參數還是服務端傳回的資料
// 參數4：設定服務端傳回的資料格式，告訴給jQuery
$.post("test.php", { "func": "getNameAndTime" },
function(data){
alert(data.name); // John
console.log(data.time); // 2pm
}, "json");
4.2.4 同源政策
同源政策，是浏覽器為了保護使用者資訊安全的一種安全機制。所謂的同源就是指代通信的兩個位址(例如服務端接口位址與浏覽器用戶端頁面位址)之間比較，是否協定、域名(IP)和端口相同。不同源的用戶端腳本[javascript]在沒有明确授權的情況下，沒有權限讀寫對方資訊。
ajax本質上還是javascript，是運作在浏覽器中的腳本語言，是以會被受到浏覽器的同源政策所限制。
前端位址：http://www.oldboy.cn/index.html是否同源原因
http://www.oldboy.cn/user/login.html
是
協定、域名、端口相同
http://www.oldboy.cn/about.html
是
協定、域名、端口相同
https://www.oldboy.cn/user/login.html
否
協定不同 ( https和http )
http:/www.oldboy.cn:5000/user/login.html
否
端口 不同( 5000和80)
http://bbs.oldboy.cn/user/login.html
否
域名不同 ( bbs和www )
同源政策針對ajax的攔截，代碼：
Title
$(function(){
$("#btn").on("click",function(){
$.ajax({
url: 'http://weatherapi.market.xiaomi.com/wtr-v2/weather',
type: 'get',
dataType: 'json',
data:{
"cityId":101010100
}
})
.done(function(resp) { // 請求成功以後的操作
console.log(resp);
})
.fail(function(error) { // 請求失敗以後的操作
console.log(error);
});
});
})
點選擷取資料
效果：
4.2.5 ajax跨域(跨源)方案之CORS
CORS是一個W3C标準，全稱是"跨域資源共享"，它允許浏覽器向跨源的後端伺服器發出ajax請求，進而克服了AJAX隻能同源使用的限制。
實作CORS主要依靠後端伺服器中響應資料中設定響應頭資訊傳回的。
response = new Response()
response .set_header("")
// 在響應行資訊裡面設定以下内容：
Access-Control-Allow-Origin: ajax所在的域名位址
Access-Control-Allow-Origin: www.oldboy.cn # 表示隻允許www.oldboy.cn域名的用戶端的ajax跨域通路
// * 表示任意源，表示允許任意源下的用戶端的ajax都可以通路目前服務端資訊
Access-Control-Allow-Origin: *
總結：
0. 同源政策：浏覽器的一種保護使用者資料的一種安全機制。
浏覽器會限制腳本文法不能跨源通路其他源的資料位址。
同源：判斷兩個通信的位址之間，是否協定，域名[IP]，端口一緻。
ajax： http://127.0.0.1/index.html
api資料接口： http://localhost/index
這兩個是同源麼？不是同源的。
1. ajax預設情況下會受到同源政策的影響，一旦受到影響會報錯誤如下：
No 'Access-Control-Allow-Origin' header is present on the requested resource
2. 解決ajax隻能同源通路資料接口的方式：
1. 在服務端的響應行中設定：
Access-Control-Allow-Origin: 允許通路的域名位址
5. 元件開發
5.1 元件[component]
元件(Component)是自定義封裝的功能。在前端開發過程中，經常出現多個網頁的功能是重複的，而且很多不同的網站之間，也存在同樣的功能。
而在網頁中實作一個功能，需要使用html定義功能的内容結構，使用css聲明功能的外觀樣式，還要使用js來定義功能的特效，是以就産生了把一個功能相關的[HTML、css和javascript]代碼封裝在一起組成一個整體的代碼塊封裝模式，我們稱之為“元件”。
是以，元件就是一個html網頁中的功能，一般就是一個标簽，标簽中有自己的内容結構，樣式和特效。
這樣，前端人員就可以在開發時，隻需要書寫一次代碼，随處引入即可使用。
元件有兩種：預設元件[全局元件] 和 單檔案元件
5.1.1 預設元件
Vue.component("addnum",{
template:'
點選 ',
data: function(){
// 寫在這裡的資料隻有目前元件可以使用
return {
num:1,
}
}
});
var vm = new Vue({
el:"#app",
// 這裡寫的資料是全局公用的，整個檔案共享
data:{
}
})