1.自定义组件的结构：
data：定义组件的模板渲染的数据。
template：组件的HTML模块(HTML标签\css)
methods：定义组件中的标签事件绑定的js函数
//定义一个header-bar组件
Vue.component("header-bar",{
data:function(){
//组件中的data是通过函数返回的对象
return{
title:"java2022电商平台",
count:0
};
},
template:`<div style="width: 100%; height: 80px; background: lightgray;">
<table width="100%">
<tr>
<td width="200px" align="right" valign="middle">
<img src="img/logo.png" height="80" />
</td>
<td>
<label style="color: deepskyblue;font-size: 35px;font-family: '微软雅黑';margin-left: 30px;;">
{{title}}
</label>
</td>
<td>
点击次数:{{count}}
<button @click="count++">组件中的按钮</button>
</td>
</tr>
</table>
</div>`,
methods:{
test:function(){
count++;
}
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.css" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="container">
<!--使用header-bar组件-->
<header-bar></header-bar>
</div>
<script type="text/javascript" src="js/my-components.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#container",
methods:{
test2:function(){
alert("vue实例中定义的函数");
}
}
});
</script>
</body>
</html>
在css中新建一个文件。
.divStyle{
width: 100%;
height: 80px;
background: lightgray;
}
.tableStyle{
width:100%;
}
.logoImg{
height:80px;
}
.titleStyle{
color: deepskyblue;
font-size: 35px;
font-family:华文行楷;
margin-left: 30px;
}
修改js：
//定义一个header-bar组件
Vue.component("header-bar",{
data:function(){
//组件中的data是通过函数返回的对象
return{
title:"java2022电商平台"
};
},
template:`<div class="divStyle">
<table class="tableStyle">
<tr>
<td width="200px" align="right" valign="middle">
<img src="img/logo.png" class="logoImg" />
</td>
<td>
<label class="titleStyle">
{{title}}
</label>
</td>
<td>
<button @click="test">组件中的按钮</button>
</td>
</tr>
</table>
</div>`,
methods:{
test:function(){
alert("组件中定义的函数");
}
}
});
引入css：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/my-components.css" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="container">
<!--使用header-bar组件-->
<header-bar></header-bar>
</div>
<script type="text/javascript" src="js/my-components.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#container",
methods:{
test2:function(){
alert("vue实例中定义的函数");
}
}
});
</script>
</body>
</html>
2.组件的封装：
将模板中的css样式提取出来，单独定义到css文件，存储在css目录。
将模板中的图片存放在img目录。
将定义组件的js文件和vue文件存放在js目录。
3.组件的复用：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/my-components.css" />
</head>
<body>
<div id="container">
<!--使用header-bar组件-->
<header-bar></header-bar>
</div>
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript" src="js/my-components.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#container",
});
</script>
</body>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由半码博客整理，本文链接：https://www.bmabk.com/index.php/post/128140.html
