双向数据绑定：表单控件里 (input\texteare\select...)              

1.单选框的双向数据绑定

 v-model一定要在data里 
  v-model绑定的变量无论是对象还是数组都是绑定的value值 

<div id="app">
			<!-- 双向数据绑定：表单控件里 (input\texteare\select...)-->
			<label>
				<!-- 单选框 -->
				<!-- v-model一定要在data里 -->
				<!-- v-model绑定的变量无论是对象还是数组都是绑定的value值 -->
				<input type="radio" name="one" value="yy" v-model="radiotext" />yy语音
				<input type="radio" name="one" value="qq" v-model="radiotext" />腾讯
				{{radiotext}}
			</label>
</div>
<script type="text/javascript">
			new Vue({
				el: "#app",
				// 变量
				data: {
					// radiotext: "yy",默认选定哪个按钮
					radiotext: {},
					radiotext2: []
				}
			})
</script>

 2.复选框的双向数据绑定

多选框绑定的data是对象时，v-model绑定的属性时checked
多选框绑定的data是数组时，v-model绑定的属性时value值

<div id="app">
			<label>
				<!-- 多选框 -->
				<!-- 多选框绑定的data是对象时，v-model绑定的属性时checked -->
				<input type="checkbox" value="fruit" v-model="check">橘子
				<!-- 多选框绑定的data是数组时，v-model绑定的属性时value值 -->
				<input type="checkbox" value="apply" v-model="">苹果
				{{check}}
                <!--{{check2}}-->
			</label>
</div>
<script type="text/javascript">
			new Vue({
				el: "#app",
				// 变量
				data: {
					msg: "Crazy!",
					check: {},
					check2: []
				}
				
			})
</script>

3.自己实现双向数据绑定

<div id="app">
			<input type="text" id="txt">
			<input type="text">
			<p id="msg"></p>
</div>
<script>
			let obj = {};
			Object.defineProperty(obj, 'txt', {
				get() {
					return obj
				},
				set(newdata) {
					document.getElementById("txt").value = newdata;
					document.getElementById("msg").innerHTML = newdata;
				}
			});

			document.addEventListener("keyup", function(e1) {
				obj.txt = e1.target.value;
			})
</script>

4.循环渲染(v-for)的使用

<div id="app">
			<p v-for="el in arrlist">
				{{el.name}}会的运动有:
                <b v-for=" a in el.sports">{{a.yy}}</b>,他{{el.age}}岁
			</p>
</div>
<script type="text/javascript">
			new Vue({
				el: "#app",
				data: {
					arrlist: [{
						name: "小猫瘦瘦~",
						age: 18,
						sports: [{
							yy: "田径",
						}]
					}, {
						name: "轩轩",
						age: 20,
						sports: [{
							yy: "游泳",
						}]
					}]
				}
			})
</script>

v-if的优先级小于v-for(Vue2.0) 
v-if的优先级大于v-for(Vue3.0)

key的意义(面试)

简答:因为vue在刷新页面组件时,会把旧节点跟新vm节点做比较,如果要增加节点,并不会删除旧节点,而是复用 这样会导致节点跟数据没有绑定关系而重新渲染,用key可以将数据与节点绑定起来

<div id="app">
			<div class="orderlist" v-for="el in vegetablelist" :key="el.id">
				<input type="checkbox">{{el.name}}
			</div>
			<button @click="fn">点击查看更多</button>
</div>
<script type="text/javascript">
			new Vue({
				el: "#app",
				data: {
					vegetablelist: [{
						id: "1",

						name: "小白菜"
					}, {
						id: "2",
						name: "土豆丝"
					}, {
						id: "3",
						name: "鱼香肉丝"
					}]
				},
				methods: {
					fn() {
						this.vegetablelist.unshift({
							id: this.vegetablelist.length,
							name: "红烧肉" + this.vegetablelist.length
						});
					}
				}
			})
</script>