什么是组件？
组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件就可以了。
组件化和模块化的区别
模块化：是从代码逻辑的角度进行划分的，方便代码分层开发，保证每个模块功能的职能单一。例如：NodeJS
组件化：是从UI界面的角度进行划分的，前端的组件化，方便UI组件的重用
方式一
使用Vue.extend配合Vue.component来进行创建全局组件
<!DOCTYPEhtml>
<htmllang="zh-CN">
<head>
<metacharset="UTF-8"/>
<title>独秀不爱秀</title>
</head>
<body>
<divid="app">
<!--如果要使用组件，直接把组件的名称，以HTML标签的形式，引入到页面中-->
<mycom1></mycom1>
</div>
<scriptsrc="./lib/vue-2.4.0.js"></script>
<scripttype="text/javascript">
//1.1使用Vue.extend来创建全局的Vue组件
constcom1=Vue.extend({
template:'<h3>这是使用Vue.extent创建的组件</h3>'//通过template属性，指定组件要展示的HTML结构
});
//1.2使用Vue.component('组件的名称',创建出来的组件模板对象)
//Vue.component('myCom1',com1);
//如果使用Vue.component定义全局组件的时候，组件名使用了驼峰命名，则
//在引用的时候，需要把大写字符改为小写字符，同时，两个单词连接使用-
Vue.component('mycom1',com1);
constvm=newVue({
el:'#app',
data:{},
methods:{}
});
</script>
</body>
</html>
当然，方式一也可以直接将第一步骤省略，直接：
Vue.component('mycom1',Vue.extend({
template:'<h3>这是使用Vue.extend创建的组件</h3>'
}));
方式二
直接使用Vue.component创建组件（其实就是在方式一的基础上更加省略而已）
<!DOCTYPEhtml>
<htmllang="zh-CN">
<head>
<metacharset="UTF-8"/>
<title>独秀不爱秀</title>
</head>
<body>
<divid="app">
<mycom2></mycom2>
</div>
<scriptsrc="./lib/vue-2.4.0.js"></script>
<scripttype="text/javascript">
/**
*2.直接使用Vue.component创建组件
*@param1{String}组件的名称
*@param2{Object}组件模板对象
*/
Vue.component('mycom2',{
//注意：无论是哪种方式创建出来的组件，组件的模板中必须有且只有一个唯一的根元素
template:'<div><h1>这是直接用Vue.component创建的组件</h1><span>123</span></div>'
});
constvm=newVue({
el:'#app',
data:{},
methods:{}
});
</script>
</body>
</html>
方式三
在方式二的基础上将第二个参数中的HTML代码结构，替换为一个ID：
<!DOCTYPEhtml>
<htmllang="zh-CN">
<head>
<metacharset="UTF-8"/>
<title>独秀不爱秀</title>
</head>
<body>
<divid="app">
<mycom3></mycom3>
</div>
<!--在被控制的#APP外面，使用template元素定义组件的模板结构-->
<templateid="tmpl">
<div>
<h1>这是通过template元素，在外部定义的组件结构，这个方式，有代码的智能提示和高亮</h1>
<h3>不错，好用</h3>
</div>
</template>
<scriptsrc="./lib/vue-2.4.0.js"></script>
<scripttype="text/javascript">
Vue.component('mycom3',{
template:'#tmpl'
});
constvm=newVue({
el:'#app',
data:{},
methods:{}
});
</script>
</body>
</html>
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h56687.shtml
