初识vue01

1.第一个vue应用

<body>
<div id="app">
<!-- 设置一个变量-->
    {{message}}
    {{name}}
</div>

<script>
   var app = new Vue({ //调用Vue对象
        el:'#app',                  //el表示要指定的元素element，这里指向id为app的元素    【注意：后面是逗号，不是分号!】
        data:{                      //el和data是Vue对象的两个重要属性
            message:'hello,world' ,  //这里message指向的是在id为app的div中的变量message，两者要对应起来
            name:'vue'
        }
    })

//输出结果是hello，world vue![](https://img2020.cnblogs.com/blog/2096323/202008/2096323-20200808214724300-255829494.png)

</script>
</body>




<body>
<div id="app">
<!--    设置一个变量-->
    {{message}}
    {{name}}
</div>

<script>
   var app = new Vue({ //调用Vue对象
        el:'#app',                  //el表示要指定的元素element，这里指向id为app的元素    【注意：后面是逗号，不是分号!】
        data:{                      //el和data是Vue对象的两个重要属性
            message:'hello.world'   //这里message指向的是在id为app的div中的变量message，两者要对应
        },
       data:{
            name:'vue'
       }
    })
//结果是vue，第二个data覆盖了前面第一个的data属性的内容
</script>
</body>
posted @ 2020-08-08 22:29  L小龙虾  阅读(97)  评论(0)  编辑  收藏  举报