<div id="app">
    <my-search />
</div>

body {
  background: #eee;
  font: 12px Lucida sans, Arial, Helvetica, sans-serif;
	color: #333;
	text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
}

a {
	color: #2A679F;
}
/*========*/
label {
  display: none;
}
.form-wrapper {
	background-color: #f6f6f6;
	background-image: linear-gradient(to top, #f6f6f6, #eae8e8);
	border-color: #dedede #bababa #aaa #bababa;
	border-style: solid;
	border-width: 1px;
	border-radius: 10px;
	box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
	margin: 100px auto;
	overflow: hidden;
	padding: 8px;
	width: 450px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#search {
  display: inline-block;
	border: 1px solid #CCC;
  box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #FFF;
	border-radius: 3px;
  color: #999;
	float: left;
	font: 16px Lucida Sans, Trebuchet MS, Tahoma, sans-serif;
	height: 42px;
	padding: 10px;
	width: 340px;
}

#search:focus {
	border-color: #aaa;
	box-shadow: 0 1px 1px #bbb inset;
	outline: 0;
}

#search:-moz-placeholder,
#search:-ms-input-placeholder,
#search::-webkit-input-placeholder {
	color: #999;
	font-weight: normal;
}

button {
	background-color: #0483a0;
	background-image: linear-gradient(to top, #31b2c3, #0483a0);
	border: 1px solid #00748f;
	border-radius: 3px;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #FFF;
	color: #fafafa;
	cursor: pointer;
	height: 42px;
	float: right;
	font: 15px Arial, Helvetica;
	padding: 0;
	text-transform: uppercase;
	text-shadow: 0 1px 0 rgba(0, 0 ,0, .3);
	width: 100px;
}

button:hover,
button:focus {
	background-color: #31b2c3;
	background-image: linear-gradient(to top, #0483a0, #31b2c3);
}

button:active {
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
	outline: 0;
}

button::-moz-focus-inner {
	border: 0;
}

// 构造子组件
let myButton = Vue.extend({
    template: `<button>Search</button>`
})

// 构造父组件
let mySearch = Vue.extend({
    // 在父组件mySearch中使用<my-button>标签
    template: `
        <div class="form-wrapper">
          <label for="search">Search the site</label>
          <input type="search" name="search" id="search" placeholder="Enter keyword" />
          <my-button />
        </div>
     `,
    components: {
        // 局部注册myButton组件，该组件只能在mySearch组件内使用
        'my-button': myButton
    }
})

// 注册全局组件mySearch
Vue.component('my-search', mySearch)

let app = new Vue({
    el: '#app'
})