前端组件化的核心,就是合理地粒化复杂实体。其优点,便是老生常谈的这几点:
- 提高开发效率
- 方便重复使用
- 简化调试步骤
- 提升整个项目的可维护性
- 便于协同开发
vue 中的组件
vue 中组件是一个自定义标签,Vuejs 的编译器为它添加特殊功能。vue 也可以扩展原生的 html 元素,封装可重用的代码
组件的基本组成:
- 样式结构
- 行为逻辑
- 数据
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="./style.css">
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<h2>自定义下拉框</h2>
</div>
<custom-select></custom-select>
<script>
//注册组件
Vue.component("custom-select",{
template:`<section class="warp">
<div class="searchIpt clearFix">
<div class="clearFix">
<input type="text" class="keyWord" value="" />
<input type="button" value="查询">
<span></span>
</div>
<ul class="list">
<li>html+css</li>
<li>html5+css3</li>
<li>javascript</li>
<li>angular</li>
<li>react</li>
<li>vue</li>
<li>jquery</li>
<li>nodejs</li>
</ul>
</div>
</section>`
})
new Vue({
el: "#app",
components: {
}
});
</script>
</body>
</html>