vue 小项目（箭头函数的用法）

&lt;!DOCTYPE html&gt;&lt;html lang="zh"&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;meta

hqweay

4517人浏览 · 2018-07-24 16:46:01

hqweay · 2018-07-24 16:46:01 发布

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div class="nav">
        <ul>
            <li>
                <span>知乎</span>
            </li>
            <li>
                <a href="">首页</a>
            </li>
            <li>
                <a href="">发现</a>
            </li>
            <li>
                <a href="">话题</a>
            </li>
            <li>
                <div>
                    <input type="text" value="" placeholder="搜索你感兴趣的内容" />
                    <span>搜索</span>
                </div>
            </li>
            <li class="info">
                <div>消息</div>
            </li>

        </ul>

    </div>
    <!-- <div onclick="test()" class="content">

    </div> -->

    <div id="app">
        <button v-on:click="haha"> 查看新闻</button>
        <button v-on:click="next"> 下一页</button>

        <div class="news">
            <li v-for="message of messages">
                {{ message.content }}
            </li>


        </div>

    </div>

    <footer>
        designed by etob
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <style type="text/css">
        body {
            width: 75%;
            margin: 0 auto;
            text-align: center;
        }

        .nav {
            height: 45px;
            border-bottom: 1px solid red;
            margin-bottom: 15px;
        }

        ul {
            display: flex;
            list-style: none;

        }

        a {
            text-decoration: none;
        }

        li {
            margin-left: 2%;

        }

        .info {
            justify-content: end;
            margin-left: 20%;
        }

        input {
            padding: 0;
            border: 55%;
        }

        .content {
            margin: 0 auto;
            width: 500px;
            height: 500px;
            background: aquamarine;
        }

        footer {
            text-align: center;
        }

        #app .news {
            text-align: start;
        }

        #app li {
            list-style: none;
        }
    </style>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                messages: [
                    {}
                ],
                page: 1
            },
            methods: {
                haha: function test() {

                    // alert("SS");
                    // 可选地，上面的请求可以这样做
                    axios.get('https://www.apiopen.top/satinCommentApi?id=27610708', {
                        params: {
                            page: this.page
                        }
                    }).then((data) => {
                        console.log(data.data.data.normal.list);
                        //Vue.set(app, 'messages', data.data.data.normal.list)
                        this.messages = data.data.data.normal.list;
                        //Vue.set(app.messages, data.data.data.normal.list)
                    }).catch(function (error) {
                        console.log(error);
                    });
                },
                //这里用 箭头函数的话 取不到 this.page
                next: function () {
                    this.page = (parseInt(app.page) + 1);
                    alert(this.page);
                    axios.get('https://www.apiopen.top/satinCommentApi?id=27610708', {
                        params: {
                            page: this.page
                        }
                    }).then((data) => {
                        Vue.set(app, 'messages', data.data.data.normal.list)
                    }).catch(function (error) {
                        console.log(error);
                    });
                }
            }
        })


    </script>
</body>

</html>

注意箭头函数的作用域

箭头函数不会自动绑定局部变量，如this，arguments，super(ES6)，new.target(ES6)等

所以箭头函数没有它自己的this值，箭头函数内的this值继承自外围作用域。在箭头函数中调用 this 时，仅仅是简单的沿着作用域链向上寻找，找到最近的一个 this 拿来使用

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^