Vue案例1

qiang_六七号

于 2019-08-07 16:25:42 发布

阅读量150

点赞数

CC 4.0 BY-SA版权

文章标签： Vue案例1

本文链接：https://blog.csdn.net/weixin_45498171/article/details/98757463

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入vue.js文件-->
    <script src="../js/vue-v2.6.10.js"></script>
</head>
<body>
    <div id="app">

        {{message}}
        {{name}}

    </div>

    {{message}}
</body>


<script type="text/javascript">
    //vm 就是vue对象，可以直接引用 vue中的数据和方法
    //在vue中使用this, this与vm都是代表vue对象
    var vm = new Vue({
        el: "#app",  // vue管理的视图标签
        data: {  // 模型数据
            message: "我的Vue数据",
            name: "张三"

        },
        methods :{
            fun1 : function(){
                console.log("fun1 执行了" + this.name);
                //在此访问fun2 方法
                this.fun2();
            },
            fun2:function(){
                console.log("fun2执行了"+this.message);
            }

        }
    });

    vm.fun1();



</script>

</html>

在这里插入图片描述