select demo 学习vue组件化开发
Vue组件化开发
web中的组件是一个具有独立的逻辑和功能的界面，同时又能根据规定的接口规则进行相互融合，变成一个完整的应用。
组件化开发的好处是，组件自由组合形成功能完善的界面，当不需要某个组件，或者想要替某个组件时，可以随时进行替换和删除，不影响整个应用的运行。
Vue中的组件
自定义HTML标签
组件注册
全局注册
可以在任何模板中使用，使用之前要先注册
语法
使用Vue.component(组件名,选项对象)，组件名命名约定camelCase和kebab-case。在html中使用组件：使用kebab-case命名法
局部注册
在组件实例中通过选项对象注册，只在所注册的作用域中使用
{
components:{
组件名：选项对象
}
}不符合W3C标准时的用法
<table>
<tr is="custom-select">tr>
table>不推荐使用，哈哈
组件的通信
同个组件间的通信
在组件上使用自定义属性绑定数据，在组件中需要显式的用props声明自定义属性名。
HTML
<div style="float: left;">
<h2>自定义下拉框h2>
<custom-select btn-value="查询">custom-select>
div>
<div style="float: left;">
<h2>自定义下拉框2h2>
<custom-select btn-value="搜索">custom-select>
div>JS
Vue.component("custom-select",{
props:["btnValue"],
template:`class="wrap">
class="searchIpt clearFix">
class="clearFix">
type="text" class="keyWord" value="" />
type="button" :value="btnValue" />
`
})组件可以有自己的data，但是它必须是函数，且组件不能共用一个data对象，因为这样如果更改一个组件数据会影响其他组件。如果是函数的话，每个组件都有自己的独立数据，相互之间不会影响。
父组件->子组件的通信
一个组件里嵌套另一个组件，那么外面的是父组件，里面的是子组件。而在HTML里的叫根组件。
组件实例的作用域是孤立的，不能在子组件直接用父组件的数据。
这样使用
//根组件中用v-bind绑定数据
"app">
"查询" v-bind:list="list1">
"搜索" v-bind:list="list2">
//父组件中继续这样绑定
...省略代码
"list">
...
//子组件中写法如下
Vue.component("custom-list",{
props:["list"],
template:`
- {{item}}
`
}
})
//vue实例中代理数据
new Vue({
el:"#app",
data:{
list1:['北京','上海','广州','杭州'],
list2:[’17-01-11’,’17-02-11’,’17-03-11’,’17-04-11’],
}
})子组件->父组件的通信
需要用到自定义事件，父组件用$on监听自定义事件，$emit触发父组件所关心的自定义事件。
这里我不举例了，跟着老师做了一个select的demo，可以去我的github查看，里面用到了这里提到的所有方法。
贴一下代码吧
<html lang="en">
<head>
<meta charset="UTF-8">
<title>select组件title>
<link rel="stylesheet" type="text/css" href="select.css">
head>
<script src="vue.js">script>
<body>
<div id="app">
<div style="float: left;">
<h2>自定义下拉框h2>
<custom-select btn-value="查询" v-bind:list="list1">custom-select>
div>
<div style="float: left;">
<h2>自定义下拉框2h2>
<custom-select btn-value="搜索" v-bind:list="list2">custom-select>
div>
div>
<div id="app1">
<custom-select>custom-select>
div>
<script>
Vue.component("custom-select",{
data(){
return {
selectShow:false,
val:""
}
},
props:["btnValue","list"],
template:`class ="wrap">
<div class="searchIpt clearFix">
<div class="clearFix">
<input type="text" class="keyWord" :value="val" @click="selectShow = !selectShow" />
<input type="button" :value="btnValue" />
<span>span>
div>
<custom-list
v-show="selectShow"
:list="list"
v-on:receive="changeValueHandle"
>
custom-list>
div>
section>`,
methods:{
changeValueHandle(value){
this.val = value;
}
}
});
Vue.component("custom-list",{
props:["list"],
template:`<ul class="list">
<li v-for="item in list" @click="selectValueHandle(item)">{{item}}
</li>
ul>`,
methods:{
selectValueHandle:function(item){
this.$emit("receive",item)
}
}
})
new Vue({
el:"#app",
data:{
list1:['北京','上海','广州','杭州'],
list2:['17-01-11','17-02-11','17-03-11','17-04-11'],
}
})
script>
body>
html>CSS
*{
padding: 0;
margin: 0;
}
ul,li {
list-style: none;
}
li {
line-height: 2em;
}
li:hover {
background-color: #f9f9f9;
border-radius:5px;
cursor: pointer;
}
input{
cursor:pointer;
outline:none;
}
#app {
margin-top: 20px;
}
#app h2 {
text-align: center;
}
.wrap {
background-color: rgba(56, 170, 214, 0.45);
border-radius: 20px;
width: 300px;
margin: 40px;
padding: 20px;
}
input[type="button"] {
font-size:14px;
margin-left:2px;
padding:2px 5px;
background-color:rgb(228, 33, 33);
color:white;
border:1px solid rgb(228, 33, 33);
border-radius:5px;
}
.clearFix {
padding-left:
}
input.keyWord {
border: 1px solid #777777;
border-radius: 10px;
height: 30px;
width: 80%;
padding-left: 10px;
font-size: 16px;
}
ul.list {
margin: 20px 0;
}
ul.list li {
padding: 10px 0 0 10px;
}