一: 過濾器
1. 定義: 過濾器，就是vue允許開發者自定義的文本格式化函數，可以使用在兩個地方：輸出內容和操作數據中。
定義過濾器的方式有兩種。
2.使用vue.filter()進行全局定義
Vue.filter("RMB1", function(v){
//就是來格式化(處理)v這個數據的
if(v==0){
return v
}
return v+"元"
})
3. 在vue對象中通過filters屬性來定義
var vm = new Vue({
el:"#app",
data:{},
filters:{
RMB2:function(value){
if(value==''){
return;
}else{
return '¥ '+value;
}
}
}
});
4. 案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue/vue.js"></script> </head> <body> <div id="app"> <span>{{num|f2|RBM}}</span> <!-- 保留兩位小數及尾部追加"元"--> <br> <span>{{text|trans}}</span> <!-- 轉換成大寫--> </div> <script> //全局過濾器 //用於過濾用戶輸入的數據或者格式化文本 Vue.filter("f2",function (value) { //在vue的對象調用過濾器時過濾的內容 //必須要使用return 把過濾后的內容返回 //js提供的toFixed() return value.toFixed(2) }); Vue.filter("RBM",function (value) {//在vue的對象調用過濾器時過濾的內容 return value +"元"; }); let vm=new Vue({ el:"#app", data:{ num:10.33333, text:"hello world", }, methods:{ }, filters:{ trans:function (value) { //必須使用return 把過濾后的內容返回 return value.toUpperCase(); } } }) </script> </body> </html>
二: 阻止事件冒泡和刷新頁面
1. 事件冒泡
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件冒泡</title> </head> <body> <div class="div1" onclick="alert('雙加666')" onmouseover="alert('div1')"> <div class="div2" onmouseover="alert('div2')"> <div class="div3" onmouseover="alert('div3')"> <p>點我呀~</p> </div> </div> </div> <script> //事件冒泡就是指點擊的事件會觸發父及標簽執行事件,就像從里往外執行,俗稱冒泡
//即:從p標簽到最外層標簽都會執行事件
</script> </body> </html>
2. 阻止事件冒泡
在事件綁定的時候,vue.js提供了一個屬性.top可以幫助我們阻止事件往外傳播.
案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> <style> .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; } </style> </head> <body> <div id="app"> <h1 @click="is_show=true">顯示</h1> <div class="container" v-show="is_show" @click="is_show=false"> <div class="box" @click.stop=""> 賬號: <input type="text"><br><br> 密碼: <input type="password"><br><br> <input type="submit" vlaue="提交"> </div> </div> </div> <script> let vm = new Vue({ el:"#app", data:{ is_show:false, }, methods:{ }, }) </script> </body> </html>
3. 阻止頁面刷新
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <!-- 超鏈接\表單中的提交,希望阻止頁面刷新,可以使用 @事件.prevent="" --> <a href="" @click.prevent="">百度</a> </div> <script> let vm = new Vue({ el:"#app", data:{ }, }) </script> </body> </html>
使用.stop終止事件冒泡和.prevent阻止表單提交的例子
案例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box1{ width: 200px; height: 200px; background: #ccc; } .box2{ width: 100px; height: 100px; background: pink; } </style> <script src="js/vue.min.js"></script> <script> window.onload = function(){ var vm = new Vue({ el:"#app", data:{} }) } </script> </head> <body> <div id="app"> <div class="box1" @click="alert('box1')"> <div class="box2" @click.stop.prevent="alert('box2')"></div> <!-- @click.stop來阻止事件冒泡 --> </div> <form action="#"> <input type="text"> <input type="submit"> <input type="submit" value="提交02" @click.prevent=""> <!-- @click.prevent來阻止表單提交 --> </form> </div> </body> </html>
三: 計算和偵聽屬性
1, 字符串反轉
<script> let str1 = "hello"; let reverse_str = str1.split('').reverse().join(""); console.log(reverse_str); </script>
2. 如果直接把反轉的代碼寫在元素中，則會使得其他同事在開發時時不易發現數據被調整了，所以vue提供了一個計算屬性(computed)，可以讓我們把調整data數據的代碼存在在該屬性中。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.min.js"></script> <script> window.onload = function(){ var vm = new Vue({ el:"#app", data:{ str1: "abcdefgh" }, computed:{ //計算屬性：里面的函數都必須有返回值 strRevs: function(){ var ret = this.str1.split("").reverse().join(""); return ret } } }); } </script> </head> <body> <div id="app"> <p>{{ str1 }}</p> <p>{{ strRevs }}</p> </div> </body> </html>
3. 監聽屬性
偵聽屬性是一個對象，它的鍵是要監聽的對象或者變量，值一般是函數，當偵聽的data數據發生變化時，會自定執行的對應函數，這個函數在被調用時，vue會傳入兩個形參，第一個是變化前的數據值，第二個是變化后的數據值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue/vue.js"></script> </head> <body> <div id="app"> <span @click="num--">-</span> <input type="text" size="1" v-model="num"> <span @click="num++">+</span> </div> <script> //偵聽屬性 //這里的屬性是指data中的數據 let vm = new Vue({ el:"#app", data:{ num:0 }, //watch 中的方法,會在數據變化時自動執行 watch:{ /**需觀察變量名:function(變化后的值,變化前的值)*/ num: function (v1,v2) { if(v1<0){ //監聽nun變化的值是否小於0,如果小於0則賦值為0 this.num=0; } } } }) </script> </body> </html>
4. vue的計算屬性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> </head> <body> <!--<script>--> <!--let str1 = "hello";--> <!--let reverse_str = str1.split('').reverse().join("");--> <!--console.log(reverse_str);--> <!--</script>--> <div id="app"> <span>{{str1}}</span><br> <span>{{computed_str1}}</span> </div> <script> var vm = new Vue({ el:"#app", data: { str1:'hello world', }, // 計算屬性 computed: { computed_str1: function(value){ return "計算后的內容："+this.str1.split("").reverse().join(""); } } }) </script> </body> </html>
四: vue對象的生命周期
每個Vue對象在創建時都要經過一系列的初始化過程。在這個過程中Vue.js會自動運行一些叫做生命周期的的鈎子函數，我們可以使用這些函數，在對象創建的不同階段加上我們需要的代碼，實現特定的功能。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue/vue.js"></script> </head> <body> <div id="app"> <p>{{num}}</p> </div> <script> let vm =new Vue({ el:"#app", data:{num:10}, //vm對象初始化之前,此時el和data還沒有出現 beforeCreate: function() { console.log("beforeCreate在vm對象初始化之前，此時el和data還沒有出現"); console.log(this.$el); // this..$el 查看上面vue對象操作的標簽控制器 console.log(this.$data); // this.$data 查看上面vue對象保存的data，訪問bum這些數據時沒有的 }, // vm對象初始化之后， created: function(){ console.log('created在vm對象初始化之后執行了，此時$el沒有，但是已經有data數據了'); console.log(this.$el); console.log(this.$data); console.log( this.num ); // 開發項目時，在這個函數中，編寫向后台請求數據的代碼，這些代碼不涉及到視圖html標簽的操作 // ajax }, // 把data數據掛載到html視圖之前 beforeMount: function(){ console.log('beforeMount執行了，此時vue並沒有把data數據掛載到html視圖中，所以$el還是源碼中的vue指令'); console.log(this.$el.innerHTML); console.log(this.$data); // $data早已經有了 }, // 把data數據掛載到html視圖之后 mounted: function(){ console.log('mounted執行了，此時vue已經把data數據掛載到html視圖中了，所以$el就是掛載后的數據'); console.log(this.$el.innerHTML); // 這個位置用於編寫初始化中操作html內容的代碼 } }) </script> </body> </html>
分析展示
在vue使用的過程中，如果要初始化操作，把初始化操作的代碼放在 mounted 中執行。
mounted階段就是在vm對象已經把data數據實現到頁面以后。一般頁面初始化使用。例如，用戶訪問頁面加載成功以后，就要執行的ajax請求。
另一個就是created，這個階段就是在 vue對象創建以后，把ajax請求后端數據的代碼放進 created
五: 通過axios實現數據請求
1.概念:
所以使用vue的時候，一般都會使用axios的插件來實現ajax與后端服務器的數據交互。
注意，axios本質上就是javascript的ajax封裝，所以會被同源策略限制。
下載地址:
https://unpkg.com/axios@0.18.0/dist/axios.js
https://unpkg.com/axios@0.18.0/dist/axios.min.js
2. 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'
3. json
son的作用：在不同的系統平台，或不同編程語言之間傳遞數據。
4: json 數據的語法
json數據對象類似於JavaScript中的對象，但是它的鍵對應的值里面是沒有函數方法的，值可以是普通變量，不支持undefined，值還可以是數組或者json對象。
```json
// json數據的對象格式：
{
"name":"tom",
"age":18
}
// json數據的數組格式：
["tom",18,"programmer"]
```
復雜的json格式數據可以包含對象和數組的寫法。
```json
{
"name":"小明",
"age":200,
"fav":["code","eat","swim","read"],
"son":{
"name":"小小明",
"age":100,
}
}
// 數組結構也可以作為json傳輸數據。
```
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
}
}
```
5: json數據的轉換方法
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> 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 ); </script> </head> <body> </body> </html>
六: ajax
1.概念
1 ajax，一般中文稱之為："阿賈克斯"，是英文 “Async Javascript And Xml”的簡寫，譯作：異步js和xml數據傳輸數據。
2 ajax的作用： ajax可以讓js代替瀏覽器向后端程序發送http請求，與后端通信，在用戶不知道的情況下操作數據和信息，從而實現頁面局部刷新數據/無刷新更新數據。
所以開發中ajax是很常用的技術，主要用於操作后端提供的`數據接口`，從而實現網站的`前后端分離`。
3 ajax技術的原理是實例化js的XMLHttpRequest對象，使用此對象提供的內置方法就可以與后端進行數據通信。
2: 數據接口
數據接口，也叫api接口，表示`后端提供`操作數據/功能的url地址給客戶端使用。
客戶端通過發起請求向服務端提供的url地址申請操作數據【操作一般：增刪查改】
同時在工作中，大部分數據接口都不是手寫，而是通過函數庫/框架來生成。
3: 前后端分離
在開發Web應用中，有兩種應用模式：
1 前后端不分離
ajax的使用必須與服務端程序配合使用，但是目前我們先學習ajax的使用，所以暫時先不涉及到服務端python代碼的編寫。因此，我們可以使用別人寫好的數據接口進行調用。jQuery將ajax封裝成了一個函數$.ajax()，我們可以直接用這個函數來執行ajax請求。
編寫代碼獲取接口提供的數據：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue/vue.js "></script> <script src="vue/axios.js"></script> </head> <body> <div id="app"> 請輸入您要查詢的城市: <input type="text" v-model="city"> <button @click="getWeather">點擊獲取天氣</button> <p>{{ganmao}}</p> </div> <script> let vm=new Vue({ el:"#app", data:{ city:"深圳", ganmao:"", weather_info:"" }, methods:{ getWeather:function () { //在這里編寫ajax //axios是一個對象 //axios.get(url地址).then(function(){}) 發送get請求獲取數據 //axios.post() 發送post請求上傳數據 //進入ajax之前,保存vue對象到一個變量里面,方便在ajax內部使用this _this=this; axios.get("http://wthrcdn.etouch.cn/weather_mini?city=" +this.city) .then(function (response) { //會在ajax請求成功以后,自動只想 //response 里面會包含后端返回的數據 console.log("response",response); console.log("ajax內部的匿名函數:",this) //this.ganmao=response.data.data.ganmao _this.ganmao=response.data.data.ganmao }).catch(function (error) { //會在ajax請求失敗后,自動執行 //error里面會包含錯誤信息 console.log(error); }) } } }) </script> </body> </html>
顯示效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-1.12.4.js"></script> <script> $(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); }); }); }) </script> </head> <body> <button id="btn">點擊獲取數據</button> </body> </html>
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的使用往往配合事件操作進行調用。
5:
// 發送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");
七: 同源策略
1 同源策略，是瀏覽器為了保護用戶信息安全的一種安全機制。所謂的同源就是指代通信的兩個地址（例如服務端接口地址與瀏覽器客戶端頁面地址）之間比較，是否協議、域名(IP)和端口相同。不同源的客戶端腳本[javascript]在沒有明確授權的情況下，沒有權限讀寫對方信息。
2 ajax本質上還是javascript，是運行在瀏覽器中的腳本語言，所以會被受到瀏覽器的同源策略所限制。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-1.12.4.js"></script> <script> $(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); }); }); }) </script> </head> <body> <button id="btn">點擊獲取數據</button> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> <script src="js/axios.js"></script><!-- 寫在vue后面 --> </head> <body> <div id="app"> 請輸入您要查詢的歌名: <input type="text" v-model="city"> <button @click="getWeather">點擊獲取歌曲信息</button> <p>{{ganmao}}</p> </div> <script> // 同源策略: // 在瀏覽器頁面運行過程中, // 服務器和瀏覽器運行程序的地址要保持在同一個源下. // 源:必須同樣的域名, 同樣的端口, 同樣的協議 // ajax運行的前端地址: http://www.baidu.com/get_user // 服務器: https://blog.baidu.com/get_user 不同源,[端口一樣,域名不同,協議不同,] // 服務器: http://blog.sina.com/get_user 不同源,[端口一樣,域名不同,協議相同,] // 服務器: http://www.baidu.com/v1/get_user 同源,[端口一樣,域名一樣,協議相同,] let vm = new Vue({ el:"#app", data: { city:"", ganmao:"", weather_info:"" }, methods: { getWeather: function(){ _this = this; axios.get("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.search.catalogSug&query="+this.city) .then(function(response){ // 會在ajax請求成功過以后，自動執行 console.log(response); console.log("ajax內部的匿名函數:",this); _this.ganmao = response.data.data.ganmao }).catch(function(error){ // 會在ajax請求失敗過后,自動執行 console.log(error); }) } } }) </script> </body> </html>
效果:
1 CORS是一個W3C標准，全稱是"跨域資源共享"，它允許瀏覽器向跨源的后端服務器發出ajax請求，從而克服了AJAX只能同源使用的限制。
2 實現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: 允許訪問的域名地址
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue/vue.js"></script> </head> <body> <div id="app"> <select v-model="province"> <option value="0">省份</option> <option v-for="item in area_list" v-if ="item.pid==0" :value="item.id">{{item.name}}</option> </select> <select v-model="city"> <option value="0">城市</option> <option v-for="item in area_list" v-if="item.pid==province" :value="item.id">{{item.name}}</option> </select> <select v-model="area"> <option value="0">地區</option> <option v-for="item in area_list" v-if="item.pid==city" :value="item.id">{{item.name}}</option> </select> </div> <script> let vm =new Vue({ el:"#app", data:{ province:0, city:0, area:0, area_list:[] }, mounted:function () { //使用axios向后端請求行政區划的信息 this.area_list=[ //事件從后端通過axios獲取到的 //id,名稱,父ID {"id":1,"name":"北京市","pid":0 }, //"id","name","pid" {"id":2,"name":"廣東省","pid":0 }, {"id":3,"name":"廣西省","pid":0 }, {"id":4,"name":"湖南省","pid":0 }, {"id":5,"name":"廣州市","pid":2 }, {"id":6,"name":"深圳市","pid":2 }, {"id":7,"name":"惠州市","pid":2 }, {"id":8,"name":"桂林市","pid":3 }, {"id":9,"name":"長沙市","pid":4 }, {"id":10,"name":"株洲市","pid":4 }, {"id":11,"name":"保安區","pid":6 }, {"id":12,"name":"福田區","pid":6 }, {"id":13,"name":"增城區","pid":5 }, {"id":14,"name":"惠城區","pid":7 }, {"id":15,"name":"大亞灣","pid":7 }, {"id":16,"name":"惠東縣","pid":7 }, {"id":17,"name":"海淀區","pid":1 }, {"id":18,"name":"潮陽區","pid":1 }, ]; }, watch:{ province: function () { //監聽省省份 this.city = 0; this.area=0; }, city:function () { //監聽城市 this.area=0; } } }) </script> </body> </html>