VUE.JS学习心得之选择下拉框篇

用到什么代码就解释什么代码的意思

HTML模块

<div id="app">
	 <select v-model="selected" @change="getSelected">
	  <option v-for="option in options" v-bind:value="option.id">
	    {{ option.name }}
	  </option>
	</select>
</div>

说明：
v-model是双向数据
@change是选择下拉框执行vue里面的getSelected这个方法

VUE模块

<script type="text/javascript">
new Vue({
	el: '#app',
	data: {
		selected: '',
		options: '',
	},
	methods : {
		getSelected(){
			alert(this.selected);
		}
	},
	mounted : function(){
		this.options = [{"name": "女管家网","id": "A"}, {"name": "59220.com","id": "B"}];
		this.selected = 'B';
	}
})
</script>

说明：
data模块中的selected: '',options: '',必须传递空值。
mounted模块调用动态数据（就是给data模块提供动态数据）。
methods模块是监控操作动态，下拉框当选择下拉菜单就会被触发下拉框的值。

VUE使用说明：
new Vue({})：开始使用vue.js。
el: '#app'：//为实例提供挂载元素。
data: {},：//使用数据。
methods : {},：//监控自己定义的变量（与computed一样）。
mounted : function(){},：//在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
updated : function(){},：//使用vue解决无法使用其他js的问题。