组件创建的方法一
<!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">
<!-- //这里如果使用驼峰命名法则需要在大写前面加个- -->
<my-com1></my-com1>
<mycom></mycom>
<mycom2></mycom2>
</div>
<script type="text/javascript">
//1.1 使用Vue.extend 来创建全局Vue组件
var com1 = Vue.extend({
template:'<h3>这是使用Vue.extend创建的组件</h3>' //通过template属性，指定组件要展示的html结构
})
//1.2 使用Vue.component('组件名称'，创建出来的组件模板对象)
Vue.component('myCom1',com1)
//Vue.component 简写方法
Vue.component('mycom',Vue.extend({
template:'<h3>这是使用Vue.extend创建的组件</h3>'
}))
//继续简写 方式二
Vue.component('mycom2',{
//注意：无论是哪种方式创建出来的组件，组件template属性指向的模板内容，
//必须有且只能有唯一的一个根元素
template:'<h3>这是使用Vue.extend创建的组件</h3>'
})
var vm = new Vue({
el:'#app',
data:{},
methods:{}
})
</script>
</body>
</html>
网友评论