【Vue2+3入门到实战】（3）Vue基础之事件绑定指令（v-on）属性绑定指令（v-bind）双向绑定指令（v-model）列表渲染指令（v-for）详解

一、事件绑定指令：v-on

使用Vue时，如需为DOM注册事件，及其的简单，语法如下：

<button v-on:事件名=“内联语句”>按钮
<button v-on:事件名=“处理函数”>按钮
<button v-on:事件名=“处理函数(实参)”>按钮
v-on: 简写为 @

1. 内联语句

<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>

2. 事件处理函数

注意：

事件处理函数应该写到一个跟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>

二、属性绑定指令：v-bind

**作用：**动态设置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>

四、列表渲染指令:v-for

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（会变化，不对应）

七、双向绑定指令：v-model

所谓双向绑定就是：

数据改变后，呈现的页面结果会更新
页面结果更新后，数据也会随之而变

作用： 给表单元素（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>