1.Vue实例 || 挂载点、模板、实例之间的关系

1.创建Vue实例

<!-- 创建Vue实例 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue入门</title>
    <script type="text/javascript" src="./vue.js"></script>
</head>
<body>
    <div id="root">{{msg}}</div>
    <script>
        new Vue({
            el:"#root",//挂载点，此时该VUE已经与id="root"的DOM元素进行挂载
            data:{
                msg:"Hello World !!!",

            },
        })
    </script>
</body>
</html>

 

2.挂载点、模板、实例之间的关系

--挂载点：vue实例 里面的el属性 对应的 id 所在的dom节点
--模板：挂载点内部的内容都称为模板
　　
(例如：上面的<h1>{{msg}}</h1>)
模板还有其他的书写方式
（例如：下面的template:'<h1>{{msg}}</h1>'） 
两种方式选其一即可 
<!--  挂载点、模板、实例  之间的关系 -->

<!-- 挂载点：vue实例 里面的el属性 对应的 id 所在的dom节点 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue入门</title>
    <script type="text/javascript" src="./vue.js"></script>
</head>
<body>
    <div id="root">
        <!-- <h1>{{msg}}</h1> -->
    </div>
    <!-- 模板：挂载点内部的内容都称为模板 (例如：上面的<h1>{{msg}}</h1>)-->
    <!-- 模板还有其他的书写方式（例如：下面的template:'<h1>{{msg}}</h1>'） -->
    <!-- 两种方式选其一即可 -->
    <script>
        new Vue({
            el:"#root",//挂载点，此时该VUE已经与id="root"的DOM元素进行挂载
            template:'<h1>{{msg}}</h1>',
            data:{
                msg:"Hello World !!!",

            },
        })
    </script>
</body>
</html>

 

posted @ 2021-03-01 20:49  进击的小渣渣！！  阅读(94)  评论(0)    收藏  举报