语法糖写法,直接注册和创建,通常都用这个方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title-hellovuejs</title>
</head>
<body>
<div id ="app">
<!-- 3.使用组件 -->
<my_cpn1></my_cpn1>
<my_cpn2></my_cpn2>
</div>
<script src="../js/vue.js"></script>
<script>
//1.通过语法糖创建全局组件
//注意,使用了tab键上面的反斜杠``,因而可以换行定义
Vue.component('my_cpn1',{
template: `
<div>
<h2>我是标题1</h2>
<p>这是内容,第1个组件,全局组件</p>
</div>
`
});
//root组件
const chen1 = new Vue({
el: '#app', //用于挂载要管理的元素
data:{//定义数据
message:'你好啊,helloword',
isShow: true
},
//2 以下语法糖形式直接创建是局部组件的用法
components:{
my_cpn2: {
template: `
<div>
<h2>我是标题2</h2>
<p>这是内容,第2个,局部组件1</p>
</div>`
}
}
})
</script>
</body>