1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Document</title>
    9.     <script src="./lib/vue.js"></script>
    10. </head>
    12. <body>
    13.     <template id="tmpmycom1">
    14.         <div>
    15.             <h1>我是自定义组件----{{msg}}</h1>
    16.         </div>
    17.     </template>
    18.     <div id="app">
    19.         <mycom1></mycom1>
    20.     </div>
    21.     <script>
    22.         //组件可以有自己的data属性
    23.         //组件的data和实例的data有点不一样,实例的data是一个对象,组件的data是一个方法
    24.         // 组件中的data除了必须为一个方法之外,这个方法内部,还必须返回一个对象才行.
    25.         // 组件中的data实例使用一模一样
    26.         Vue.component("mycom1", {
    27.             template: "#tmpmycom1",
    28.             data: function () {
    29.                 return {
    30.                     msg: "我是data中的msg"
    31.                 }
    32.             }
    33.         })
    34.         var vm = new Vue({
    35.             el: '#app',
    36.             data: {},
    37.             methods: {}
    38.         });
    39.     </script>
    40. </body>
    42. </html>

    image.png