方式一
<!DOCTYPE html>
<html lang&＃61;"en"><head><meta charset&＃61;"UTF-8"><meta http-equiv&＃61;"X-UA-Compatible" content&＃61;"IE&＃61;edge"><meta name&＃61;"viewport" content&＃61;"width&＃61;device-width, initial-scale&＃61;1.0"><title>Document</title><!-- 1、导包 --><script src&＃61;"vue.js"></script>
</head><body><div id&＃61;"app"><!-- 如果要使用组件&＃xff0c;直接&＃xff0c;把组件的名称&＃xff0c;以HTML标签的形式&＃xff0c;引入到页面中&＃xff0c;即可 --><mycoml></mycoml></div><script>Vue.component(&＃39;mycoml&＃39;, Vue.extend({template: &＃39;这是使用了vue.extend 创建的组件
&＃39; }));var vm &＃61; new Vue({el: &＃39;#app&＃39;,data: {},methods: {}})</script>
</body></html>
方式二
<!DOCTYPE html>
<html lang&＃61;"en"><head><meta charset&＃61;"UTF-8"><meta http-equiv&＃61;"X-UA-Compatible" content&＃61;"IE&＃61;edge"><meta name&＃61;"viewport" content&＃61;"width&＃61;device-width, initial-scale&＃61;1.0"><title>Document</title><!-- 1、导包 --><script src&＃61;"vue.js"></script>
</head><body><div id&＃61;"app"><!-- 如果要使用组件&＃xff0c;直接&＃xff0c;把组件的名称&＃xff0c;以HTML标签的形式&＃xff0c;引入到页面中&＃xff0c;即可 --><mycoml></mycoml></div><script>Vue.component(&＃39;mycoml&＃39;, {template: &＃39;这是使用了vue.component 创建的组件
&＃39; });var vm &＃61; new Vue({el: &＃39;#app&＃39;,data: {},methods: {}})</script>
</body></html>
方式三
<!DOCTYPE html>
<html lang&＃61;"en"><head><meta charset&＃61;"UTF-8"><meta http-equiv&＃61;"X-UA-Compatible" content&＃61;"IE&＃61;edge"><meta name&＃61;"viewport" content&＃61;"width&＃61;device-width, initial-scale&＃61;1.0"><title>Document</title><!-- 1、导包 --><script src&＃61;"vue.js"></script>
</head><body><div id&＃61;"app"><!-- 如果要使用组件&＃xff0c;直接&＃xff0c;把组件的名称&＃xff0c;以HTML标签的形式&＃xff0c;引入到页面中&＃xff0c;即可 --><mycoml></mycoml></div><!-- 在被控制的 #app 外面&＃xff0c;使用template 元素&＃xff0c;定义组件的HTML模板结构 --><template id&＃61;"templ"><div><h1>这是通过template元素&＃xff0c;在外部定义的组件结构&＃xff0c;这个方式&＃xff0c;有代码的只能提示和高亮</h1><span>123</span></div></template><div id&＃61;"app2"><login></login></div><template id&＃61;"templ2"><h1>这是私有组件</h1></template><script>Vue.component(&＃39;mycoml&＃39;, {template: &＃39;#templ&＃39;});var vm &＃61; new Vue({el: &＃39;#app&＃39;,data: {},methods: {}})var vm &＃61; new Vue({el: &＃39;#app2&＃39;,data: {},methods: {},components: { login: {template: &＃39;#templ2&＃39;}}})</script>
</body></html>
京公网安备 11010802041100号