|
|
@@ -0,0 +1,61 @@
|
|
|
+<!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>
|
e