Vue (二) --- Vue对象提供的属性功能
--------------------------------------------不是井里沒有水，而是你挖的不夠深.
?
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可以幫助我們阻止事件往外傳播.
?
阻止頁面刷新
?
?
?
使用.stop和.prevent的例子
?
3.4 計算和偵聽屬性
3.4.1 計算屬性
字符串反轉
<script>? ?let str1 = "hello";
? ?let reverse_str = str1.split('').reverse().join("");
? ?console.log(reverse_str);
</script>
?
如果直接把反轉的代碼寫在元素中，則會使得其他同事在開發時時不易發現數據被調整了，所以vue提供了一個計算屬性(computed)，可以讓我們把調整data數據的代碼存在在該屬性中。
?
3.4.2 監聽屬性
偵聽屬性，可以幫助我們偵聽data某個數據的變化，從而做相應的自定義操作。
偵聽屬性是一個對象，它的鍵是要監聽的對象或者變量，值一般是函數，當偵聽的data數據發生變化時，會自定執行的對應函數，這個函數在被調用時，vue會傳入兩個形參，第一個是變化前的數據值，第二個是變化后的數據值。
?
?
3.5 vue對象的生命周期
每個Vue對象在創建時都要經過一系列的初始化過程。在這個過程中Vue.js會自動運行一些叫做生命周期的的鉤子函數，我們可以使用這些函數，在對象創建的不同階段加上我們需要的代碼，實現特定的功能。
?
總結：
在vue使用的過程中，如果要初始化操作，把初始化操作的代碼放在 mounted 中執行。mounted階段就是在vm對象已經把data數據實現到頁面以后。一般頁面初始化使用。例如，用戶訪問頁面加載成功以后，就要執行的ajax請求。
?
另一個就是created，這個階段就是在 vue對象創建以后，把ajax請求后端數據的代碼放進 created
?
?
4. 通過axios實現數據請求
vue.js默認沒有提供ajax功能的。
所以使用vue的時候，一般都會使用axios的插件來實現ajax與后端服務器的數據交互。
注意，axios本質上就是javascript的ajax封裝，所以會被同源策略限制。
下載地址：
https://unpkg.com/axios@0.18.0/dist/axios.jshttps://unpkg.com/axios@0.18.0/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文件的后綴是json2. 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對象 |
?
代碼執行結果：
?
?
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請求。
| 天氣接口 | http://wthrcdn.etouch.cn/weather_mini?city=城市名稱 |
| 音樂接口搜索 | http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.search.catalogSug&query=歌曲標題 |
| 音樂信息接口 | http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.song.play&songid=音樂ID |
?
編寫代碼獲取接口提供的數據：
jQ版本
點擊按鈕以后的效果：
?
總結：
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/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的攔截，代碼：
效果：
?
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 默認組件
<div id="app">? ?<addnum></addnum>
? ?<addnum></addnum>
? ?<addnum></addnum>
? ?<addnum></addnum>
? ?<addnum></addnum>
</div>
<script>
? ?Vue.component("addnum",{
? ? ? ?template:'<div><input type="text" v-model="num"><button @click="num+=1">點擊</button></div>',
? ? ? ?data: function(){
? ? ? ? ? ?// 寫在這里的數據只有當前組件可以使用
? ? ? ? ? ?return {
? ? ? ? ? ? ? ?num:1,
? ? ? ? ? }
? ? ? }
? });
?
?
? ?var vm = new Vue({
? ? ? ?el:"#app",
? ? ? ?// 這里寫的數據是全局公用的，整個文件共享
? ? ? ?data:{
?
? ? ? }
? })
</script>
?
?
轉載于:https://www.cnblogs.com/dealdwong2018/p/10540693.html
總結
以上是生活随笔為你收集整理的Vue (二) --- Vue对象提供的属性功能的全部內容，希望文章能夠幫你解決所遇到的問題。
