Vue的基本语法

牢记：

1. v-model 绑定的是值
2. v-on 绑定的是事件
3. v-bind 绑定的是属性

<div id="d1">
			<!--v-if v-else-if v-else 代表判断  其条件必须要在Vue对象中定义-->
			<p v-if="msg === '1'">
				msg = 1
			</p>
			<p v-else-if="msg === '2'">
				msg = 2
			</p>
			<p v-else>
				msg = null
			</p>
			<li v-for="item,index in book">
				{{item}}
			</li>
			<!-- @的全称是  v-on: 表示的是事件的绑定   -->
			<button @click="fun1">click me !</button>
			<!-- v-model 代表数据的双向绑定  v-model绑定的是值 他绑定的对象必须是在vue对象中定义的 -->
			<input type="text" v-model="text"/> {{text}}
			男：<input type="radio" name="gender" value="男" v-model="gender" />
			女：<input type="radio" name="gender" value="女" v-model="gender" /><br />
			{{gender}}
		</div>
		<script>
			var v = new Vue({
				el : '#d1',
				data : {
					msg : '1',
					book : ['Java','Python','Ruby',{'Name' : '数据库从删库到跑路'}],
					text : '',
					gender : ''
				},
				methods : {
					fun1 : function(){
						alert("This is function!");
					}
				}
			})
		</script>