解决办法:

public下面的index.html改成index.ejs就行了

vue.set 是 Vue.js 提供的一个全局方法，用于在响应式对象中新增属性或修改数组的索引值。vue.set 是为了解决 Vue.js 在默认情况下无法检测到对象属性的新增或数组索引的变化而引入的。

vue.set 方法接受三个参数：目标对象、属性名或数组索引、属性值。其用法如下：

Vue.set(target, propertyName/index, value)

• 参数一:需要更新的数组或对象
• 参数二:是数组的下标或者对象的属性名，
• 参数三:是更新的内容

修改数组的方法：（修改下标为2的元素为D）

let arr = ["a","b","c"];
this.$set(arr, 2, "d");

修改对象的方法：(修改name属性值为：李四）

let obj = {
  name: "张三",
  age: 18,
  sex: "男"
};
this.$set(obj, "name", "李四");

新增对象的方法：(修新增身高属性）

this.$set(obj, "height", 180);

{
  name: "李四",
  age: 18,
  sex: "男",
  height: 180
}

新增数组元素

// 假设data中有一个数组变量名为myArray
// 初始化数组
this.myArray = ['item1', 'item2', 'item3'];

// 添加新元素
this.$set(this.myArray, this.myArray.length, 'newItem');

// 现在myArray为['item1', 'item2', 'item3', 'newItem']

在 Vue.js 2.x 中，有八个生命周期钩子函数，它们按照组件的创建、更新和销毁阶段被依次调用

1. beforeCreate（创建前）：

在实例被创建之前调用。这个阶段，组件的数据和方法还未初始化，无法访问到组件实例的属性。

2. created（创建后）：

在实例被创建之后调用。在这个阶段，组件的数据和方法已经初始化完成，可以访问组件实例的属性。

3. beforeMount（挂载前）：

在组件被挂载到 DOM 之前调用。在这个阶段，模板已经编译完成但尚未渲染到页面。

4. mounted（挂载后）：

在组件被挂载到 DOM 后调用。在这个阶段，模板已经编译完成并且已经渲染到页面上，可以进行 DOM 操作。

5. beforeUpdate（更新前）：

在组件更新之前调用。在这个阶段，组件的数据发生了变化，但 DOM 尚未重新渲染。

6. updated（更新后）：

在组件更新之后调用。在这个阶段，组件的数据已经变化并且 DOM 已经重新渲染完毕。

7. beforeDestroy（销毁前）：

在组件销毁之前调用。在这个阶段，组件实例仍然完全可用，可以进行一些清理操作。

8. destroyed（销毁后）：

在组件销毁之后调用。在这个阶段，组件实例已经被销毁，无法再访问到组件实例的属性和方法。

这些生命周期函数允许你在不同的阶段执行代码，从而能够处理一些特定的逻辑，比如在创建阶段初始化数据、在挂载阶段发起数据请求、在更新阶段执行一些计算或请求等。通过对这些生命周期的合理利用，可以更好地控制和管理组件的行为和状态。

// 使用 Object.assign() 进行浅拷贝
this.form = Object.assign({}, row)

// 使用展开操作符 ... 进行浅拷贝
this.form = { ...row }

Vue中有很多表单事件可以用来监听表单元素上的交互事件，常见的表单事件包括：

1. input：监听输入框输入的事件，包括键盘输入和复制粘贴操作；

2. change：监听表单元素的值改变的事件，例如下拉框、单选框或复选框的选择；

3. submit：监听表单提交时的事件；

4. blur：在一个元素失去焦点时触发该事件，例如离开输入框；

5. focus：在一个元素获得焦点时触发该事件，例如标签被点击或通过Tab键移动到元素上。

与这些事件相对应，Vue也提供了对应的事件处理函数，你可以在Vue组件中使用这些事件的处理函数来响应用户的操作。下面是一些示例：

<template>
  <div>
    <input v-model="message" @input="inputHandler" type="text">
    <span>输入内容: {{ message }}</span>

    <select v-model="selected" @change="changeHandler">
      <option value="A">A</option>
      <option value="B">B</option>
      <option value="C">C</option>
    </select>
    <span>选择的内容: {{ selected }}</span>

    <form @submit.prevent="submitHandler">
      <input type="text">
      <button type="submit">提交</button>
    </form>

    <input type="text" @blur="blurHandler">
    <input type="text" @focus="focusHandler">
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '',
      selected: ''
    }
  },
  methods: {
    inputHandler: function(event) {
      console.log(event.target.value); //input值发生改变执行
    },
    changeHandler: function(event) {
      console.log(event.target.value);
    },
    submitHandler: function() {
      console.log('提交表单');
    },
    blurHandler: function() {
      console.log('失去焦点');
    },
    focusHandler: function() {
      console.log('获得焦点');
    }
  }
}
</script>

注册自定义指令，全局可用，可以自己写指令里面的逻辑 directive使用方法

1.在main.js中

Vue.directive("border", {
  inserted(dom, val) {
    console.log(dom, val);
  }
})

2.dom代表当前dom节点，val代表传入的值 v-border="3"

3.使用方法 v-border 可传入参数 v-border="3"

<p v-border="3">{{ 8 | twoZero }}</p>

当组件用的地方比较多时，可以注册全局组件

1.注册方法，在main.js中 引入组件

import XzgButton from '@/components/XzgButton.vue'

2.挂在到全局

Vue.component("XzgButton", XzgButton)

在mian.js 中 注册全局过滤器，需要的页面调用即可使用，需要2个参数，参数一，过滤去名字，参数二:形参

Vue.filter("zeo", (num) => {
  return num < 10 ? '0' + num : num
})

使用：

<p>{{ 8 | zeo }}</p>

返回结果: 08