一、什么是组件?
组件(Component)是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用is特性进行了扩展的原生HTML元素。
总结:
组件是用来完成特定功能的一个自定义的HTML标签
例如:
<body>
<mytag></mytag>
</body>
注意:mytag就是一个组件,该组件必须通过Vue为mytag赋予一定的功能
二、组件的作用
组件是对特点功能代码(html,css,js)的封装,通过组件的名字可以重复利用该组件中的代码.
组件分类:
全局组件和局部组件
注意：组件的template模板必须有且只有一个根标签（所有内容必须由一个标签套起来）。
三、全局组件
1.全局组件的语法:
Vue.component("自定义标签的名字",{配置对象})
2.全局组件的特点:
2.1全局组件可以在任何被挂着的标签中使用.
2.2全局组件的配置对象中必须包含template属
3.全局组件应用场景
如果该组件的特定功能需要在任何被Vue实例挂载的标签中使用.推荐使用全局组件
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8"/>
<title></title>
</head>
<body>
<divid="app">
<!--引用全局组件：方式一-->
<compon1></compon1>
</div>
<divid="app2">
<!--引用全局组件：方式二-->
<compon2></compon2>
</div>
<divid="app3">
<!--引用全局组件：方式三-->
<compon3></compon3>
</div>
<!--==============================定义组件模板====================================-->
<!--方式二：定义模板（注意：如果使用script标签，建议加上type="text/template"）-->
<scripttype="text/template"id="compon2">
<!--这个div是根标签-->
<div>
<h1>我是网页</h1>
<div>
天天向阳，自强不息
</div>
</div>
</script>
<!--方式三：定义模板（建议使用）-->
<templateid="temp">
<!--这个div是根标签-->
<div>
<h1>我是网页2</h1>
<div>
上天入地
</div>
</div>
</template>
<!--开发版本:vue.js（vue.js代码网址：https://cn.vuejs.org/v2/guide/installation.html）-->
<scripttype="text/javascript"src="js/vue.js"></script>
<script>
/*=======================定义全局组件===================================*/
//定义全局组件（方式一）
Vue.component("compon1",{
template:"<h1>快过来啊</h1>"
})
//定义全局组件（方式二）
Vue.component("compon2",{
template:"#compon2"
})
//定义全局组件（方式三）
Vue.component("compon3",{
template:"#temp"
})
/*=======================定义vue实例===================================*/
//挂载vue实例(方式一)
varapp=newVue({
el:"#app",
})
//挂载vue实例（方式二）
varapp2=newVue({
el:"#app2",
})
//挂载vue实例（方式三）
varapp3=newVue({
el:"#app3",
})
</script>
</body>
</html>
四、局部组件-是定义在某个vue实例上的
1.局部语法:
varapp=newVue({
el:"#app",
data:{},
components:{
"局部组件的名字1":{组件的配置对象}
"局部组件的名字2":{组件的配置对象}
}
});
2.局部组件的特点
局部组件只能够在所挂载的标签中使用.
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8"/>
<title></title>
</head>
<body>
<divid="app">
<!--引用局部组件：方式一-->
<compon1></compon1>
<hr/>
<!--引用局部组件：方式二-->
<compon2></compon2>
<hr/>
<!--引用局部组件：方式三-->
<compon3></compon3>
</div>
<!--==============================定义组件模板====================================-->
<!--方式二：定义模板（注意：如果使用script标签，建议加上type="text/template"）-->
<scripttype="text/template"id="compon2">
<!--这个div是根标签-->
<div>
<h1>我是网页</h1>
<div>
天天向阳，自强不息
</div>
</div>
</script>
<!--方式三：定义模板（建议使用）-->
<templateid="temp">
<!--这个div是根标签-->
<div>
<h1>我是网页2</h1>
<div>
上天入地
</div>
</div>
</template>
<!--开发版本:vue.js（vue.js代码网址：https://cn.vuejs.org/v2/guide/installation.html）-->
<scripttype="text/javascript"src="js/vue.js"></script>
<script>
/*=======================定义vue实例===================================*/
//挂载vue实例(方式一)
varapp=newVue({
el:"#app",
components:{
//定义局部组件（方式一）
"compon1":{
template:"<h1>快过来啊</h1>"
},
//定义局部组件（方式二）
"compon2":{
template:"#compon2"
},
//定义局部组件（方式三）
"compon3":{
template:"#temp"
},
}
})
</script>
</body>
</html>
五、组件中的数据必须是函数
1.组件中数据的定义
语法:
"组件的名字":{
template:"",
data:function(){
return{
键1:值1,
键2:值2
}
}
}
2.注意事项:
1、data数据只能够以函数的形式返回,因为函数中可以写其他的业务代码。
2、只能够在各自的组件模板中使用各自的组件中的data数据。
3、Vue对象中的数据不能够在组件中使用，组件的数据也不能够在挂载的html标签上使用。
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8"/>
<title></title>
</head>
<body>
<divid="app">
<!--这里引用的message是vue实例里的data数据-->
{{message}}
<!--引用全局组件-->
<compon1></compon1>
</div>
<!--==============================定义组件模板====================================-->
<!--定义模板（建议使用）-->
<templateid="temp">
<!--这个div是根标签-->
<div>
<h1>我是网页2</h1>
<div>
<!--只能够在各自的组件模板中使用各自的组件中的data数据-->
上天入地{{message}}
</div>
</div>
</template>
<!--开发版本:vue.js（vue.js代码网址：https://cn.vuejs.org/v2/guide/installation.html）-->
<scripttype="text/javascript"src="js/vue.js"></script>
<script>
/*=======================定义vue实例===================================*/
//挂载vue实例(方式一)
varapp=newVue({
el:"#app",
data:{
message:"哈哈哈哈啊哈！"
},
components:{
//定义局部组件（方式一）
"compon1":{
template:"#temp",
data:function(){
return{
message:"武二郎先生"
}
}
}
}
})
</script>
</body>
</html>
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h56369.shtml
