vue指令-v-bind、v-for、v-model

1.1 Vue 指令 v-bind

1. 作用：动态设置html的标签属性 比如：src、url、title
2. 语法：v-bind:属性名=“表达式”
3. v-bind:可以简写成 => :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/xxxx.png',
        msg: 'hello world'
      }
    })
  </script>

案例：切换图片
实现思路：
①切换图片，就得准备很多个图片。用数组表示
② 最示圏片，<img :src="list[下标]“ />
③ 想切换图片，就改变下标即可，弄个index当下标
④ 点击按钮，修改index，index++ index--
⑤ 加入条件，控制按钮何时显示

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

1.2 Vue 指令 v-for

1. 作用： 基于数据循环，多次渲染整个元素，可遍历数组，对象、数字等
2. 遍历数组语法：
   v-for = "(item, index) in 数组"

• item 每一项， index 下标
• 省略 index: v-for = "item in 数组"
• 数组、对象、数字

遍历数组

 <div id="app">
    <ul>
      <li v-for="(item, index) in list">
        {{ item }} - {{ index }}
      </li>
    </ul>
    <ul>
      <li v-for="item in list"> // 
        {{ item }}
      </li>
    </ul>
  </div>

遍历对象

<div v-for="(value, key, index) in object">{{value}}</div>
value:对象中的值
key:对象中的键
index:遍历索引从0开始

遍历数字

<p v-for="item in 10">{{item}}</p>
item从1 开始

*案例：书架

<div id="app">
    <ul>
        // 循环的时候，必须加 :key="item.id"有id优先用id，无id用其他不重复的值
      <li v-for="(item, index) in booksList" :key="item.id">
        <span>{{ item.name }}</span>
        <span>{{ item.author }}</span>
        <!-- 注册点击事件 →  通过 id 进行删除数组中的 对应项 -->
        <button @click="del(item.id)">删除</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: '罗贯中' }
        ]
      },
      methods: {
        del (id) {
          // 通过 id 进行删除数组中的 对应项 → filter(不会改变原数组)，只是将过滤后的新数组赋值给老数组。
          // filter: 根据条件，保留满足条件的对应项，得到一个新数组。
          // 把得到的新数组赋值给老数组
          this.booksList = this.booksList.filter(item => {
          // 最终的结果就是保留符合条件的元素
            return item.id !== id
        } )
        }
      }
    })
  </script>

1.3 Vue 指令 v-for中的key

语法： key="唯一值"
作用：给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用。
为什么加key：Vue 的默认行为会尝试原地修改元素（就地复用）
注意：

1. key 的值只能是字符串 或 数字类型
2. key 的值必须具有唯一性
3. 推荐使用 id 作为 key（唯一），不推荐使用 index 作为 key（会变化，不对应）

1.3 双向绑定指令

所谓双向绑定就是：

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

作用： 给表单元素（input、radio、select）使用，双向绑定数据，可以快速 获取 或 设置 表单元素内容
语法：v-model="变量"

<div id="app">
    <input type="text" v-model="username"> <br><br>
    <input type="password" v-model="password"> <br><br>
    <button @click="login">登录</button>
    <button @click="reset">重置</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: ''
      },
      methods: {
        login () {
          console.log(this.username, this.password)
        },
        reset () {
          this.username = ''
          this.password = ''
        }
      }
    })
  </script>