千峰商城-springboot项目搭建-34-vue组件注册
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>
