10 事件绑定指令
使用Vue时，如需为DOM注册事件，及其的简单，语法如下：
- <button v-on:事件名=“内联语句”>按钮
- <button v-on:事件名=“处理函数”>按钮
- <button v-on:事件名=“处理函数(实参)”>按钮
v-on:简写为 @
- 内联语句
<div id="app"> <button @click="count--">-</button> <span>{{ count }}</span> <button v-on:click="count++">+</button> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { count: 100 } }) </script>
- 事件处理函数注意：
- 事件处理函数应该写到一个跟data同级的配置项（methods）中
- methods中的函数内部的this都指向Vue实例
<div id="app"> <button>切换显示隐藏</button> <h1 v-show="isShow">黑马程序员</h1> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { isShow: true } }) </script>
3.给事件处理函数传参
- 如果不传递任何参数，则方法无需加小括号；methods方法中可以直接使用 e 当做事件对象
- 如果传递了参数，则实参
$event表示事件对象，固定用法。
<style> .box { border: 3px solid #000000; border-radius: 10px; padding: 20px; margin: 20px; width: 200px; } h3 { margin: 10px 0 20px 0; } p { margin: 20px; } </style> <div id="app"> <div class="box"> <h3>小黑自动售货机</h3> <button>可乐5元</button> <button>咖啡10元</button> <button>牛奶8元</button> </div> <p>银行卡余额：{{ money }}元</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { money: 100 } }) </script>
11 属性绑定指令
- **作用：**动态设置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>
12 小案例-波仔的学习之旅
需求：默认展示数组中的第一张图片，点击上一页下一页来回切换数组中的图片
实现思路：
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>
13 列表渲染指令
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 开始
14 小案例-小黑的书架
需求：
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>
15 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（会变化，不对应）
16 双向绑定指令
所谓双向绑定就是：
- 数据改变后，呈现的页面结果会更新
- 页面结果更新后，数据也会随之而变
作用： 给表单元素（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>
17 综合案例-小黑记事本
功能需求：
- 列表渲染
- 删除功能
- 添加功能
- 底部统计 和 清空
