vue 进阶系列之指令

John Doe
2019-10-22

本文章是基于vue 2做总结案例，主要展示了在SPA中怎么使用。

如何构建SPA

参考文档vuejs

指令

v-text

作用： 更新元素的 textContent

1
2
3
4
5
6
7
8
9
10
11
12
13
<!--#ps: 请和插值语法{{msg}}比较学习 -->
<template>
  <div v-text="msg"></div>
</template>
<script>
  export default {
    data() {
      return {
        msg: "just do it"
      };
    }
  };
</script>

v-text vs Mustache 语法

1
2
# 同： 都是更新元素的textContent
# 异： 当网速很慢或者下面的JavaScript写错时，会直接将{{msg}}渲染到页面而使用v-text="message" 如果出错是不显示的

v-html

作用： 操作元素中的HTML标签

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- #ps: 请和`v-text`比较学习 -->
<template>
  <div v-html="msg"></div>
</template>
<script>
  export default {
    data () {
      return {
        msg: "<img src='img/1.ipg'"/>
      }
    }
  }
</script>

v-text vs v-html

1
2
# 同： 如果只是用来渲染 `textContent`， 则效果相同
# 异： v-text会将元素当成纯文本输出，v-html会将元素当成HTML标签解析后输出

v-show

作用： 根据表达式之真假值，切换元素的 display CSS 属性

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- #ps: 请和`v-if`比较学习 -->
<template>
  <div v-show="isShow"></div>
</template>
<script>
  export default {
    data() {
      return {
        isShow: false
      };
    }
  };
</script>

v-if

作用： 根据表达式的值的真假条件渲染元素

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- #ps: 请和`v-if`比较学习 -->
<template>
  <div v-if="isShow"></div>
</template>
<script>
  export default {
    data() {
      return {
        isShow: true
      };
    }
  };
</script>

v-show vs v-if

1
2
# 同： 根据表达式值的真假都可以达到隐藏和显示节点的效果
# 异： v-show改变的是css 的display属性。v-if在切换时元素及它的数据绑定 / 组件被销毁并重建

v-else

限制：前一兄弟元素必须有 v-if 或 v-else-if。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- #ps: 前面必须有兄弟元素使用了 v-if 或者 v-else-if 才可 -->
<template>
  <div>
    <div v-if="isShow">
    <div v-else></div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      isShow: true
    }
  }
}
</script>

v-for

作用： 基于源数据多次渲染元素或模板块

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!-- #ps: 源数据类型可以是 number、Array、Object-->
<template>
  <div>
    <!-- 源数据是number -->
    <ul>
      <li v-for="item in n" :key="item">
        {{item}}
      </li>
    <ul>
    <!-- 源数据是Object -->
    <ul>
      <li v-for="(value, name, index) in student" :key="item">
        {{ index }}. {{ name }}: {{ value }}
      </li>
    <ul>
    <!-- 源数据是Array -->
    <!-- 当它们处于同一节点，v-for 的优先级比 v-if 更高 -->
    <ul>
      <li
        v-for="(item, index) in schedules"
        :key="index"
        v-if="item.isShow">
       {{item.goal}}
      </li>
    <ul>
  </div>
</template>
<script>
export default {
  data () {
    return {
      n: 7,
      student: {
        name: 'zhangsan',
        sex: 'male',
        nation: 'china'
      }
      schedules: [
        {
          goal: '一周时间刷一边vue官网',
          isShow: true
        },
        {
          goal: '用10天时间刷一边react官网',
          isShow: true
        },
        {
          goal: '用半月时间熟悉vue 和 react全家桶',
          isShow: false
        }
      ]
    }
  }
}
</script>

源数据更新

1
2
3
4
5
6
7
8
9
10
11
12
# 变异方法：
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
# 非变异方法
filter()
concat()
slice()
1
2
3
4
5
6
7
8
9
10
11
12
13
export defult {
  mounted () {
    // 变异方法的使用
    this.schedules.push({
      goal: "学习js算法基础知识",
      isShow: false
    })
    // 非变异方法的使用
    this.schedules = this.schedules.filter(item => {
      return item.isShow
    })
  }
}

注意

Vue 不能检测以下数组的变动：

1
2
3
4
# 当你利用索引直接设置一个数组项时
this.schedules[indexOfItem] = newValue
# 可以这样解决
this.$set(this.schedules, indexOfItem, newValue)
1
2
3
4
# 当你修改数组的长度时
this.schedules.length = newLength
# 可以这样解决：
this.schedules.splice(newLength)

Vue 不能检测对象属性的添加或删除：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var vm = new Vue({
  data: {
    student: {
      name: "zhangsan",
      sex: "male",
      nation: "china"
    }
  }
});
// `vm.student.name` 现在是响应式的
vm.student.age = 27;
// `vm.student.age` 不是响应式的
// 可以这样解决：
this.$set(this.student, "age", 27);

v-model

作用: 实现双向数据绑定

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<template>
  <div>
    <form>
      <div action="/login" method="post">
        <label>用户名：<label>
        <input v-model.trim="userName" type="text" placeholder="请输入用户名">
      </div>
      <div>
        <label>密码：<label>
        <input v-model.lazy.trim="userPassword" type="password" placeholder="请输入密码">
      </div>
      <div>
        <label>是否关联第三放帐号：<label>
        <input v-model="isRelationThirdPartAccNo" value="true" type="radio"/>是
        <input v-model="isRelationThirdPartAccNo" value="false" type="radio"/>否
      </div>
      <div v-if="isRelationThirdPartAccNo === 'true'">
        <input v-model="thirdPartAccNos" value="wechat" type="checbox"/>微信
        <input v-model="thirdPartAccNos" value="email" type="checbox"/>邮箱
        <input v-model="thirdPartAccNos" value="qq" type="checbox"/>qq
      </div>
      <div>
        <label>地址：</label>
        <select v-model="province">
          <option disabled value="">请选择您所在省</option>
          <option v-for="(item, index) in provinces" :value="item.code">{{item.text}}</option>
        </select>--
        <select v-model="city">
          <option disabled value="">请选择您所在市区</option>
          <option v-for="(item, index) in cities" :value="item.code">{{item.text}}</option>
        </select>
      </div>
      <div>
        <label>详细地址：</label>
        <textarea v-model="address"></textarea>
      </div>
    </form>
  </div>
</template>
<script>
export default {
  data () {
    userName: '',
    userPassword: '',
    isRelationThirdPartAccNo: '',
    thirdPartAccNos: [],
    province: '',
    provinces: [
      {
        code: '620',// 省份代码
        text: '甘肃'
      },
      {
        code: '320',// 省份代码
        text: '江苏'
      }
    ],
    city: '',
    cities: [],
    address: ''
  }，
  computed: {
    cities () {
      if (this.province === '320') {
        return [
          {
            value: '3201',
            text: '南京'
          },
          {
            value: '3202',
            text: '苏州'
          },
          {
            value: '3201',
            text: '常州'
          }
        ]
      }
    }
  }
}
</script>

v-on

作用： 绑定事件监听器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<template>
  <!-- 方法处理器 -->
  <button v-on:click="doThis"></button>

  <!-- 动态事件 (2.6.0+) -->
  <button v-on:[event]="doThis"></button>

  <!-- 内联语句 -->
  <button v-on:click="doThat('hello', $event)"></button>

  <!-- 缩写 -->
  <button @click="doThis"></button>

  <!-- 动态事件缩写 (2.6.0+) -->
  <button @[event]="doThis"></button>

  <!-- 停止冒泡 -->
  <button @click.stop="doThis"></button>

  <!-- 阻止默认行为 -->
  <button @click.prevent="doThis"></button>

  <!-- 阻止默认行为，没有表达式 -->
  <form @submit.prevent></form>

  <!--  串联修饰符 -->
  <button @click.stop.prevent="doThis"></button>

  <!-- 键修饰符，键别名 -->
  <input @keyup.enter="onEnter" />

  <!-- 键修饰符，键代码 -->
  <input @keyup.13="onEnter" />

  <!-- 点击回调只会触发一次 -->
  <button v-on:click.once="doThis"></button>

  <!-- 对象语法 (2.4.0+) -->
  <button v-on="{ mousedown: doThis, mouseup: doThat }"></button>
</template>

v-bind

作用：动态地绑定一个或多个特性，或一个组件 prop 到表达式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<template>
<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">

<!-- 动态特性名 (2.6.0+) -->
<button v-bind:[key]="value"></button>

<!-- 缩写 -->
<img :src="imageSrc">

<!-- 动态特性名缩写 (2.6.0+) -->
<button :[key]="value"></button>

<!-- 内联字符串拼接 -->
<img :src="'/path/to/images/' + fileName">

<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">

<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>

<!-- 绑定一个有属性的对象 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

<!-- 通过 prop 修饰符绑定 DOM 属性 -->
<div v-bind:text-content.prop="text"></div>

<!-- prop 绑定。“prop”必须在 my-component 中声明。-->
<my-component :prop="someThing"></my-component>

<!-- 通过 $props 将父组件的 props 一起传给子组件 -->
<child-component v-bind="$props"></child-component>

<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>
</template>

v-slot

作用： 为插槽传入 prop 的时候使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!-- 定义一个插槽模板 -->
<div class="container">
  <header>
    <!-- 具名插槽 -->
    <slot name="header"></slot>
  </header>
  <main>
    <!-- 默认插槽 -->
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
  <!-- 向具名插槽提供内容 -->
  <base-layout>
    <template v-slot:header>
      <h1>Here might be a page title</h1>
    </template>

    <p>A paragraph for the main content.</p>
    <p>And another one.</p>

    <template v-slot:footer>
      <p>Here's some contact info</p>
    </template>
  </base-layout>
  <!-- 渲染结果 -->
  <div class="container">
    <header>
      <h1>Here might be a page title</h1>
    </header>
    <main>
      <p>A paragraph for the main content.</p>
      <p>And another one.</p>
    </main>
    <footer>
      <p>Here's some contact info</p>
    </footer>
  </div>
</div>

注意： v-slot 只能添加在一个 <template> 上

v-pre

作用： 跳过这个元素和它的子元素的编译过程

1
2
3
<template>
  <span v-pre>{{ this will not be compiled }}</span>
</template>

v-cloak

作用： 指令保持在元素上直到关联实例结束编译。

v-once

作用： 只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过

1
2
3
<template>
  <span v-once>This will never change: {{msg}}</span>
</template>
 上一页

vue