1.方式一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue组件的注册</title>
<script src="../vue.js"></script>
</head>
<body>
<template id="Mydemo">
<h1>Hello Time</h1>
</template>
<div id="app">
<account></account>
</div>
<script>
//注册全局组件
Vue.component('account',{
template:"#Mydemo",
})
new Vue({
el:"#app",
})
</script>
</body>
</html>2.方式二
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue组件的注册</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<say-hello></say-hello>
</div>
<script>
//注册全局组件
Vue.component('say-hello',{
template:"<h2>Hello everyone</h2>",
});
//根实例
new Vue({
el:"#app",
})
</script>
</body>
</html>3.方式三：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue组件的注册</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<my-list></my-list>
</div>
<script>
var list=Vue.extend({
template:'<h1>this is a list</h1>',
});
Vue.component("my-list",list);
//根实例
new Vue({
el:"#app",
})
</script>
</body>
</html>