Vue组件—通过接收template内容注册
注意:
1. 组件调用时的规范,组件名如果有驼峰改为小写用连字符连接,JAVA规范改JavaScript规范
2.注意组件内部,有且只有一个根元素。其余元素,需要被其包裹起来
HTML代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../lib/vue.js"></script>
</head>
<body>
<div id="app">
<my-com1></my-com1>
<mycom2></mycom2>
<!--3.使用组件时,同HTML标签一样使用即可,注意组件名如果有驼峰改为小写用连字符连接,JAVA规范改JavaScript规范-->
</div>
<script>
var return1 = Vue.extend({
template:'<h3>陈小帅还是真的帅呢</h3>'
//1.template(模板)属性,指定所在组件展示的HTML结构
});
Vue.component('myCom1',return1);
//2.component(组件),第一个参数表示组件名称,第二个参数表示组件的内容,也就是指定的内存地址
Vue.component('mycom2',{
template:'<h3>陈小帅还是真的帅呢2</h3>'
});
//也可直接通过Vue.component完成组件的注册
//模板的组件内容有且只有一个根元素,如果要多个元素平级,需要一个父元素进行承载
var vm = new Vue({
el:"#app"
});
</script>
</body>
</html>
效果: