# v-bind
<div id="app">
<!-- javascript:; 阻止a链接跳转页面的默认事件 -->
<!-- 通过v-bind来动态的显示class -->
<!-- v-bind可以简写成: -->
<h1><a href="javascript:;" :class="{yellow:flag}" @click="flag=!flag" >全部</a></h1>
</div>
<script src="./vue2.6.14.js"></script>
<script>
new Vue({
el:"#app",
data:{
flag:true
}
})
</script>
# v-cloak
<style>
/* []表示属性 */
/* 带有v-cloak属性的元素先隐藏 */
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<!-- v-clock阻止白屏 显示花括号的情况 -->
<div id="app" v-cloak>
<h1>{{msg}}</h1>
<h1>{{name}}</h1>
<h1>{{age}}</h1>
<h1>{{user}}</h1>
</div>
<script src="./vue2.6.14.js"></script>
<script>
new Vue({
el:"#app",
data:{
msg:"2021年11月",
name:"2021年112021年11",
age:"2021年112021年11",
user:"2021年112021年11"
}
})
</script>
# v-for
<body>
<div id="app">
<button @click="flag=!flag">toggle</button>
<ul>
<!-- item表示数据里面的每一项 -->
<!-- index表示数据里面的每一项的索引 -->
<!-- <li v-for="(item,index) in list" :key="item">{{item}}----{{index}}</li> -->
<!-- 如果对这个li进行删除操作的时候，
比如把第1个删了 ，那么第二个li就会成为第一个
所以index的值不是固定，不利于性能
-->
<!-- 写一个数组 数组里面有对象 对象里面 有name id age 分别展示到页面上 -->
<!-- v-for 和 v-if 是不推荐写在一个元素上的 如果非要这样那请使用template -->
<!-- template是html5提供的标签 代表一个没有意义的 不会在dom上展现的元素
作用是 可以给元素再包上一层 -->
<!-- <template v-if="flag">
<li v-for="(r,i) in objList" :key="r.id" >
姓名：{{r.name}}
年龄：{{r.age}}
</li>
</template> -->
<!-- 在外面是获取不到r的值的 -->
<!-- <template v-if="r.isShow"> -->
<!-- v-for 比 v-if的等级要高 在一起写会造成不必要的性能浪费 -->
<!-- <li v-for="(r,i) in f" :key="r.id" >
姓名：{{r.name}}
年龄：{{r.age}}
</li> -->
<!-- </template> -->
<!-- 在脚手架中使用 会出现警告 -->
<!-- <li v-for="(r,i) in objList" :key="r.id" v-if="r.isShow" >
姓名：{{r.name}}
年龄：{{r.age}}
</li> -->
</ul>
</div>
<script src="./vue2.6.14.js"></script>
<script>
/* vue是数据驱动视图 先有数据 */
let vm = new Vue({
el: "#app",
/* 计算属性 是用来把data中的数据进行处理的 */
computed:{
f:function (){
return this.objList.filter(r=>r.isShow);
}
},
data: {
list: [
'我是软件大道的程序员1',
'我是软件大道的程序员2',
'我是软件大道的程序员3',
'我是软件大道的程序员4',
'我是软件大道的程序员5'
],
flag: false,
objList: [{
name: "张三",
id: "01",
age: 20,
isShow: true
}, {
name: "李四",
id: "02",
age: 28,
isShow: false
}, {
name: "王五",
id: "03",
age: 29,
isShow: true
}]
},
methods: {
}
});
</script>
# v-model
<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>
# v-if v-show v-on
<div id="app">
<!-- v-if是控制dom存在或者不存在的指令
为true 就代表存在 为false就会把dom删除 -->
<!-- <h1 v-if="flag1">我是虎胆小肥羊</h1>
<h1 v-if="flag2">我是小肥羊火锅</h1> -->
<!-- v-show是控制css的display的none或者block -->
<!-- 当值为false的时候，不会把dom删除，只会设置成display:none -->
<!-- <h1 v-show="flag1">现在人都喜欢吃海底捞不喜欢吃小肥羊了</h1> -->
<!-- vue的存在就是为了减少了dom操作从而提高性能 -->
<!-- v-if频繁操作会减少性能 因为dom会频繁删除和添加 -->
<!-- v-show只是改变了css的样式display:none 或者block，
所以更推荐，更利于提高性能 -->
<!-- v-if推荐使用在不频繁显示的场景，比如一进入页面就需要判断加载
例如权限菜单 -->
<!-- v-show 例如：tab页需要频繁切换，所以这种场景就推荐使用v-show -->
<!-- 指令里面可以直接写data里面的属性 -->
<!-- 指令里面也可以直接修改data里面的属性 -->
<!-- <h1 @click="flag=!flag">权限菜单</h1> -->
<h1 @click="fn">权限菜单</h1>
<ul>
<li>基本功能</li>
<!-- <li v-if="user=='admin'">删除用户</li> -->
<li v-if="flag">删除用户</li>
<!-- <li>查看列表</li> -->
<li v-else>查看自己的信息</li>
<!-- v-if配合 v-else使用的时候 中间不可以存在别的元素 -->
</ul>
</div>
