Vue-常用系统指令v-bind、v-on、v-model、v-for和 key 属性的使用

v-bind

• 该指令可以给 HTML 元素或者组件动态地绑定一个或多个特性，比如：style、class。

  <!-- 绑定的属性的等号右侧值未加引号时会将其作为 vue 实例中的属性解析，加了引号后会将其作为普通字符串使用 -->
  <input type="button" name="" v-bind:value="myType" v-bind:title="msg">
  

• v-bind 指令可简写为 : ，绑定的属性中可以写合法的 JS 代码。

  <input type="button" name="" :value="myType + 'v-bind'" :title="msg">
  

• 绑定 style

  <p :style="styleA">单个行内样式</p>
  <p :style="{fontSize: size + 'px'}">对象：可让指令与普通样式属性共存</p>
  <p :style="[styleA, styleB]">数组：绑定一个 行内样式 列表</p>
  

• 绑定 class

  <p :class="classA">单个</p>
  <p :class="[classA, classB]">数组：类选择器列表</p>
  <p :class="{red: flagA}">对象：可判定是否使用选择器（貌似不能使用 data 中的）</p>
  <p :class="[{B: flagA}, classA, flagA? 'white' : '']">对象数组：可判定是否使用非 data 中的选择器（需要加引号）</p>
  

  css:

  .A {
      border: 2px solid blue;
  }
  .B {
      background: yellow;
  }
  .red {
      background: red;
  }
  .white {
      color: white;
  }
  

  JS:

  let vm = new Vue({
      el: "#app",
      data: {
          myType: 'button',
          msg: 'class style',
          flagA: true,
          flagB: false,
          classA: 'A',
          classB: 'B',
          size: '30',
          styleA: {color: 'pink'},
          styleB: {textDecoration: 'line-through'}
      }
  })
  

v-on

• 用于绑定事件监听，用在普通的 HTML 元素上时，只能监听 原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。

• v-on 指令可简写为 @ 。

  <input type="button" :value="msg" @click="show">
  

• 调用函数时，如果没有传参，可省略 “()” ，直接使用函数名。

  <input type="button" :value="msg" v-on:click="show">
  

  JS:

  new Vue({
      el: '#app',
      data: {
          msg: 'button'
      },
      methods: {
          show(arg) {
              alert('v-on:click')
              console.log(arg)
          }
      }
  })
  

• 常用事件：

  v-on:click // 点击事件
  v-on:keydown // 按键按下事件
  v-on:keyup // 按键抬起事件
  v-on:mousedown // 鼠标按下时的事件
  v-on:mouseover // 鼠标进入事件
  v-on:submit // 表单提交
  …

v-model

• 该指令可以在表单控件或者组件上实现数据的双向绑定。

  • input、select、textarea、components（Vue中的组件）。。。

  <input type="text" name="" v-model="msg">
  

v-for

• 该指令可用于遍历 数组、对象、数字

• 未来，数据中的某一项的值发生了改变，则 v-for 只会更新当前项对应的这个 DOM 元素的值，而不是更新整个数据，从而提高效率。

  • 遍历普通数组

    <ul>
        <!-- 循环普通数组的值，item 为每一项的值， list 为被遍历的数组 -->
        <li v-for='item in list' v-text='item' v-cloak></li>
    </ul>
    

  • 遍历数组中的值和索引

    <ul>
        <!-- 循环数组的值和下标，i 即为数组元素下标 -->
        <li v-for='(item, i) in list' v-cloak>{{ item }}, {{ i }}</li>
    </ul>
    

  • 遍历对象数组

    <!-- 遍历对象数组 -->
    <ul>
        <!-- 遍历 users 对象数组中的成员，user 为对象成员，i 为当前对象在数组中的索引 -->
        <li v-for="(user, i) in users" v-cloak>{{user.id}},{{user.name}},{{i}}</li>
    </ul>
    

  • 遍历对象中的键值对

    <ul>
        <!-- key 为被遍历对象中的属性名， value 为对应的属性值-->
        <li v-for="(value, key, i) in obj" v-cloak>{{ value }},{{ key }},{{ i }}</li>
    </ul>
    
    
    

  • 迭代数字

    <ul>
        <!-- count 从 1 开始，无法遍历负数-->
        <li v-for="count in 15" v-cloak>{{ count }}</li>
    </ul>
    

    CSS:

    [v-cloak] {
        display: none;
    }
    

    JS:

    new Vue({
       el: '#app',
       data: {
           list: [1,3,5,7,9,11],
           users: [
               { id: 1, name:  '苏小小'},
               { id: 2, name:  '苏妲己'},
               { id: 3, name:  '苏凌香'},
               { id: 4, name:  '苏宛儿'}
           ],
           obj: {
               name: '小青',
               age: 18,
               gender: '女',
             hobby: '古筝、琴'
           }
     },
       methods: {
    
       }
    })
    

• key

  • key 属性具有唯一性，不能重复（key 值必须具有唯一性），它能够标识数组的每一项，在使用 for 循环时最好加上 key 属性，不管用不用得到。

  • 当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 “就地复用” 策略。如果数据项的顺序被改变，Vue将不是移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。

  • 为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，需要为每项提供一个唯一 key 属性。

    <!-- 用于添加 id -->
    <label for="id">ID:</label>
    <input type="text" id="id" v-model="uid">
    <!-- 用于添加用户名称 -->
    <label for="name">name:</label>
    <input type="text" id="name" v-model="uname">
    <!-- 点击时调用添加用户的方法 -->
    <input type="button" name="" @click="add" :value="msg">
    <!-- 遍历用户 -->
    <p v-for="item in users" v-bind:key="item.id" v-cloak>
        <input type="checkbox" name=""  v-cloak>{{ item.id }}, {{ item.name }}
    </p>
    

    CSS:

    [v-cloak] {
        display: none;
    }
    

    JS:

    new Vue({
        el: '#app',
        data: {
            uid: '',
            uname: '',
            msg: '添加',
            users: [
                { id: 1, name:  '苏小小'},
                { id: 2, name:  '苏妲己'},
                { id: 3, name:  '苏凌香'},
                { id: 4, name:  '苏宛儿'}
            ]
        },
        methods: {
            add() {
                let name = this.uname
                let id = this.uid
                let newUser = {id, name}
                // 添加成员
                this.users.unshift(newUser)
                
                // 添加完成后，将文本框的值置空
                this.uname = ''
                this.uid = ''
            }
        }
    })
    

  注：

  以下变动不会触发视图更新

  • 通过索引给数组设置新值
  • 通过 length 改变数组