方式一
创建一个私有组件
new Vue({
el:"#app",
components: {
App:{
template:"<div><h1>标题</h1><span>内容</span></div>"
}
},
template:'<App></App>'
})
方式二
这里创建的是一个全局组件
<!-- <script>
Vue.component("MySon",{
template:"<div> 这是全局组件 </div>"
})
var vm = new Vue({
el:'#app',
data: {
}
})
</script> -->
方式三
此方代码可以高亮的显示,并且有代码的提示,写起来比较方便
<template id="login">
<div @click = "handleClick" >
<h1>标题</h1>
<span>内容</span>
</div>
</template>
<script>
Vue.component("MyLogin",{
template:"#login",
methods:{
handleClick() {
alert("a")
}
}
})