时间戳

首页 > 技术文章 > VUE（vue对象的简单属性）

VUE（vue对象的简单属性）

one-tom 2019-06-30 10:37 原文

一：全局过滤器和局部过滤器

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

二：事件冒泡

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

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

三: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>
View Code

　　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>
View Code
总结：
在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>
View Code

六：同源策略

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: 允许访问的域名地址












	

		


推荐阅读