一、组件：
组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用相应的组件即可。
二、组件和模块：
1、模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一；
2、组块化：是从UI界面的角度进行划分的；前端的组块化，方便UI组件的重用。
三、定义全局组件的方式：
三种方式：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8"/>
<metaname="viewport"content="width=device-width,initial-scale=1.0"/>
<metahttp-equiv="X-UA-Compatible"content="ie=edge"/>
<title>组件</title>
<scriptsrc="./lib/vue.js"></script>
</head>
<body>
<divid="app">
<!--如果要使用组件，直接把组件的名称，以HTML标签的形式，引入到页面中即可-->
<mycom1></mycom1>
</div>
<!--3.在被控制的#app外面，使用template元素，定义组件的HTML模板结构-->
<templateid="tmp1">
<div>
<h1>
这是通过
template元素，在外部定义的组件结构，这个方式，有代码的智能提示和高亮
</h1>
<h4>好用，不错</h4>
</div>
</templateid="tmp2">
<h2>
这是私有的login组件
</h2>
<template>
</template>
<script>
Vue.component("mycom1",{
template:"#tmp1"
});
//1.1使用Vue.extend来创建全局的Vue组件
//varcom1=Vue.extend({
//通过template属性，指定了组件要展示的HTML结构
//template:"<h3>这是使用Vue.extend创建的组件<h3>"
//});
//1.2使用Vue.component('组件的名称'，创建出来的组件模板对象)
//如果使用Vue.component定义全局组件的时候，组件的名称使用了驼峰命名，则在引用组件的时候，
//需要把大写的驼峰改成小写的字母，同时，两个单词之前，使用-连接；
//如果不使用驼峰，则直接拿名称来使用即可；
//Vue.component("mycom1",com1);
//2.Vue.component第一个参数：组件的名称，将来在引用组件的时候，就是一个标签的形式来引入它的
//第二个参数：Vue.extend创建的组件，其中template就是组件将来要展示的HTML内容。
//相当于第一种方式的简写
//Vue.component(
//"mycom1",
//Vue.extend({
////注意：不论是哪种方式创建出来的组件，组件的template属性指向的模板内容，必须有且只能有唯一的一个元素
//template:
//"<div><h3>这是使用Vue.extend创建的组件<h3><span>123</span></div>"
//})
//);
varvm=newVue({
el:"#app",
data:{},
methods:{},
filters:{},
directives:{},
components:{//定义实例的内部私有组件的
login:{
template:"#tmp2"
}
}
});
</script>
</body>
</html>
四、定义私有的组件：如上图代码中的tmp2;
五、组件内可以有data数据，但其是一个有return的function方法。
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8"/>
<metaname="viewport"content="width=device-width,initial-scale=1.0"/>
<metahttp-equiv="X-UA-Compatible"content="ie=edge"/>
<title>组件</title>
<scriptsrc="./lib/vue.js"></script>
</head>
<body>
<divid="app">
<!--如果要使用组件，直接把组件的名称，以HTML标签的形式，引入到页面中即可-->
<mycom1></mycom1>
</div>
<script>
Vue.component("mycom1",{
template:"<h1>这是全局组件-----{{msg}}</h1>",
data:function(){
return{
msg:"这是组件的中data定义的数据"
};
}
});
varvm=newVue({
el:"#app",
data:{},
methods:{},
filters:{},
directives:{}
});
</script>
</body>
</html>
六、多个组件：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8"/>
<metaname="viewport"content="width=device-width,initial-scale=1.0"/>
<metahttp-equiv="X-UA-Compatible"content="ie=edge"/>
<title>组件</title>
<scriptsrc="./lib/vue.js"></script>
</head>
<body>
<divid="app">
<counter></counter>
<hr/>
<counter></counter>
<hr/>
<counter></counter>
<!--如果要使用组件，直接把组件的名称，以HTML标签的形式，引入到页面中即可-->
</div>
<templateid="tmp1">
<div>
<inputtype="button"value="+1"@click="increment"/>
<h3>{{count}}</h3>
</div>
</template>
<script>
vardataObj={count:0};
//这是一个计数器的组件，身上有个按钮，每当点击按钮，让data中的count值+1
Vue.component("counter",{
template:"#tmp1",
data:function(){
return{
count:0
};
},
methods:{
increment(){
this.count++;
}
}
});
varvm=newVue({
el:"#app",
data:{},
methods:{},
filters:{},
directives:{}
});
</script>
</body>
</html>
如果您觉得本文的内容对您的学习有所帮助：
关键字：
jQuery