个人博客
1.学到的东西
8. 指令v-for使用
目标：了解v-for指令语法实现对数组、对象的遍历
分析：
实现：可以在vue实例化的时候指定要遍历的数据，然后通过v-for指令在模板中遍历显示数据。一般情况下，要遍历的数据可以通过钩子函数created发送异步请求获取数据。
小结：
可以使用v-for遍历数组、对象：
<div id="app">
<ul>
<li v-for="(user, index) in users" :key="index">
{{index}}--{{user.name}}--{{user.age}}--{{user.gender}}
</li>
</ul>
<hr>
<ul>
<li v-for="(value, key, index) in person">
{{index}}--{{key}}--{{value}}
</li>
</ul>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
users:[
{"name":"黑马","age":13,"gender":"男"},
{"name":"传智播客","age":13,"gender":"女"},
{"name":"酷丁鱼","age":4,"gender":"男"}
],
person:{"name":"传智汇","age":13,"gender":"男","address":"中国"}
}
});
</script>
如果遍历的时候需要使用到索引号，可以在循环遍历的位置，添加一个参数；该索引号是从0开始的。
9. 指令-v-if和v-show使用
目标：说出v-if与v-show的区别；通过一个按钮的点击，实现遍历数组结果的显示存在与否并在遍历过程中使用v-if对数据进行判断处理；实现文本内容的隐藏
分析：
- v-if：通过一个按钮的点击，实现遍历数组结果的显示存在与否并在遍历过程中使用v-if对数据进行判断处理
- v-show：实现文本内容的隐藏
小结：
v-if在条件不满足的时候元素不会存在；v-show条件不满足的时候只是对元素进行隐藏。
10. 指令-v-bind使用
目标：了解v-bind语法和作用；实现点击不同按钮切换不同的属性值；使用class属性中的特殊用法实现一个按钮切换背景色
分析：
其中src和height的值如果不想写死，而是想获取vue实例中的数据属性值的话；那可以通过使用v-bind实现：
<img v-bind:src="vue实例中的数据属性名" :height="vue实例中的数据属性名"/>
小结：
可以使用v-bind：
<div id="app">
<button @click="color='red'">红色</button>
<button @click="color='blue'">蓝色</button>
<div :class="color">
点击按钮改变背景颜色
</div>
<hr>
<br>
<button @click="bool=!bool">点我改变下面色块的颜色</button>
<div :class="{red:bool, blue:!bool}">
点击按钮改变背景颜色
</div>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
color:"red",
bool:true
}
});
</script>
v-bind的作用：可以对所有元素的属性设置vue实例的数据。
2.明日计划
计算属性的使用