vue-this一些指令

最新推荐文章于 2021-11-22 22:14:49 发布

陈豪小可爱

最新推荐文章于 2021-11-22 22:14:49 发布

阅读量350

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_29257691/article/details/100997184

版权

vue 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!-- 1. 导入Vue的包 -->
<script src="../lib/vue-2.4.0.js"></script>
<body>
<div id="app">

    <p>{{msg}}</p>
    <p v-cloak>++++++++ {{ msg }} ----------</p>

    <input type="button" value="按钮" :title="msg2 + '123'" v-on:click="show">
</div>
</body>
<script>

    /**{{msg}} 直接这样渲染数据，   渲染的时候 会把 msg展示出来
     *  v-cloak   如果然前面加上  v-cloak，   如果还没有把数据 渲染上 {{msg}}  是 不会显示的，  提高了用户体验度
     *  v-bind    绑定的属性的值，是去找vue data里面的值
     *  v-on/@ 事件绑定
     *  v-text  是直接把数据渲染到位置，但不转译标签
     *  v-html  是直接把数据渲染到位置，转译标签
     */
        // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
            el: "#app",  //绑定 vue 控制这个区域为vue 实例
            data: {
                msg: '欢迎学习vue',  //数据渲染
                msg2: '欢迎学习vue22', //数据渲染
                msg3: '<h1>哈哈，我是一个大大的H1， 我大，我骄傲</h1>',
                num: 1,
            },
            methods: {
                show() {  //方法1
                    /*    var _this=this;
                        //如果 再vue内部  操作 data和methods中的数据 那么  需要 用this  指向当前vue实例对象
                        setInterval(function(){
                            alert(_this.num++);
                        },500)
                        */

                    //想要 再函数里面的this 代表 vue实体对象，有两种方式，   一个是 _this=this 代替，  一个是  () =>
                    setInterval(() => {
                        alert(this.num++);

                    }, 500)

                },
                data: function (data) {//方法2
                    alert(data)
                }

            }


        })


</script>
</html>