vue入门之创建第一个实例,挂载点、模板和实例之间的关系

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue.js</title>
    <script src="vue.js"></script>
</head>
<body>
    <!-- 挂载点、模板、实例之间的关系

    挂载点 指的是Vue实例里的el属性对应的dom节点 id
    模板 指的是挂载点内部的内容,实例里template属性的内容
    实例:定义挂载点,把定义的数据与模版结合起来生成要展示的内容,再把这个内容放在挂载点中

     -->

    <div id="root"></div>
    
    <script>
            new Vue({
                el:"#root",
                template:"<h1>{{msg}}</h1>",
                data: {
                    msg:"hello world!",
                }
            })
        </script>
</body>
</html>

猜你喜欢

转载自www.cnblogs.com/twodoge/p/10229485.html
今日推荐