十一、属性绑定指令
- 作用：动态设置html的标签属性 比如：src、url、title
- 语法：v-bind:属性名=“表达式”
- v-bind:可以简写成 => :
比如，有一个图片，它的 src 属性值，是一个图片地址。这个地址在数据 data 中存储。
则可以这样设置属性值：
• <img v-bind:src="url" /> • <img :src="url" /> （v-bind可以省略） <div id="app"> <img v-bind:src="imgUrl" v-bind:title="msg" alt=""> <img :src="imgUrl" :title="msg" alt=""> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { imgUrl: './imgs/10-02.png', msg: 'hello 波仔' } }) </script>
十二、小案例-波仔的学习之旅
需求：默认展示数组中的第一张图片，点击上一页下一页来回切换数组中的图片
实现思路：
1.数组存储图片路径 ['url1','url2','url3'，...]
2.可以准备个下标index 去数组中取图片地址。
3.通过v-bind给src绑定当前的图片地址
4.点击上一页下一页只需要修改下标的值即可
5.当展示第一张的时候，上一页按钮应该隐藏。展示最后一张的时候，下一页按钮应该隐藏
<div id="app"> <button>上一页</button> <div> <img src alt=""> </div> <button>下一页</button> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { list: [ './imgs/11-00.gif', './imgs/11-01.gif', './imgs/11-02.gif', './imgs/11-03.gif', './imgs/11-04.png', './imgs/11-05.png', ] } }) </script>
十三、列表渲染指令
Vue 提供了 v-for 列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构。
v-for 指令需要使用 (item, index) in arr 形式的特殊语法，其中：
- item 是数组中的每一项
- index 是每一项的索引，不需要可以省略
- arr 是被遍历的数组
此语法也可以遍历对象和数字
//遍历对象
<div v-for="(value, key, index) in object">{{value}}</div>
value:对象中的值
key:对象中的键
index:遍历索引从0开始
//遍历数字
<p v-for="item in 10">{{item}}</p>
item从1 开始
十四、小案例-小黑的书架
需求：
1.根据左侧数据渲染出右侧列表（v-for）
2.点击删除按钮时，应该把当前行从列表中删除（获取当前行的id，利用filter进行过滤）
准备代码：
<div id="app"> <h3>小黑的书架</h3> <ul> <li> <span>《红楼梦》</span> <span>曹雪芹</span> <button>删除</button> </li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { booksList: [ { id: 1, name: '《红楼梦》', author: '曹雪芹' }, { id: 2, name: '《西游记》', author: '吴承恩' }, { id: 3, name: '《水浒传》', author: '施耐庵' }, { id: 4, name: '《三国演义》', author: '罗贯中' } ] } }) </script>
十五、v-for中的key
语法： key="唯一值"
作用：给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用。
为什么加key：Vue 的默认行为会尝试原地修改元素（就地复用）
实例代码：
<ul> <li v-for="(item, index) in booksList" :key="item.id"> <span>{{ item.name }}</span> <span>{{ item.author }}</span> <button @click="del(item.id)">删除</button> </li> </ul>
注意：
- key 的值只能是字符串 或 数字类型
- key 的值必须具有唯一性
- 推荐使用 id 作为 key（唯一），不推荐使用 index 作为 key（会变化，不对应）
十六、双向绑定指令
所谓双向绑定就是：
- 数据改变后，呈现的页面结果会更新
- 页面结果更新后，数据也会随之而变
作用： 给表单元素（input、radio、select）使用，双向绑定数据，可以快速 获取 或 设置 表单元素内容
语法：v-model="变量"
需求：使用双向绑定实现以下需求
- 点击登录按钮获取表单中的内容
- 点击重置按钮清空表单中的内容
<div id="app"> 账户：<input type="text"> <br><br> 密码：<input type="password"> <br><br> <button>登录</button> <button>重置</button> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { username: '', password: '' }, }) </script>
十七、综合案例-小黑记事本
功能需求：
- 列表渲染
- 删除功能
- 添加功能
- 底部统计 和 清空
