02 Vue之vue對象屬性功能&axios數據請求實現

本文轉載自查看原文 2019-03-11 18:07 746 vue

1.過濾器的聲明和使用

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

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

　　1 使用Vue.filter()進行全局定義

　　2 在vue對象中通過filters屬性來定義

詳見代碼:

<div id="app1">
     <!-- 調用過濾器.過濾器一次使用多個 -->
    <span>{{money|fixed|rmb}}</span>
    <hr>
    <span>{{text|trans}}</span>

</div>
<script>
    //全局過濾器
    Vue.filter('fixed',function (v) {
         // 必須要使用return 把過濾后的內容返回
         // js提供的toFixed(num)   保留num位小數

        return v.toFixed(1)
    })
      Vue.filter('rmb',function (v) {
         // 必須要使用return 把過濾后的內容返回
         // js提供的toFixed(num)   保留num位小數

        return v+'元'
    })
    let vm = new Vue({
        el:'#app1',
        data:{
            money:123.569,
            text:'hello world',
        },
         methods:{

            },
        filters:{
             //非全局過濾器僅限在#app這個標簽內部使用
            trans: function(value){
                // 必須要使用return 把過濾后的內容返回
                return value.toUpperCase();
            }
            },
    })
</script>

View Code

2.阻止事件冒泡及頁面刷新

2.1事件冒泡

　　在js的事件操作中,子元素的事件觸發以后,會默認情況把事件傳播給其父級元素,然后一層層往外傳播,這種現象就是"事件冒泡".

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

View Code

2.2阻止事件冒泡

vue.js提供了一個屬性 .stop 可以幫助我們阻止事件往外傳播.

  <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.2);  /*前三個參數設置顏色,最后一個設置透明度*/
        width: 100%;
        margin:auto;
        position: fixed;
        top:0;   /* 當left&right 或者top&bottom設置為相同像素或者為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="">  <!--此處的 @click.stop 可阻止事件冒泡-->
            賬號: <input type="text"><br><br>
            密碼: <input type="password"><br><br>
            <input type="submit" vlaue="提交" @click="is_show=false">
       </div>
    </div>
</div>

<script>
    let vm = new Vue({
        el:'#app',
        data:{
           is_show:false
        },
         methods:{

            },

    })
</script>
</body>

View Code

2.3 阻止頁面刷新

<body>
    <div id="app">
        <!-- 超鏈接\表單中的提交,希望阻止頁面刷新,可以使用 @事件.prevent="" -->
        <a href="" @click.prevent="">百度</a>
    </div>
    <script>

        let vm = new Vue({
            el:"#app",
            data:{
            },

        })
    </script>

View Code

3 計算和偵聽屬性

3.1計算屬性

vue提供了一個計算屬性(computed)，可以讓我們把調整data數據的代碼存在在該屬性中,這樣就可以直接通過調用computer屬性里面的函數名去拿到調整過后相應data里的數據

示例:將對應data中的字符串反轉並輸出

<!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>{{trans_str1}}</span><br>

    </div>
<script>
    var vm = new Vue({
        el:"#app",
        data: {
            str1:'hello world',
        },
        //  計算屬性,跟過濾器很像.但調用方式不一樣
        computed:{
            trans_str1:function () {
                trans_str = this.str1.split('').reverse().join('')
                console.log(trans_str)
                return trans_str
            }
        },

    })
</script>
</body>
</html>

View Code

3.2 監聽屬性

　　偵聽屬性，可以幫助我們偵聽data某個數據的變化，從而做相應的自定義操作。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <button @click="num--">-</button>
        <input type="text" v-model="num">
        <button @click="num++">+</button>
    </div>
    <script>
        // 偵聽屬性
        // 這里的屬性是指代data中的數據
        let vm = new Vue({
            el:"#app",
            data:{
                num:0
            },
            // watch里面的方法，會在數據發生變化時，自動執行
            //v1,v2為變化前和變化后的值
            watch:{
                    num:function (v1,v2) {
                        console.log(v1,v2)
                        if(v1<0){
                            this.num=0
                        }
                    }
            },


        })
    </script>
</body>
</html>

View Code

4.Vue對象的生命周期(執行過程) 重要

　　每個Vue對象在創建時都要經過一系列的初始化過程。在這個過程中Vue.js會自動運行一些叫做生命周期的的鈎子函數，我們可以使用這些函數，在對象創建的不同階段加上我們需要的代碼，實現特定的功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>{{num}}</p>
        <p>{{content}}</p>
    </div>
    <script>
        // 偵聽屬性
        // 這里的屬性是指代data中的數據
        let vm = new Vue({
            el:"#app",
            data:{
                num:10,
                content:'我是一直沒有靈魂的豬'

            },
             // 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);  //此時打印的標簽為: <p>{{num}}</p> <p>{{content}}</p>
                console.log(this.$data); // $data早已經有了
            },

            // 把data數據掛載到html視圖之后
            mounted: function(){
                console.log('mounted執行了，此時vue已經把data數據掛載到html視圖中了，所以$el就是掛載后的數據');
                console.log(this.$el.innerHTML);   //打印標簽為: <p>10</p> <p>我是一直沒有靈魂的豬</p>
                // 這個位置用於編寫初始化中操作html內容的代碼
            }
        })
    </script>
</body>
</html>

View Code

總結:　　

　　在vue使用的過程中，如果要初始化操作，把初始化操作的代碼放在 mounted 中執行。mounted階段就是在vm對象已經把data數據實現到頁面以后。一般頁面初始化使用。例如，用戶訪問頁面加載成功以后，就要執行的ajax請求。

　　另一個就是created，這個階段就是在 vue對象創建以后，把ajax請求后端數據的代碼放進 created

補充:就是需要將script的JS代碼寫在HTML頭部時,需要用到window.onload 和 function 兩個函數,就是加載完頁面后再調用函數內部的JS代碼

 <script>
        // 頁面加載事件，入口事件
        window.onload = function(){
            var h1 = document.getElementById("myh1")
            console.log(h1);
            console.log(h1.innerHTML);
        }

        $(function(){
            var h1 = document.getElementById("myh1")
            console.log(h1);
            console.log(h1.innerHTML);
        });
</script>

View Code

5. 通過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()

<!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>
        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);
                            console.log("ajax內部的匿名函數:",this);  //注意:this表示window不是vue對象

                            // this.ganmao = response.data.data.ganmao // 這里代碼不對,this表示window
                            _this.ganmao = response.data.data.ganmao
                        }).catch(function(error){ // 會在ajax請求失敗過后,自動執行
                            // error 里面你會包含錯誤信息
                            console.log(error);
                        })
                }
            }
        })
    </script>
</body>
</html>

View Code

6.同源策略及跨源方案

　6.1 同源策略

　　瀏覽器為了保護用戶信息安全的一種安全機制。所謂的同源就是指代通信的兩個地址（例如服務端接口地址與瀏覽器客戶端頁面地址）之間比較，是否協議、域名(IP)和端口相同。不同源的客戶端腳本[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 )

示例代碼:

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

View Code

6.2 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: 允許訪問的域名地址

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Vue (二) --- Vue對象提供的屬性功能 Vue基本使用---對象提供的屬性功能 Vue對象提供的屬性功能 2-Vue- vue對象提供的屬性功能 Vue通過axios實現數據請求二: vue的屬性及功能,axios vue2-通過axios實現數據請求 Vue之axios實現ajax數據請求 Vue之axios請求數據 vue防止接口重復請求實現方法