《Vue.js实战》第五章.内置指令

---

title: 第五章.内置指令
tags: 2019-11-20
notebook: Vue

5.1 内置指令

5.1.1 v-clock

• v-cloak是一个不需要表达式的指令
• 在一般情况下，v-cloak是一个解决初始化慢导致页面闪动的最佳实践
• 使用webpack或vue-router时,都是由路由去挂载不同组件.所以不再需要v-cloak

5.1.2 v-once

• v-once也是一个不需要表达式的指令
• 被v-once修饰的元素只在页面初次加载时渲染,当数据变化时不再重新渲染页面,将被视为静态内容

例:

<div id="app" v-once>{{message}}</div>
var app = new Vue({
  el: '#app',
  data: {
    message: '这是一段文本'
  },

})
app.message = "文本改变"

页面显示"文本"

5.2 条件渲染指令

5.2.1 v-if、v-else-if、v-else

与JavaScript的if、else if、else类似，vue.js的指令可以在DOM中渲染或销毁元素/组件

例:

<p v-if="status===1">status为1时显示这行</p>
<p v-else-if="status===2">status为2时显示这行</p>
<p v-else>否则显示这行</p>
--------------------------------------------------------
var app = new Vue({
  el: '#app',
  data: {
    count: parseInt(1)
  },
  computed: {
    status: function () {
      var _this = this
      setInterval(function () {
        if (_this.count < 3) {
          _this.count++
        } else {
          clearInterval(this)
        }
      }, 2000)
      console.log(_this.count)
      return _this.count
    }
  }
})

5.2.2 v-show

v-show是将元素display设为none并不是真正销毁元素

5.3 列表渲染v-for

当需要将一个数据遍历或一个对象枚举显示时,会用到v-for列表渲染,其表达式需要配合in使用,类似"item in items"的格式

5.3.1 基本用法

例:

<div id="app">
  <ul>
    <template v-for="book in books">
      <li>书名:{{book.name}}</li>
      <li>作者:{{book.author}}</li>
    </template>
  </ul>
</div>
-------------------------------------------------------
var app = new Vue({
  el: '#app',
  data: {
    books: [
      {
        name: '《vue.js实战》',
        author: '梁澈'
      },
      {
        name: '《JavaScript语言精粹》',
        author: 'Douglas Crockford'
      },
      {
        name: '《JavaScript高级程序设计》',
        author: 'Nicholas C. Zakas'
      }
    ]
  }
})

遍历对象属性

例

<div id="app">
  <ul>
    <li v-for="(value,key,index) in user">{{value}}---{{key}}:{{index}}</li>
  </ul>
</div>
--------------------------------------------------------------------------------
var app = new Vue({
  el: '#app',
  data: {
    user: {
      name: '张三',
      age: 21,
      sex: '男'
    }
  }
})

遍历整数

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

5.3.2 数组更新

Vue的核心是数据与视图的双向绑定,当我们修改数组时,vue会检测到数据变化,所以用v-for渲染的视图也会更新.  
vue包含了一组观察数据变化的方法,使用他们改变数组也会触发视图更新,

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

5.3.3 过滤和排序

当不想改变原数组,想通过一个数组的副来做过滤或排序的现实时,可以使用计算属性返回过滤或排序后的数组

例

<template v-for="book in filterBooks">
    <li>书名:{{book.name}}</li>
    <li>作者:{{book.author}}</li>
</template>
----------------------------------------------------------------------
var app = new Vue({
  el: '#app',
  data: {
    books: [
      {
        name: '《vue.js实战》',
        author: '梁澈'
      },
      {
        name: '《JavaScript语言精粹》',
        author: 'Douglas Crockford'
      },
      {
        name: '《JavaScript高级程序设计》',
        author: 'Nicholas C. Zakas'
      }
    ]
  },
  computed: {
    filterBooks: function () {
      return this.books.filter(function (book) {
        return book.name.match(/JavaScript/)
      })
    }
  },
})

5.4 方法与事件

5.4.1 基本用法

例

<div id="app">
  <p>点击次数:{{counter}}</p>
  <button @click="handAdd()">+1</button>
  <button @click="handAdd(10)">+10</button>
</div>
--------------------------------------------------------
var app = new Vue({
  el: '#app',
  data: {
    counter: 0
  },
  methods: {
    handAdd: function (num) {
      num = num || 1
      console.log(num);

      this.counter += num
    }
  },
})

5.4.2 修饰符

在＠绑定的事件后加小圆点“．”，再跟一个后缀来使用修饰符。

• .stop:阻止事件冒泡
• .prevent:提交事件不再重载页面
• .capture:添加事件侦听器时使用事件捕获模式
• .self:只当事件在该元素本身(而不是子元素)触发时触发回调
• .once:只触发一次,组件同样适用

具体用法

<!--阻止单击事件冒泡-->
<a @click.stop="handle"></a>
<!--提交事件不在重载页面-->
<form @submit.prevent="handle"></form>
<!--修饰符可以串联-->
<a @click.stop.prevent="handle"></a>
<!--只有修饰符-->
<form @submit.prevent></form>
<!--添加事件侦听器时使用事件捕获模式-->
<div @click.capture="handle">...</div>
<!--只当事件在该元素本身(而不是子元素)触发时触发回调-->
<div @click.self="handle">..</div>
<!--只触发一次,组件同样适用-->
<div @click.once="handle">...</div>

在表单元素上监听键盘事件时,使用按键修饰符

<!--只有在keycode为13时调用vm.submit()-->
<input @keyup.13="submit">

自己配置具体按键

Vue.config.keyCodes.f1=112
//全局定义后,就可以直接使用@keyup.f1

键盘按键快捷键

• .enter
• .tab
• .delete
• .esc
• .space
• .up
• .down
• .left
• .right

如下修饰符可以和鼠标配合使用,也可以与其他修饰符组合使用

• .ctrl
• .alt
• .shift
• .meta(Mac下是Command键,Windows下是窗口键)

例

<!--Shift + S-->
<input @keyup.shift.83="handleSave">
<!--Ctrl + Click-->
<div @click.ctrl="doSomething">Do Something</div>