lovecoding
/
web0715


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
							<!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">
        <!-- <Hello/>
        <my-com/> -->
        <vase/>
    </div>
    <script src="./vue.js"></script>
    <!-- 
    组件：
        全局组件:Vue.component
            Vue.component('组件名字',{组件模板})
            直接使用组件名字即可
        局部组件:Vue.extend
            const xxx = Vue.extend({组件模板})
            在components:{
                aaa:xxx
                xxx:xxx => xxx 同词省略 自然渲染的就是xxx
            }
            页面渲染的是aaa
        全局组件直接使用
        局部组件需要在components里注册后使用
    -->
    <script>
        // Vue.component('组件名字',{组件模板})
        Vue.component("Hello",{
            template: `<h1>你好</h1>`
        })
      const blue =  Vue.extend({
            template: `<div>这是Vase</div>`
        })
        // Vue.component("my-com",{
        //     template: `
        //         <ul>
        //             <li>1</li>  
        //             <li>2</li>  
        //             <li>3</li>  
        //             <li>4</li>    
        //         </ul>
        //     `
        // })
        var app = new Vue({
            data:{},
            methods:{},
            computed:{},
            watch:{},
            components:{
                // 注册名字：注册组件
                vase:blue
            }
        }).$mount("#app");
    </script>

</body>
</html>