初识vue:(相关操作步骤)
v-for：数据循环
v-for：数据循环
v-if v-show：数据的显示隐藏
v-if是控制dom存在或者不存在的指令 为true 就代表存在 为false 就会把dom删除
v-show是控制css的display的none或者block 当值为false的时候，不会把dom删除，只会设置成display:none
建议：
vue的存在就是为了减少了dom操作从而提高性能 v-if频繁操作会减少性能 因为dom会频繁删除和添加 v-show只是改变了css的样式display:none 或者block， 所以更推荐，更利于提高性能
v-if推荐使用在不频繁显示的场景，比如一进入页面就需要判断加载例如权限菜单
v-show 例如：tab页需要频繁切换，所以这种场景就推荐使用v-show
v-model：双向数据绑定
v-model能轻松实现表单输入和应用状态之间的双向绑定 v-model 指令只能用在 input, select, textarea 等这些表单元素上
<style>
[v-clock]{
display: none;
}
</style>
</head>
<body>
<!-- v-model能轻松实现表单输入和应用状态之间的双向绑定 -->
<!-- v-model 指令只能用在<input>, <select>,<textarea>等这些表单元素上 -->
<div id="app" v-clock>
<!-- value="msg" "msg"是一个字符串 -->
<!-- :或者v-bind 叫动态绑定 -->
<!-- :value="msg" msg是vue实例化对象里面的属性-->
<!-- <input type="text" v-bind:value="msg"> -->
<!-- v-model是原生value属性的语法糖
实际改的还是value 但是v-model做了一些其他的处理，
实现了双向数据绑定 -->
<!-- <input type="text" v-model="msg"> -->
<!-- <h1>{{msg}}</h1> -->
<!-- <select v-model="val">
<option value="">请选择</option>
<option value="001">奔驰</option>
<option value="002">宝马</option>
<option value="003">奥迪</option>
</select>
<h1>{{val}}</h1> -->
<!-- 单选框 -->
<h1>性别：</h1>
<input type="radio" name="a" v-model="sex" value="男">男
<input type="radio" name="a" v-model="sex" value="女">女
<h1>{{sex}}</h1>
<h1>爱好：</h1>
<input type="checkbox" v-model="arr" value="篮球">篮球
<input type="checkbox" v-model="arr" value="排球">排球
<h1>{{arr1}} {{arr2}}</h1>
<h1>{{arr}}</h1>
</div>
<script src="./vue2.6.14.js"></script>
<script>
new Vue({
el:"#app",
data:{
msg:"123",
val:"",
sex:"",
arr1:"",
arr2:"",
arr:[]
}
})
</script>
