1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859 |
- <!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">
- <my-com></my-com>
- <happy></happy>
- </div>
- <script src="./vue.js"></script>
- <script>
- // 全局组件:注册
- /**
- * Vue.component('组件名字',{
- * 组件模板
- * })
- */
- Vue.component("my-com", {
- template: `
- <div>111</div>
- `,
- });
- //局部注册 Vue.extend
- const blueMain = Vue.extend({
- template:`
- <ul>
- <li>今天1</li>
- <li>今天2</li>
- <li>今天3</li>
- <li>今天4</li>
- </ul>
- `
- })
- var app = new Vue({
- data:{
- },
- methods: {
-
- },
- created() {
-
- },
- computed: {
- },
- watch: {
- },
- components: {
- happy: blueMain
- }
- }).$mount("#app");
- </script>
- </body>
- </html>
|