一：全局過濾器和局部過濾器
ps：不管是局部過濾器還是全局過濾器，一定都要有renturn 返回
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>VUE的過濾器</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <span>{{num|f2|}}</span> <br> <span>{{text|trans}}</span> <br> <span>{{num|f2|f3}}</span> <!-- 調用多個過濾器 --> <br> <span>{{text_02|f4 }}</span> </div> <script> // 不管是局部過濾器還是全局過濾器，一定都要有renturn 返回 // 01 在全局定義自定義過濾器，這樣全局的對象都可以使用 Vue.filter("f2", function (value) { //全局過濾器，/ 在Vue對象調用過濾器時過濾的內容 //過濾器名字 函數（value值），會將對象的值調用到value中，然后進行過濾，再返回給視圖 console.log("f2的過濾器。。。。", value); return value.toFixed(2) // 保留兩位小數 }); Vue.filter("f3", function (value) { console.log("f3的過濾器。。。", value); return value + "RMB.." }); Vue.filter("f4", function (value) { console.log("f4的過濾器。。。", value); //用過濾器進行簡單的判斷 if (value < 0) { return "數字小於0" } else { return "數字大於0" } }); let vm = new Vue({ el: "#app", data: { num: 10.33333, text: "hello world", text_02: 0.2345, }, methods: {}, // 局部過濾器 filters: { //局部過濾器 trans: function (value) { return value.toUpperCase(); //小寫字母換成大寫 } } }) </script> </body> </html>
二：事件冒泡
01：小案例說明
ps：<!-- 在div1塊里包含div2，div3里面包含div3，div3包含p標簽的時候，我們將鼠標移動到文本上， 會依次彈出div3 div2 div1的彈出框，綁定的事件一次次往外展開，這個就是事件冒泡 --> <body> <div id="div1" onclic="alert('雙擊999')" onmouseover="alert('div1')"> <div class="div2" onmouseover="alert('div2')"> <div class="div3" onmouseover="alert('div3')"> <p>點擊試一試。</p> </div> </div> </div> </body>
02：小案例：模仿模態對話框 -->@click.stop=""
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>阻止事件冒泡</title> <script src="js/vue.js"></script> <style> .d1 { height: 1000px; } .box { width: 300px; height: 160px; border: 1px solid black; margin: auto; bottom: 0; right: 0; left: 0; top: 0; position: fixed; padding-bottom: 10px; padding-left: 30px; padding-right: 10px; padding-top: 10px; } .contain{ background: rgba(0,0,0,0.7); width: 100%; margin: auto; position: fixed; top:0; bottom:0; left:0; right:0; } </style> <!-- 前三個數是rgb顏色，第四個參數是透明度，當將上下左右距離都相同的時候，窗口就會固定在正中間 --> </head> <body> <div id="d1"> <h2 @click="is_show=true">點擊</h2> <div class="contain" v-show="is_show" @click="is_show=false"> <div class="box" @click.stop=""> <!-- 這里 點擊的范圍是會在box中，其他的地方點擊不會發生點擊事件，不會衍生到父類中的div中去 --> <br><br> 用戶名：<input type="text"><br><br> 密碼：<input type="password"><br><br> <input type="submit" value="確認"> </div> </div> </div> <script> let vm=new Vue({ el:"#d1", data:{ is_show:false, } }) </script> </body> </html>
03：頁面不刷新
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>阻止事件冒泡</title> <script src="js/vue.js"></script> </head> <body> <div class="app"> <a href="https://www.baidu.com/">百度啊</a> <br> <!--頁面刷新 --> <!-- 超鏈接\表單中的提交,希望阻止頁面刷新,可以使用 @事件.prevent="" --> <a href="" @click.prevent="">百度不刷新</a> <!-- 怎么跳轉到新的頁面？？？？--> </div> <script> let vm=new Vue({ el:".app", data:{ links:"https://www.baidu.com/", } }) </script> </body> </html>
三:VUE的數據偵聽屬性 watch:{ 要觀察的變量名:function(變化后的值，變化前的值){ 可寫判斷語句 } }
01：VUE對象的偵聽屬性
偵聽屬性，可以幫助我們偵聽data某個數據的變化，從而做相應的自定義操作。偵聽屬性是一個對象，它的鍵是要監聽的對象或者變量，值一般是函數，當偵聽的data數據發生變化時，
會自定執行的對應函數，這個函數在被調用時，vue會傳入兩個形參，第一個是變化前的數據值，第二個是變化后的數據值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>VUE的偵聽屬性</title> <script src="js/vue.js"></script> </head> <body> <div class="d1"> <span @click="num--">-</span> <input type="text" v-model="num"> <span @click="num++">+</span> </div> <script> let vm = new Vue({ el: ".d1", data: { num: 0, }, watch: { /* 要觀察的變量名:function(變化后的值，變化前的值){ } */ num: function (v_new, v_old) { if (v_new < 0) { this.num = 0 } } } }) </script> </body> </html>
02：VUE的對象的計算屬性
如果直接把反轉的代碼寫在元素中，則會使得其他同事在開發時時不易發現數據被調整了，所以vue提供了一個計算屬性(computed)， 可以讓我們把調整data數據的代碼存在在該屬性中
001：字符串反轉：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>VUE對象的字符串反轉</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <span>{{text01}}</span><br><br> <span>{{f1}}</span> </div> <script> let vm=new Vue({ el:"#app", data:{ text01:"are UU ok ??", }, computed: { f1: function (value) { return this.text01.split("").reverse().join("+") }, } }); </script> <script> //瀏覽器調試端可以看到打印反轉后的內容 let str1 = "hello"; let reverse_str = str1.split('').reverse().join(""); console.log(reverse_str); </script> </body> </html>
四：vue對象的生命周期（執行過程）
每個Vue對象在創建時都要經過一系列的初始化過程。在這個過程中Vue.js會自動運行一些叫做生命周期的的鈎子函數，我們可以使用這些函數， 在對象創建的不同階段加上我們需要的代碼，實現特定的功能。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>VUE對象的字符串反轉</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <span>{{text01}}</span><br><br> <span>{{f1}}</span> </div> <script> let vm=new Vue({ el:"#app", data:{ text01:"are UU ok ??", }, computed: { f1: function (value) { return this.text01.split("").reverse().join("+") }, } }); </script> <script> //瀏覽器調試端可以看到打印反轉后的內容 let str1 = "hello"; let reverse_str = str1.split('').reverse().join(""); console.log(reverse_str); </script> </body> </html>
總結：
在vue使用的過程中，如果要初始化操作，把初始化操作的代碼放在 mounted 中執行。
mounted階段就是在vm對象已經把data數據實現到頁面以后。一般頁面初始化使用。例如，用戶訪問頁面加載成功以后，就要執行的ajax請求。
另一個就是created，這個階段就是在 vue對象創建以后，把ajax請求后端數據的代碼放進 created
五：通過axios實現數據請求
數據接口，也叫api接口，表示`后端提供`操作數據/功能的url地址給客戶端使用。
客戶端通過發起請求向服務端提供的url地址申請操作數據【操作一般：增刪查改】
同時在工作中，大部分數據接口都不是手寫，而是通過函數庫/框架來生成
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue對象生命周期</title> <script src="js/vue.js"></script> <script src="js/axios.js"></script> <!-- 這個必須要要卸載vue.js插件的后面 --> <!-- 可以先從官網上下載這個axios.js插件 https://unpkg.com/axios@0.18.0/dist/axios.js https://unpkg.com/axios@0.18.0/dist/axios.min.js --> </head> <body> <div id="d1"> 請輸入需要查詢的城市<input type="text" v-model="city"><br><br> <button @click="getWeather">點擊查詢天氣結果</button> <p>{{ganmao}}</p> </div> <script> let vm = new Vue({ el: "#d1", 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) { console.log(response); //從接口獲得返回的數據 console.log("ajax內部的匿名函數", this); _this.ganmao = response.data.data.ganmao }).catch(function (error) { //捕捉發生的錯誤，error 里面會包含錯誤信息 console.log(error) }) } } }) </script> </body> </html>
六：同源策略
01: 同源策略，是瀏覽器為了保護用戶信息安全的一種安全機制。所謂的同源就是指代通信的兩個地址（例如服務端接口地址與瀏覽器客戶端頁面地址）
之間比較，是否協議、域名(IP)和端口相同。不同源的客戶端腳本[javascript]在沒有明確授權的情況下，沒有權限讀寫對方信息。
ajax本質上還是javascript，是運行在瀏覽器中的腳本語言，所以會被受到瀏覽器的同源策略所限制。
前端地址：`http://www.onetom.cn/index.html` | 是否同源 | 原因 |
| ------------------------------------------- | -------- | ------------------------ |
| `http://www.onetom.cn/user/login.html` | 是 | 協議、域名、端口相同 |
| `http://www.onetom.cn/about.html` | 是 | 協議、域名、端口相同 |
| `https://www.onetom.cn/user/login.html` | 否 | 協議不同 ( https和http ) |
| `http:/www.onetom.cn:5000/user/login.html` | 否 | 端口 不同( 5000和80) |
| `http://bbs.onetom.cn/user/login.html` | 否 | 域名不同 ( bbs和www ) |
同源策略針對ajax的攔截，代碼：
<!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>
02: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: *
03:同源策略的解決方案總結：
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只能同源訪問數據接口的方式： 3. 在服務端的響應行中設置： Access-Control-Allow-Origin: 允許訪問的域名地址