Vue基础 el挂载点、data数据对象

第一步导入vue,第二步在html里面写一点东西,第三步在js里面写一点东西。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="" type="text/css" rel="stylesheet"/>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style type="text/css">
    </style>
</head>

<body>    
<div id="app">
    {
   
   {message}}
</div>
         
    <script type="text/javascript">
        var app = new Vue({
             el:"#app",
             data:{
                message: "hello vue!"
             }
        })
    </script>

</body>
</html>

data是vue实例当中的使用到的数据,你需要使用什么就写什么。

{ {message}} 是模板的语法,作用是使用数据和页面结构关联起来。

vue是如何知道要去操作那个元素的呢?el:"#app"这里有el的属性,在css当中#是id选择器。这样就可以让vue去管理id为app的元素。

猜你喜欢

转载自blog.csdn.net/qq_34556414/article/details/131455531
今日推荐