vue基础

1.Vue的代理

代理文件的配置，不同版本的vue项目的配置文件在项目中的位置不一样，但是内容是没差多少的

/service/': {
    target: 'http://10.9.237.162:8888',
}
host: 'localhost',//该项目启动时的域名（本地启动就是本机，直接写ip也是可以的）
port: 6688, //该项目启动时监听的端口

一个应用监听的端口，表示该应用与外界通信就是通过这个端口，不管是相应外界的请求，还是向外界发送请求都是通过这个端口

1.1.对vue代理的理解

举个例子
当前端项目发出请求：http://localhost:6688/service/queryData.do时，因为代理中配置了/service的缘故，所以，该请求会被代理到http://10.9.237.162:8888/service/queryData.do，简单来说，如果url中包含了代理中配置的“路径”，那么url中的ip和端口就会被替换成代理的ip（域名）和端口。

2.返回值的处理问题

 loadPage: (params: Object) => Axios.get(`//***/queryKaData.do`, {params, withCredentials: false}),

当使用前端使用Axios发送类似异步请求时，会拿到后端的一个返回对象

let resResult = await API.report.loadPage(params);

需要注意的是，返回值是一个AxiosResponse类型，这样的对象我们无法处理，并拿到所需要的数据。
比如说，该对象中（后台返回的对象）有一个kaCostShares类型的属性，此时我想要拿到这个属性的值，我直接resResult.kaCostShares，这个时候，编译器会直接报错，语法不允许，这样就不能拿到自己想要的数据。
解决这个问题的方法很简单，我们只需要在接收返回值类型的时候，指定返回值类型为any就行了，可以将上面那个改为下面这个

let resResult:any = await API.report.loadPage(params);

这样，修改完之后，我们就可以使用resResult.kaCostShares这样的方式来拿到自己想要的数据

3.对组件中this的理解

this，指代的是本组件，本组件内部定义的方法或者属性才可以使用，外部引入的组件，直接使用引入时的组件名称就行了，不要使用this，不然会报错
注意：计算属性中如果要引入外部的组件，就要使用this才能监听到变化，不知道是因为啥

4.数据的双向绑定

注意：
想要进行双向绑定的数据一定要要data中进行定义，否则会不起作用

5.slot

插槽模板是slot，它是一个空壳子，因为它的显示与隐藏以及最后用什么样的html模板显示由父组件控制。但是插槽显示的位置确由子组件自身决定，slot写在组件template的什么位置，父组件传过来的模板将来就显示在什么位置。

5.1.默认插槽

单个插槽，单个插槽是vue的官方叫法，但是其实也可以叫它默认插槽，或者与具名插槽相对，我们可以叫它匿名插槽。因为它不用设置name属性。
单个插槽可以放置在组件的任意位置，但是就像它的名字一样，一个组件中只能有一个该类插槽。相对应的，具名插槽就可以有很多个，只要名字（name属性）不同就可以了。

6.监听器

6.1.watch

watch可以监听某个变量的变化，当这个变量发生变化是，会触发watch中定义的以这个变量名命名的函数。

data:{
        a:1,
        b:{
            c:1
        }
    },
    watch:{
        a(val, oldVal){//普通的watch监听
            console.log("a: "+val, oldVal);
        },
        b:{//深度监听，可监听到对象、数组的变化
            handler(val, oldVal){
                console.log("b.c: "+val.c, oldVal.c);//但是这两个值打印出来却都是一样的
            },
            deep:true
        }
    }

注意：watch不能监听对象的变化；如果使用watch来监听对象，不能监听到对象的变化；若想监听对象的变化，watch也可以实现，在以变量名命名的函数中添加deep:true这个属性。但是，即使能监听到对象的变化，但是以变量名命名的函数中拿到的还是旧的对象值，新的对象的已经变化的属性值是拿不到的。如果想要实现这个功能，可以将watch与compute结合起来使用。

7.计算属性

compute

将compute与watch相结合，来实现监听对象中属性的变化

data:{
        b:{
            c:1
        }
    },
    watch:{
        newValue(val, oldVal){//监听newValue的变化，相当于是监听了对象b的属性c的变化
            console.log("b.c: "+val, oldVal);
        }
    },
    computed: {//监听对象b的属性c的变化，并将值赋值给newValue
    　　newValue() {
    　　　　return this.b.c
    　　}
    }

8.父子组件的传值

8.1.基本概念

在vue中，父子组件的关系可以总结为props向下传递，事件向上传递。父组件通过prop给子组件下发数据，子组件通过事件给父组件发送信息。

8.2.父组件向子组件传值

首先创建子组件，并定义props属性

<template>
  <div>
    <h1>{{this.msg}}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

父组件

<template>
  <div id="app">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

页面显示结果

可以看出，父组件通过子组件的mes属性，将自己中定义的数据传递给了子组件

8.3.子组件向父组件传值

首先在父组件中自定义事件，并为该事件绑定函数reciveSonData

//父组件中使用@加上事件名来自定义事件
<HelloWorld msg="Welcome to Your Vue.js App" @parentEven="reciveSonData"/>
<h1>{{sonData}}</h1>
...
data(){
    return {
      sonData: '',
    }
  },
//自定义事件绑定的函数
methods:{
    //这里面的val是从子组件中传递过来的值
    reciveSonData(val){
      this.sonData=val;
    },
  },

子组件，定义触发向父组件中传递数据的点击事件，并绑定函数

<button @click="sendData">发送数据到父组件</button>
...
methods:{
    sendData(){
     //使用这个来触发父组件中的自定义事件parentEven
      this.$emit('parentEven','我是子组件的数据');
    },
  },

结果
点击页面“发送数据到父组件”按钮

出现结果

实现原理：
（1）父组件向子组件中传递值，通过子组件中定义props的属性，来完成的；
（2）子组件中向父组件中传递值是通过事件来完成的；在父组件中定义事件，然后通过this.$emit(事件名,参数值);来触发父组件中定义的事件，并向该事件绑定的函数中传递子组件的值

8.4.父（子）组件获得子（父）组件对象

this.$parent:这个就拿到了父组件对象
//定义子组件，并添加ref属性
<upload-excel-file ref="uploadFile"></upload-excel-file>
this.$refs.uploadFile:这个就拿到了子组件对象

组件中的ref属性：ref属性就类似html原生的clss属性或者id属性都是用来标识对象的

拿到了父（子）组件中的对象之后，就可以访问父（子）组件中的所有内容

9.通用标签属性ref

9.1.ref作用

在没有学习Vue之前，我们实现直接操作页面上的DOM元素都是通过JS/jQuery，因为jQuery对DOM元素的操作非常的方便 但是学习了vue之后 就比jquery更方便

• 使用ref获取页面DOM元素
• 使用 ref获取子组件对象
  简单来说，ref就像id或者class属性一样，用来标识或者是获取DOM对象

<el-input ref="addBigReturnNo"  v-model="bigReturnNos" />
获取input对象：this.$refs.addBigReturnNo

在获取到DOM对象之后，就可以进一步对DOM对象做出各种操作

10.Vue路由

//路由中的参数（就是"?"后面的那些数据）
this.$route.query.参数名
//当前组件的路由，也就是当前组件的位置（浏览器地址栏的东西）
this.$route

11.属性赋值

如果是data中定义的非对象类型的赋值，直接"this.属性名"就可以了，如果要是对象类型，或者数组类型（数组中存的是对象类型），就要使用下面的赋值方式

data(){
	return{
		form:{
			id: '',
			name: ''
		}
	}
}
//给id和name赋值时，要使用下面的方式
this.$set(this.form,'id',100);
this.$set(this.form,'name','张三');

12.数据绑定

注意：

vue中v-model绑定的值，必须要再data中进行定义，否则，无法进行双向绑定；数组是个特殊，即使数组在data中进行了定义，也无法使用赋值的方式进行双向数据绑定，要使用this.$set()

举个例子：

数组：
arr:[];
this.$set(this.arr,0,'aa');
this.$set(this.arr,1,'bb');
非数组：
<el-input v-model="ruleForm.detailAddress" placeholder="请输入详细地址" />

如果ruleForm.detailAddress没有再data中进行定义，那么一旦ruleForm.detailAddress被赋值，页面中的文本框就无法进行编辑（删除、修改）

13.Vue中的字符串处理

13.1字符串拼接

在使用select的el-option选项框的时候有些值需要拼接字符串

 <el-option
                    v-for="item in dialogRegionNoOptions"
                    :key="`${item.regionNo},${item.regionName}`"
                    :label="item.regionName"
                    :value="`${item.regionNo},${item.regionName}`"
                  />

如果直接使用"+"进行拼接，会出现错误，使用``加上$可以实现字符串拼接功能；
**启发：**其他类型场景也可以使用这种方式进行拼接