組件創(chuàng)建的方法一
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<!-- //這里如果使用駝峰命名法則需要在大寫(xiě)前面加個(gè)- -->
<my-com1></my-com1>
<mycom></mycom>
<mycom2></mycom2>
</div>
<script type="text/javascript">
//1.1 使用Vue.extend 來(lái)創(chuàng)建全局Vue組件
var com1 = Vue.extend({
template:'<h3>這是使用Vue.extend創(chuàng)建的組件</h3>' //通過(guò)template屬性，指定組件要展示的html結(jié)構(gòu)
})
//1.2 使用Vue.component('組件名稱'，創(chuàng)建出來(lái)的組件模板對(duì)象)
Vue.component('myCom1',com1)
//Vue.component 簡(jiǎn)寫(xiě)方法
Vue.component('mycom',Vue.extend({
template:'<h3>這是使用Vue.extend創(chuàng)建的組件</h3>'
}))
//繼續(xù)簡(jiǎn)寫(xiě) 方式二
Vue.component('mycom2',{
//注意：無(wú)論是哪種方式創(chuàng)建出來(lái)的組件，組件template屬性指向的模板內(nèi)容，
//必須有且只能有唯一的一個(gè)根元素
template:'<h3>這是使用Vue.extend創(chuàng)建的組件</h3>'
})
var vm = new Vue({
el:'#app',
data:{},
methods:{}
})
</script>
</body>
</html>
