1. 程式人生 > >1.1 Vue 掛載點,模板與例項

1.1 Vue 掛載點,模板與例項

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <!--1 掛載點、模板,例項之間的關係-->
 <!--根據慕課網DellLee老師講解的vue2.5入門課程筆記,視訊地址: https://www.imooc.com/learn/980-->
    <!--2 這裡的id='app'就是掛載點-->
    <div id="app">
        <!--3 在掛載點之內的這些內容都稱之為模板-->
        <h1>hello {{msg}}</h1>
    </div>
    <script>
        //var app 就是例項
        var app = new Vue({
            el: '#app',//2 指向掛載點
           template:'<h2>hello2 {{msg}}</h2>',//3 也可以將模板的內容放到 template內,頁面上就不需要模板了
            data: {
                msg: '5555'
            }
        });
      
    </script>
</body>
</html>