在介绍这些选项之前，我们先要了解这几个属性参数

1
2
3
4
5
el: 指定Vue实例的挂载点，也就是DOM元素，是Vue的特有属性
data: 用于声明需要响应式绑定的数据对象（实例的数据）
components：Vue实例配置局部注册组件
template：用于挂载元素的字符串模板
render：渲染函数，创建虚拟DOM，是字符串模板的替代方案

首先，先创建出一个 Vue 实例：

1
<div id="app"></div>
1
2
3
4
let vm = new Vue({
  el: "#app", // 挂载点
  data: {}, // vm实例数据
});

methods 方法

methods 选项是个对象，在其内部可以定义方法
比如说 click 事件、请求方法

1
2
3
4
5
6
7
8
9
10
11
12
13
let vm = new Vue({
  el: "#app",
  data: {
    num: 1,
  },

  methods: {
    numAdd(e) {
      console.log(e, event);
      return this.num++;
    },
  },
});
1
2
3
4
<div id="app">
  <span>{{ num }}</span>
  <button v-on:click="numAdd">+1</button>
</div>

通过 v-on 指令绑定 click 点击事件，调用 methods 中定义的 numAdd()方法;从而实现 data 中 num 值加 1，并更新视图。

  • 方法的参数（方法中可以获得绑定事件的 event）
    1. 当 numAdd 时，默认的参数值为 event 事件对象
    2. 当 numAdd(5)时，参数 e 就是传过来的参数 5

watch 侦听属性（观察）

侦听属性 watch 的作用可以监控 Vue 实例上的数据变动，并调用其回调函数。
在 watch 中侦听数据变化，一旦变化就执行回调，其回调函数有两个参数，新值和旧值，如果侦听的数据是数组或对象，新值和旧值打印的结果是一样的。

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
let vm = new Vue({
  el: "#app",
  data: {
    num: 1,
    list: [
      { name: "a", id: 1, num: 12.45 },
      { name: "b", id: 2, num: 23.6789 },
      { name: "c", id: 3, num: 43.512 },
      { name: "d", id: 4, num: 55.4 },
      { name: "e", id: 5, num: 40 },
    ],
  },

  methods: {
    numAdd(e) {
      return this.num + e;
    },
    changeList(val) {
      this.list.push(val);
    },
  },

  watch: {
    num(oldVal, newVal) {
      console.log(`监听到num的变化，${oldVal}--->${newVal}`);
    },

    list(oldVal, newVal) {
      console.log(`监听到list的变化，${oldVal}--->${newVal}`);
    },
  },
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="app">
  <span>{{ num }}</span>
  <button v-on:click="numAdd(5)"></button>
  <table border="1">
    <tr>
      <th>Name</th>
      <th>ID</th>
      <th>Num</th>
    </tr>
    <tr v-for="item in list" :key="item.id">
      <td>{{ item.name }}</td>
      <td>{{ item.id }}</td>
      <td>{{ item.num }}</td>
    </tr>
  </table>
  <button v-on:click="changList({name:'f',id:6, num: 10})">PUSH</button>
</div>

handler 方法和 immediate 属性

watch 中的方法在最初绑定的时候是不会执行的，只有当数据发生改变时才会去监听数据，当我们想要让它一开始就执行的话，就要用到 handler 和 immediate。

1
2
3
4
5
6
7
8
watch:{
  num:{
    handler(oldVal,newVal){
      console.log(`监听到num的变化，${oldVal}--->${newVal}`)
    },
    immediate: true
  }
}

deep(深度监听属性)

watch 中有一个深度监听属性 deep,默认为 false;当数据为引用类型时，重新赋值时未监听到，可以通过设置 deep 属性来进行深度监听。

1
2
3
4
5
6
7
8
watch: {
  list: {
    handler(oldVal,newVal){
        console.log(`监听到list的变化，${oldVal}--->${newVal}`)
    },
    deep: true
  }
}

filters 过滤器

在 Vue 中允许自定义过滤器，来用于文本的格式化。

1
2
3
4
5
6
7
8
9
过滤器一般用于双花括号“{{}}”插值和v-bind表达式中，也可以用于methods方法中。

过滤器应该被添加在JS表达式的尾部，由“管道”符号连接。

过滤器函数始终以表达式的值作为第一个参数；带引号的参数视为字符串，而不带引号的参数按表达式计算。

模板中调用过滤器函数时如果使用了参数，顺序称为过滤器函数的第二、三…个函数。

可以添加多个过滤器。

现将 list 中的 num 值做一下格式化，只保留到整数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//** 根据list中 name值进行格式化*/
const nameOptions = [
  { key: "a", value: "张三" },
  { key: "b", value: "小明" },
  { key: "c", value: "李四" },
  { key: "d", value: "王五" },
  { key: "e", value: "小华" },
];
const nameValue = nameOptions.reduce((a, b) => {
  a[b.key] = b.value;
  return a;
}, {});

  filters:{
    numFilter(val){
      return val.toFixed(0)
    },

    nameFilter(value){
      return nameValue[value]
    }
  }
1
2
<div>{{ num | numFilter }}</div>
<div>{{ name | nameFilter }}</div>

也可以定义全局的过滤器，放在 Vue 实例之前：

1
2
3
Vue.filter("numFilter", function (val) {
  return val.toFixed(0);
});

如何在 js 中使用过滤器？

1
2
3
this.list.forEach((item) => {
  item.num = this.$options.filters["numFilter"](item.num);
});

props 用于接收来自父组件的数据（组件通信）

组件实例的作用域是孤立的。在子组件的模板内不能直接引用父组件的数据。父组件的数据需要通过 Prop 才能下发到子组件中，使用选项 props 申明该组件可接受的 prop 列表。

Prop 可以理解为在组件上注册的一些自定义属性，这些属性的值可以通过组件的 props 选项接收到。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

// 父组件
  <template>
    <Child  name="userName" />
  </template>

  <script>
  import Child from "./Child"
   export default {
     name: 'parent',
     components: { Child }   // 注入 Child 组件
     data(){
       return {
         userName: '李四'
       }
     },
   }
  </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
  // 子组件
  <template>
  <!-- 李四 -->
  {{ name }}
  </template>

<script>
export default {
  name:'Child',
  //*字符串数组写法*/
  // props: ['name']

  //*对象写法*/
  props: {
    name: {
      type: String,
      default: '张三'
    }
  }
}
</script>

单向数据流：父级 prop 的更新会向下流动到子组件中，但是反过来则不行；每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。

computed 计算属性

有时候，我们拿到一些数据，需要经过处理计算后得到的结果，才是我们要展示的内容；对于复杂的计算应当使用实例的计算属性 computed。

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
<template>
  平均年龄：<span>{{ meanAge }}</span>
</template>

<script>
  export default {
    data(){
      return {
        dataList: [
          {name: '张三', age: 20},
          {name: '李四', age: 18},
          {name: '王五', age: 22}
        ]
      }
    },

    //*计算属性*/
    computed: {
      meanAge(){
           let sum = this.dataList.reduce((sum, data) => {
            return sum + parseInt(data.age);
          }, 0);
          return sum / this.dataList.length;
      }
    }
  }
</script>

计算属性对于从现有源组合新数据非常方便，与方法相比，它们的一大优点是缓存了输出。
即：如果独立于计算属性的某些内容在页面上发生更改，并且重新呈现 UI。
computed 中的方法会返回缓存的结果，不会重新计算；
methods 中方法中会重新执行。