1.使用CSS中的z-index属性，将下拉组件的z-index值设置为较低值，而界面元素的z-index值设置为较高值。这样就能确保界面元素覆盖在下拉组件上。
2.使用JavaScript代码控制下拉组件的显示和隐藏，在下拉框显示时，将界面元素的可见性设置为不可见，在下拉框隐藏时，将界面元素的可见性设置为可见。
组件负责控制屏幕上的一小块地方，我们称之为视图。我们在类中定义组件的应用逻辑（它被用来为视图提供支持）。组件通过一些由属性和方法组成的API与视图交互。
例如：
HeroListComponent有一个 heroes属性，它返回一个“英雄”数组，这个数组是由一个服务的。 HeroListComponent
还有一个 selectHero()方法，当用户从列表中点选一个英雄时，就把它 / 她设置到 selectedHero属性。
export class HeroListComponent implements OnInit {
heroes: Hero[]
selectedHero: Hero
constructor(private service: HeroService) { }
ngOnInit() {
this.heroes = this.service.getHeroes()
}
selectHero(hero: Hero) { this.selectedHero = hero}
}
当用户在这个应用中“移动”时，Angular会创建、更新和销毁组件，本应用的可以通过生命周期钩子在组件生命周期的各个时间点上插上自己的操作，比如上面的声的ngOnInit()
参考如下：最新的vue
$ npm install vue
js 引用 vue.js
开始代码，感受vue强大的双向数据绑定
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
实战代码：
<div id="app">
<input v-model="newTodo" v-on:keyup.enter="addTodo">
<ul>
<li v-for="todo in todos">
<span>{{ todo.text }}</span>
<button v-on:click="removeTodo($index)">X</button>
</li>
</ul>
</div>
new Vue({
el: '#app',
data: {
newTodo: '',
todos: [
{ text: 'Add some todos' }
]
},
methods: {
addTodo: function () {
var text = this.newTodo.trim()
if (text) {
this.todos.push({ text: text })
this.newTodo = ''
}
},
removeTodo: function (index) {
this.todos.splice(index, 1)
}
}
})
