• vue笔记二


    七.列表渲染

     1.示例

    <ul id="example-2">
      <li v-for="(item, index) in items">
        {{ parentMessage }} - {{ index }} - {{ item.message }}
      </li>
    </ul>
    
    var example2 = new Vue({
      el: '#example-2',
      data: {
        parentMessage: 'Parent',
        items: [
          { message: 'Foo' },
          { message: 'Bar' }
        ]
      }
    })
    

      

    ps:
    a.如果不需要索引,可以简写为item in items
    b.item in items中的in可以用of替代

    2.渲染一个对象:

    <template>
      <div id="app">
        <span v-for="(value, key, index) in obj">
          value: {{ value }}, key: {{ key }}, index: {{ index }}
        </span>
      </div>
    </template>
    
    <script>
    export default {
      name: 'app',
      data () {
        return {
          obj: {
            first: 10,
            second: 20,
            third: 30
          }
        }
      }
    }
    </script>
    

      

    ps:如果是对象的话,列表渲染的第二个参数为key,第三个参数为索引

    3.数组更新检测

    Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新。这些方法如下:

    push()
    pop()
    shift()
    unshift()
    splice()
    sort()
    reverse()
    

      

    4.由于 JavaScript 的限制,Vue 不能检测以下变动的数组:
    a.当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue
    b.当你修改数组的长度时,例如:vm.items.length = newLength

    为了解决a问题,可以使用

    Vue.set(example1.items, indexOfItem, newValue)
    或
    example1.items.splice(indexOfItem, 1, newValue)
    

      

    为了解决b问题,可以使用

    example1.items.splice(newLength)
    

      

    5.还是由于 JavaScript 的限制,Vue 不能检测对象属性的添加或删除
    可以使用 Vue.set(object, key, value)来解决相应

    6.显示过滤或排序后的结果;可以使用computed属性或方法

    <template>
      <div id="app">
        <span v-for="(value, index) in filterItem(lists)">
          value: {{ value }},  index: {{ index }}
        </span>
      </div>
    </template>
    
    <script>
    export default {
      name: 'app',
      data () {
        return {
          obj: [0, 1, 2, 7]
        }
      },
      computed: {
        lists () {
          return this.obj.filter(function (item) {
            return item > 0
          })
        }
      },
      methods: {
        filterItem (lists) {
          return lists.filter(function (item) {
            return item > 1
          })
        }
      }
    }
    </script>
    

      

    7.一段取值范围

    <div>
      <span v-for="n in 10">{{ n }} </span>
    </div>
    

      

    八.事件处理

    1.示例:

    <template>
      <div id="app">
        <button @click="onClick('hi', $event)">click</button>
      </div>
    </template>
    
    <script>
    export default {
      name: 'app',
      methods: {
        onClick (msg, event) {
          if (event) {
            event.preventDefault()
          }
          alert(msg)
        }
      }
    }
    </script>
    

      

    2.事件修饰符

    Vue.js 为 v-on 提供了 事件修饰符。通过由点 (.) 表示的指令后缀来调用修饰符。

    .stop
    .prevent
    .capture
    .self
    .once

    <!-- 阻止单击事件冒泡 -->
    <a v-on:click.stop="doThis"></a>
    <!-- 提交事件不再重载页面 -->
    <form v-on:submit.prevent="onSubmit"></form>
    <!-- 修饰符可以串联 -->
    <a v-on:click.stop.prevent="doThat"></a>
    <!-- 只有修饰符 -->
    <form v-on:submit.prevent></form>
    <!-- 添加事件侦听器时使用事件捕获模式 -->
    <div v-on:click.capture="doThis">...</div>
    <!-- 只当事件在该元素本身 (比如不是子元素) 触发时触发回调 -->
    <div v-on:click.self="doThat">...</div>
    <!-- 点击事件将只会触发一次 -->
    <a v-on:click.once="doThis"></a>
    

      

    3.键盘事件

    <input v-on:keyup.13="submit">
    

      

    全部的按键别名:

    .enter
    .tab
    .delete (捕获“删除”和“退格”键)
    .esc
    .space
    .up
    .down
    .left
    .right
    

      

    可以通过全局 config.keyCodes 对象自定义键值修饰符别名:

    // 可以使用 v-on:keyup.f1
    Vue.config.keyCodes.f1 = 112
    

      

    九.表单输入绑定

    1.你可以用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。

    ps:v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值。因为它会选择 Vue 实例数据来作为具体的值。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

    2.文本:

    <template>
      <div id="app">
        <span>{{ msg }}</span>
        <input v-model="msg">
      </div>
    </template>
    
    <script>
    export default {
      name: 'app',
      data () {
        return {msg: 'ok'}
      }
    }
    </script>
    

      

    3.多行文本

    <template>
      <div id="app">
        <span>{{ msg }}</span>
        <textarea v-model="msg"></textarea>
      </div>
    </template>
    
    <script>
    export default {
      name: 'app',
      data () {
        return {msg: 'ok'}
      }
    }
    </script>
    

      

    ps:
    在文本区域插值 (<textarea></textarea>) 并不会生效,应用 v-model 来代替。

    4.复选框

    <template>
      <div id="app">
        <input type="checkbox" id="checkbox" v-model="checked">
        <label for="checkbox">{{ checked }}</label>
      </div>
    </template>
    
    <script>
    export default {
      name: 'app',
      data () {
        return {checked: true}
      }
    }
    </script>
    

      

    多个勾选框,绑定到同一个数组:

    <template>
      <div id="app">
        <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
       <label for="jack">Jack</label>
       <input type="checkbox" id="john" value="John" v-model="checkedNames">
       <label for="john">John</label>
       <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
       <label for="mike">Mike</label>
       <br>
       <span>Checked names: {{ checkedNames }}</span>
      </div>
    </template>
    
    <script>
    export default {
      name: 'app',
      data () {
        return {checkedNames: []}
      }
    }
    </script>
    

      

    5.单选按钮

    <template>
      <div id="app">
        <input type="radio" id="one" value="One" v-model="picked">
      <label for="one">One</label>
      <br>
      <input type="radio" id="two" value="Two" v-model="picked">
      <label for="two">Two</label>
      <br>
      <span>Picked: {{ picked }}</span>
      </div>
    </template>
    
    <script>
    export default {
      name: 'app',
      data () {
        return {picked: ''}
      }
    }
    </script>
    

      

    6.选择列表

    <template>
      <div id="app">
        <select v-model="selected">
          <option disabled value="">请选择</option>
          <option>A</option>
          <option>B</option>
          <option>C</option>
        </select>
        <span>Selected: {{ selected }}</span>
      </div>
    </template>
    
    <script>
    export default {
      name: 'app',
      data () {
        return {selected: ''}
      }
    }
    </script>
    

      

    绑定一个数组

    <template>
      <div id="app">
        <select multiple v-model="selected">
          <option disabled value="">请选择</option>
          <option>A</option>
          <option>B</option>
          <option>C</option>
        </select>
        <span>Selected: {{ selected }}</span>
      </div>
    </template>
    
    <script>
    export default {
      name: 'app',
      data () {
        return {selected: []}
      }
    }
    </script>
    

      

    用v-for渲染:

    <template>
      <div id="app">
        <select v-model="selected">
        <option v-for="option in options" v-bind:value="option.value">
          {{ option.text }}
        </option>
      </select>
      <span>Selected: {{ selected }}</span>
      </div>
    </template>
    
    <script>
    export default {
      name: 'app',
      data () {
        return {
          selected: 'A',
          options: [
            { text: 'One', value: 'A' },
            { text: 'Two', value: 'B' },
            { text: 'Three', value: 'C' }
          ]}
      }
    }
    </script>
    

      

    7.值绑定:
    对于单选按钮,勾选框及选择列表选项,v-model 绑定的 value 通常是静态字符串 (对于勾选框是逻辑值):

    <!-- 当选中时,`picked` 为字符串 "a" -->
    <input type="radio" v-model="picked" value="a">
    <!-- `toggle` 为 true 或 false -->
    <input type="checkbox" v-model="toggle">
    <!-- 当选中时,`selected` 为字符串 "abc" -->
    <select v-model="selected">
      <option value="abc">ABC</option>
    </select>
    

      

    有时我们想绑定 value 到 Vue 实例的一个动态属性上,这时可以用 v-bind 实现,并且这个属性的值可以不是字符串

    8.复选框的值绑定:

    <input
      type="checkbox"
      v-model="toggle"
      v-bind:true-value="a"
      v-bind:false-value="b"
    >
    

      

    9.单选按钮的值绑定

    <input type="radio" v-model="pick" v-bind:value="a">
    

      

    10.选择列表的选项:

    <select v-model="selected">
        <!-- 内联对象字面量 -->
      <option v-bind:value="{ number: 123 }">123</option>
    </select>
    

      

    11.修饰符

     .lazy
    在默认情况下,v-model 在 input 事件中同步输入框的值与数据 ,但你可以添加一个修饰符 lazy ,从而转变为在 change 事件中同步

    <!-- 在 "change" 而不是 "input" 事件中更新 -->
    <input v-model.lazy="msg" >
    

      

    .number
    如果想自动将用户的输入值转为 Number 类型 (如果原值的转换结果为 NaN 则返回原值),可以添加一个修饰符 number 给 v-model 来处理输入值

    <input v-model.number="age" type="number">
    

      

    .trim
    如果要自动过滤用户输入的首尾空格,可以添加 trim 修饰符到 v-model 上过滤输入

    <input v-model.trim="msg">
    

      

  • 相关阅读:
    JWPlayer Uncaught Error: Invalid SRT file
    京东电商API
    map, string 强大的STL
    VFL演示样例
    sizeof小览
    Java中httpClient中三种超时设置
    Windows下Mysql5.6启用监控执行脚本的日志
    实时监控MySql状态
    实时监控mysql数据库变化
    SVN命令使用详解
  • 原文地址:https://www.cnblogs.com/itfenqing/p/7532488.html
Copyright © 2020-2023  润新知