vuejs组件
程序员文章站
2022-08-17 14:39:30
一、什么是组件? 组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。 < ......
一、什么是组件?
组件 (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实例挂载的标签中使用. 推荐使用全局组件
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="app">
<!--引用全局组件：方式一-->
<compon1></compon1>
</div>
<div id="app2">
<!--引用全局组件：方式二-->
<compon2></compon2>
</div>
<div id="app3">
<!--引用全局组件：方式三-->
<compon3></compon3>
</div>
<!-- ==============================定义组件模板==================================== -->
<!--方式二：定义模板（注意：如果使用script标签，建议加上type="text/template"）-->
<script type="text/template" id="compon2">
<!--这个div是根标签-->
<div>
<h1>我是网页</h1>
<div>
天天向阳，自强不息
</div>
</div>
</script>
<!--方式三：定义模板（建议使用）-->
<template id="temp">
<!--这个div是根标签-->
<div>
<h1>我是网页2</h1>
<div>
上天入地
</div>
</div>
</template>
<!--开发版本:vue.js（vue.js代码网址：https://cn.vuejs.org/v2/guide/installation.html）-->
<script type="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实例(方式一)
var app= new vue({
el:"#app",
})
//挂载vue实例（方式二）
var app2= new vue({
el:"#app2",
})
//挂载vue实例（方式三）
var app3= new vue({
el:"#app3",
})
</script>
</body>
</html>
四、局部组件-是定义在某个vue实例上的
1. 局部语法:
var app = new vue({
el: "#app",
data: {},
components : {
"局部组件的名字1" : {组件的配置对象}
"局部组件的名字2" : {组件的配置对象}
}
});
2. 局部组件的特点
局部组件只能够在所挂载的标签中使用.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="app">
<!--引用局部组件：方式一-->
<compon1></compon1>
<hr />
<!--引用局部组件：方式二-->
<compon2></compon2>
<hr />
<!--引用局部组件：方式三-->
<compon3></compon3>
</div>
<!-- ==============================定义组件模板==================================== -->
<!--方式二：定义模板（注意：如果使用script标签，建议加上type="text/template"）-->
<script type="text/template" id="compon2">
<!--这个div是根标签-->
<div>
<h1>我是网页</h1>
<div>
天天向阳，自强不息
</div>
</div>
</script>
<!--方式三：定义模板（建议使用）-->
<template id="temp">
<!--这个div是根标签-->
<div>
<h1>我是网页2</h1>
<div>
上天入地
</div>
</div>
</template>
<!--开发版本:vue.js（vue.js代码网址：https://cn.vuejs.org/v2/guide/installation.html）-->
<script type="text/javascript" src="js/vue.js" ></script>
<script>
/* =======================定义vue实例=================================== */
//挂载vue实例(方式一)
var app= new vue({
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标签上使用。
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="app">
<!--这里引用的message是vue实例里的data数据-->
{{message}}
<!--引用全局组件-->
<compon1></compon1>
</div>
<!-- ==============================定义组件模板==================================== -->
<!--定义模板（建议使用）-->
<template id="temp">
<!--这个div是根标签-->
<div>
<h1>我是网页2</h1>
<div>
<!--只能够在各自的组件模板中使用各自的组件中的data数据-->
上天入地{{message}}
</div>
</div>
</template>
<!--开发版本:vue.js（vue.js代码网址：https://cn.vuejs.org/v2/guide/installation.html）-->
<script type="text/javascript" src="js/vue.js" ></script>
<script>
/* =======================定义vue实例=================================== */
//挂载vue实例(方式一)
var app= new vue({
el:"#app",
data:{
message:"哈哈哈哈啊哈！"
},
components:{
//定义局部组件（方式一）
"compon1":{
template:"#temp",
data:function(){
return {
message:"武二郎先生"
}
}
}
}
})
</script>
</body>
</html>