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

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

调用接口出现 Netword Error 表示未授权

解决办法:
1.检查网络是否错误
2.检查接口名，请求方式，请求参数是否正确
3.以上都无错误，表示接口授权问题

宽度计算属性

width: calc(100% + 43px);

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

在标签上添加ref=名字

<p ref="p">一个段落</p>

获取通过$refs ,获取全部this.$refs ，获取单个加标签名this.$refs.p

    mounted() {
        console.log(this.$refs);
        console.log(this.$refs.p);
    },