1234567891011121314151617181920212223242526272829303132333435363738394041424344 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <title>Document</title>
- </head>
- <body>
- <div id="app">
- <!-- <list1/> -->
- <list2 />
- </div>
- <script src="./vue.js"></script>
- <script>
- const list1 = Vue.extend({
- template: `
- <div>你好, {{name}}</div>
- `,
- data(){
- return {
- name: 'John',
- }
- }
- });
- const list2 = Vue.extend({
- template: `
- <div>
- <list1/>
- 我有一个帽衫
- </div>
- `,
- components: {
- list1,
- },
- });
- var app = new Vue({
- components: {
- list2,
- },
- }).$mount("#app");
- </script>
- </body>
- </html>
|