Vue (二) --- Vue對象提供的屬性功能

時間 2019-12-09

標籤 vue 對象提供屬性功能简体版

原文原文鏈接

--------------------------------------------不是井裏沒有水，而是你挖的不夠深.javascript

3. Vue對象提供的屬性功能

3.1 過濾器

過濾器，就是vue容許開發者自定義的文本格式化函數，可使用在兩個地方：輸出內容和操做數據中。php

定義過濾器的方式有兩種。css

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的事件操做中,子元素的事件觸發之後,會默認狀況把事件傳播給其父級元素,而後一層層往外傳播,這種現象就是"事件冒泡".html

<!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>

    </script>
</body>
</html>

阻止事件冒泡

下面案例中,在事件綁定的時候,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>

阻止頁面刷新

<!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的例子vue

<!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>

3.4 計算和偵聽屬性

3.4.1 計算屬性

字符串反轉java

<script>
    let str1 = "hello";
    let reverse_str = str1.split('').reverse().join("");
    console.log(reverse_str);
</script>

若是直接把反轉的代碼寫在元素中，則會使得其餘同事在開發時時不易發現數據被調整了，因此vue提供了一個計算屬性(computed)，可讓咱們把調整data數據的代碼存在在該屬性中。python

<!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.4.2 監聽屬性

偵聽屬性，能夠幫助咱們偵聽data某個數據的變化，從而作相應的自定義操做。jquery

偵聽屬性是一個對象，它的鍵是要監聽的對象或者變量，值通常是函數，當偵聽的data數據發生變化時，會自定執行的對應函數，這個函數在被調用時，vue會傳入兩個形參，第一個是變化前的數據值，第二個是變化後的數據值。ios

<!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:{
                num:20
           },
            watch:{
                num:function(newval,oldval){
                    //num發生變化的時候，要執行的代碼
                    console.log("num已經發生了變化！");
               }
           }
       })
     }
    </script>
</head>
<body>
    <div id="app">
        <p>{{ num }}</p>
        <button @click="num++">按鈕</button>
    </div>
</body>
</html>

3.5 vue對象的生命週期

每一個Vue對象在建立時都要通過一系列的初始化過程。在這個過程當中Vue.js會自動運行一些叫作生命週期的的鉤子函數，咱們可使用這些函數，在對象建立的不一樣階段加上咱們須要的代碼，實現特定的功能。

<!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:{
                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 ); // <p>{{num}}</p>
                console.log("beforeMount,vm對象還沒有把data數據顯示到頁面中,num="+this.num ); // 20
                this.num = 30;
           },
            mounted:function(){
                console.log( this.$el.innerHTML ); // <p>30</p>
                console.log("mounted,vm對象已經把data數據顯示到頁面中,num="+this.num); // 30
           },
            beforeUpdate:function(){
                // this.$el 就是咱們上面的el屬性了，$el表示當前vue.js所控制的元素#app
                console.log( this.$el.innerHTML );  // <p>30</p>
                console.log("beforeUpdate,vm對象還沒有把更新後的data數據顯示到頁面中,num="+this.num); // beforeUpdate----31
                
           },
            updated:function(){
                console.log( this.$el.innerHTML ); // <p>31</p>
                console.log("updated,vm對象已經把過呢更新後的data數據顯示到頁面中,num=" + this.num ); // updated----31
           },
       });
   }
    </script>
</head>
<body>
    <div id="app">
        <p>{{num}}</p>
        <button @click="num++">按鈕</button>
    </div>
</body>
</html>

總結：

在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.js
https://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文件的後綴是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對象

<!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>

代碼執行結果：

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版本

<!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的使用每每配合事件操做進行調用。

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的攔截，代碼：

<!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>

效果：

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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。