尚硅谷vue2学习笔记

最新推荐文章于 2024-04-25 14:39:49 发布

最爱可口可乐

最新推荐文章于 2024-04-25 14:39:49 发布

阅读量335

点赞数

文章标签：学习 vue.js javascript

本文链接：https://blog.csdn.net/huangjinghui66/article/details/127451876

版权

vue详细教程

数据样式

像

这样的标题标签里获取数据为{{message}}

这样的url只是一个普通的a标签，href获取的是url

而当成为

这样写在vue可以识别url，就去data的return里找数据

数据绑定

v-bind:value这种属性只能单向绑定数据，改变数据需从data的name值改变，

而v-model：value这种属性可以双行绑定和传输数据，从用户输入表单的值进行改变

v-bind和v-model的缩写不同v-bind：value的缩写为：value

而v-model：value的缩写为v-model

el和data

el的两种写法：

<div id="root"></div>

第一种：

new Vue（{

el：'#root',

data:{

name:"}）

第二种：定义一个名把它包裹起来

const v=new Vue（{

data:{

name:""
}
    
}）

v.$mount('#root') 而$mount就和el一样

object.defineProperty

该函数有三个传参值第一个是你的数组变量

第二个是数组里的变量第三个是值value为多少

bject.defineProperty(person,“age”,{
value:18,

enumber:ture,控制属性是否枚举，就是遍历，默认值都是false

writable：ture 控制属性是否可以被修改

configurable：ture  控制属性是否可以被删除

当有人读取preson的age属性get函数就会被调用 返回值就是age的值

get：function（） {

  return number }

当有人修改person的age属性值set函数就会被调用 修改的值传到value

set（value）{

number=value}}

数据代理

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oAECdXm9-1666348994749)(C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\image-20220717094751022.png)]

定义的data就传到vm身上就是_data，这就是数据代理vm帮助data代理实现数据的显示和读取，object.defineProperty函数中的get和set可以修改data

事件绑定

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-J6E2ejVD-1666348994751)(C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\image-20220717103624397.png)]

绑定的事件传参是在函数名后面直接加（）放入想传进去的参数，加$event就可以保留evnet的事件

事件的基本使用:
1.使用v-onl:xxx或@xxx绑定事件，其中xxx是事件名;

2.事件的回调需要配置在methods对象中，最终会在vm 上;
3.methods中配置的函数,不要用箭头函数!否则this就不是vm了;
4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或组件实例对象;5.@click="demo”和@click="demo($event)”效果一致，但后者可以传参;

事件修饰符

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FODNsA49-1666348994751)(C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\image-20220717104328833.png)]

prevent阻止页面跳转等功能

stop阻止子元素冒泡到父元素

once 触发一次就不可以在触发了

self和stop差不多也可以不让冒泡

passive立即执行不用等函数的东西执行完才可以自己执行

写法1：

<button @click="show">点击</button>

 methods:{
show(e){
e.prevent()}}

写法2：

<button @click.prevent="show">点击</button>

键盘事件

vue中常用按键别名：

回车=>enter

删除=>delete

退出=>esc

空格=>space

换行=>tab（特殊，需要配合keydown使用）

上=>up

下=>down

左left有right

CapsLock是双字母，写法为caps-lock

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5NDsAuNz-1666348994752)(C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\image-20220717220456149.png)]

1系统按键如果配合keyup使用必须要加一个字母比如Ctrl+y，ctrl+s

而如果配合keydown就不需要任何东西

2在vue中我们可以去自己定义一个按键按钮

用vue.config.keyCodes.自定义键名=键码

计算属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vw17ziDN-1666348994752)(C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\image-20220718160337776.png)]

和object.defineProperty函数一样都有get和set函数功能也是一样的

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-68dO72w6-1666348994753)(C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\image-20220718163030538.png)]

计算属性比methods的好处在于有缓存，效率高，

computed计算属性调用时不需要括号（）而methods需要

计算属性返回return一个值

监视事件

写个转换天气的语句：

先用methods和computed方法写

body模块：

<div id="root">
        <h2>今天天气很{{info}}</h2>
        <button @click="change">切换天气</button>
    </div>

script模块：

<script>
    new Vue({
        el: '#root',
        data: {
            isHot: true
        },
        computed: {
            info() {
                return this.isHot ? '炎热' : '凉爽'
            }
        },
        methods: {
            change() {
                this.isHot = !this.isHot
            }
        },
    })
</script>

另一种写法：

<button @click=“isHot=!isHot”>切换天气在click中不仅仅可以写函数，还可以写简单的语句（不建议这样写）可以省去methods方法

用监视事件来完成功能先用watch

watch: {


      immediate: true, //初始时调用一下isHot

      isHot: {

        handler(newvalue, oldvalue) {

          console.log("isHot被修改了", newvalue, oldvalue)

        }

      }

    }
</script>

第二用$watch

 <script>vm.$watch('isHot', {


    immediate: true,

    handler(newvalue, oldvalue) {

      console.log("isHot被修改了", newvalue, oldvalue)

    }

  })</script>

深度监视

为什么需要深度监视

egg：

我在data：{

number：{

a：2，

b: 3，

}

因为在number里面还有a和b如果需要单独监视a和b就需要深度监视

写法：只需在number监视中deep：ture深入的

watch: {

     number: {

        deep:ture,

        handler(newvalue, oldvalue) {

          console.log("isHot被修改了", newvalue, oldvalue)

        }

      }

    }

还可以只写number的a

watch: {

    ' number.a': {

        deep:ture,

        handler(newvalue, oldvalue) {

          console.log("isHot被修改了", newvalue, oldvalue)

        }

      }

    }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5wFI5Lei-1666348994754)(C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\image-20220718184103591.png)]

原因是因为Vue自身是可以检测对象内部值得改变，但是Vue提供的watch默认不可以

计算属性vs监视属性的对比

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OzwU4lNt-1666348994755)(C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\image-20220718201921202.png)]

watch可以进行异步操作，比如定时器的回调函数，原则：在不被Vue所管理的函数最后一定要写成箭头函数

this的指向才是Vue，同样在Vue管理的函数一定要使用普通函数

绑定class样式

class="nomral"这是普通的class样式

:class="special"动态值所以可以操作Vue来改变class样式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-U8GHehCy-1666348994756)(C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\image-20220718204246316.png)]

style样式绑定和class一样的

条件渲染

<div v-show="fasle">v-show判断显示</div>

v-show在Vue可以通过display="none"来把页面标签隐藏

v-if也可以，而v-if建议在来回切换频率低的情况下，v-show建议频率高的情况下使用

在三个条件语句相同时我们可以这样写

<div v-if="n==1">
         <h2>条件一样</h2>
         <h2>条件一样</h2>
         <h2>条件一样</h2>
    </div>

但是这样写有缺点，h2被div包裹着css样式可能用不了，因此我们把div改成template,但是templae只能和v-if使用，

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-trBhiwzE-1666348994756)(C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\image-20220718210403179.png)]

列表渲染

<ul>

    <li v-for="(value,index) in persons" :key="index"></li>

  </ul>

data:{

  persons:[

 {id:'01',

name:'张飞‘，

age:'19'},

{

id:'02',

name:'李四‘，

age:'19'},

]

}

利用v-for遍历persons的所有value就是每一个{}，index就是索引值，通常：key="index"来表示索引值

用index和p.idd当:key的区别

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6vKDpxCT-1666348994757)(C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\image-20220719195134010.png)]

用：key=“index”时的bug就是key要进行DOM对比算法input框的文字会复用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JETiyazw-1666348994758)(C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\image-20220719195947756.png)]

列表过滤

用input表单来过滤数组元素

用两种监视（watch）和计算（computed）完成对比

  <div id="root">
        <h2>人员列表</h2>
        <input type="text" placeholder="请输入" v-model="keyword">
        <ul>
            <li v-for="(p,index) in filpersons" :key="p.id">
                {{p.name}}-{{p.age}}
            </li>
        </ul>
    </div>

watch代码

 new Vue({

    el: '#root',

    data: {

      keyword: '',

      persons: [{

        id: '01',

        name: '马冬梅',

        age: '14'

      }, {

        id: '02',

        name: '周冬雨',

        age: '18'

      }],

      filpersons: []

    },
   watch: {
            // keyword(val) {
            //     this.filterpersons = this.persons.filter((p) => {
            //         return p.name.indexOf(val) !== -1
            //     })
            // } //简写有bug，就是页面刚刷新，因为没执行函数所以filterpersons数组为空，因为标准函数有immediate,所以应该写标准函数

            keyword: {
                 immediate: ture,
                handler(val) {
                    this.filterpersons = this.persons.filter((p) => {
                        return p.name.indexOf(val) !== -1
                    })
                }
            }
}

computed代码：

computed: {

      filpersons() {

        return this.persons.filter((p) => {

          return p.name.indexOf(this.keyword) !== -1

        })

      }

    }

  })

列表排序

computed: {

      filpersons() {

        const arr = this.persons.filter((p) => {

          return p.name.indexOf(this.keyword) !== -1

        })

        if (this.sortType) {

          arr.sort((p1, p2) => {

            return this.sorttype === 1 ? p2.age - p1.age : p1.age - p2.age

          })

        }

        return arr

      }

    }

vueSet中数据代理用api来添加对象

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0ASpsJSe-1666348994758)(C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\image-20220720210924393.png)]

Vue监视数据总结

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PCBaCNr4-1666348994759)(C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\image-20220721112512512.png)]

代码：

 new Vue({

    el: '#root',

    data: {

      student: {

        name: 'tom',

        age: 18,

        hobby: ['抽烟', '喝酒', '烫头'],

        friends: [{

          name: 'jerry',

          age: 15

        }, {

          name: 'tony',

          age: 40

        }]

      }

    },

    methods: {

      addSex() {

        Vue.set(this.student, 'sex', '男')

        Vue.$set(this.student, 'sex', '男')

      },

      addfriends() {

        this.student.friends.unshift({

          name: 'jack',

          age: 19

        })

      },

      updataname() {

        this.student.friends[0].name = '张三'

      },

      addhobby() {

        this.student.hobby.push('学习')

      },

      updatahobby() {

        // this.student.hobby.splice(0, 1, "开车")

        Vue.set(this.student.hobby, 0, '开车')

      }
    }

  })

收集表格数据

<script>
    new Vue({
        el: '#root',
        data: {
            account: '',
            password: '',
            age: 18,
            sex: 'female',
            hobby: [],
            city: 'bei',
        }
    })
</script

<script>
    new Vue({
        el: '#root',
        data: {
            account: '',
            password: '',
            age: 18,
            sex: 'female',
            hobby: [],
            city: 'bei',
        }
    })
</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-abSnBWtf-1666348994760)(C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\image-20220721155045165.png)]

表单数据收集

model收集的是value值，因此在配置标签时要给value值，没有配置就是默认checked（布尔值）

过滤器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HwyTuSmB-1666348994761)(C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\image-20220721203546029.png)]

过滤器就是对数据进行简单的处理比如：在电商金额1999可以改成1,999

 <!-- 过滤器 -->

    <h3>{{time | timeFormat}}</h3>

    <!-- 过滤器传参 -->

    <h3>{{time | timeFormat('YYYY-MM-DD')}}</h3>

过滤器传参的第一个永远是value（time）后面可以跟一些格式处理

内置指令

用法就是在页面接管时,v-cloak自动消除,所以为了防止页面没有接收js,导致页面没被渲染,就把v-cloak的display=none

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6hdhvzSX-1666348994761)(C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\image-20220721212245052.png)]

v-once在页面渲染结束后就不会再变了（静态内容）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hHCCiO51-1666348994762)(C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\image-20220721212709363.png)]

自定义指令

1自定义v-big指令可以自己改写函数

 <h2>放大后的值为<span v-big="n"></span></h2>

2v-bind自定义指令

  <input type="text" v-fbind:value="n">

  directives: {
            big(element, b) {
                element.innerText = b.value * 10
            },
            fbind: {
                bind(element, b) {
                    element.value = b.value
                },
                inserted(element, b) {
                    element.focus()
                },
                update(element, b) {
                    element.value = b.value
                }
            }
        }

期中bind就是在绑定页面的元素时刻

inserted是在页面完成后的动作

update是每次页面更新改变

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EjNlqXcf-1666348994763)(C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\image-20220722161807119.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fjO1LCCt-1666348994763)(C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\image-20220722192100358.png)]

生命周期

生命周期:
1.又名:生命周期回调函数、生命周期函数、生命周期钩子。

2.是什么:Vue在关键时刻帮我们调用的一些特殊名称的函数。
3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。4.生命周期函数中的this指向是vm或组件实例对象。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JL6n1Wz4-1666348994764)(C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\image-20220722194715766.png)]

Vue组件

非单文件组件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sjACpJlW-1666348994765)(C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\image-20220723202445646.png)]

在使用组件的步骤为

1定义组件

  const student = Vue.extend({
        // el:'root' 组件定义时，一定不要配置el，因为每个组件有vm领导，vm有资格定义，去服务那个容器
        template: `
        <div>    <span>{{studentname}}</span>
        <span>{{studentadress}}   </span>>
        </div>
        `,
        data() {
            return {
                studentname: '小明',
                studentadress: '新蔡'
            }
        }
    })

用const进行局部定义Vue.extend(),template:里面写着组件中的html一些标签，而组件里data用函数的形式定义在于可以提高组件的复用性，让每次调用的函数都是新数据，保证数据不会出错

2注册组件

通常注册组件用components方式局部注册就是在Vue中调用components,全局注册Vue.component(‘组件名’，组件)

3编写组件标签

<school></school>

创建脚手架（cLi）

安装Node.js

安装cnpm(镜像)

由于有些npm有些资源被屏蔽或者是国外资源的原因，经常会导致用npm安装依赖包的时候失败，
所以还需要npm的国内镜像—cnpm。
    在命令行中输入 npm install -g cnpm –registry=http://registry.npm.taobao.org 。

安装vue-cli工具

    在命令行中运行命令 npm install -g vue-cli ，然后等待安装完成。

创建vue

选择需要用的文件夹下进行创建vue，执行vue create <项目名>

创建成功提醒执行运行

cd <项目名>

npm run serve

运行成功

rander函数

new Vue({ 
el: '#app',  render: h => h(App)
})

Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中，真的需要 JavaScript 的完全编程的能力。这时可以用渲染函数，它比模板更接近编译器。

rander函数即渲染函数，它是个函数，它的参数 createElement也是个函数。

render: function (createElement) {
return createElement(App) 
}
render: function (createElement) {
return createElement('h1',你好啊！) 
}

ref属性

1.被用来给元素或子组件注册引用信息(id的替代者)
2.应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象(vc)3.使用方式:
打标识:

…

或获取: this.$refs.xxx

ref就是在Vue当作id来引入信息的

mixin属性

mixin属性叫混合或混入，就是当两个或者多个以上组件有相同的属性时，我们就可以把相同的属性和函数写在一个mixin.js中然后每个组件进行import引入

方法：

<script>
	import {mixin} from '../mixin.js'
	export default{
		name:'maNage',
		data(){
			return {
				name:'张三',
				age:'18'
			}
		},
		mixins:[mixin]
	}
</script>

引入方法

import {mixin} from ‘…/mixin.js’

mixin属性

mixins:[mixin]数组可以写多个方法属性

mixin.js

export const mixin={
	methods:{
		show(){
			alert(this.name)
		}	
	}
}

插件属性

plug.js 是一个对象{}

const plug={

install(vue){

  传参vue就是vm，因此我们可以进行用vm增添属性和方法

  }

}
//在这  export default plug
定义对象后，我们还需要暴露(这里是默认暴露)还可以在下面
export default{

install(vue){

     传参vue就是vm，因此我们可以进行用vm增添属性和方法

  }

}

在App.vue中引入

import plug from './plug.js'

vue.use(plug)

scoped属性

因为vue中都是组件进行搭建的，而vue中有html script style 这导致vue每个组件组合后，style中的样式可能会冲突

因此我们可以定义局部样式

作用:让样式在局部生效。防止冲突-写法:

组件的自定义事件

1.各种组件间通信的方式，适用于:子组件===>父组件
⒉使用场景:A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中)。3.绑定自定义事件:
1.第一种方式，在父组件中:Demo @atguigu=“test”/>或2.第二种方式，在父组件中:
… …
mounted(){
this. $re f s . xxx .$ on( 'atguigu ’ ,this.test)
3.若想让自定义事件只能触发一次，可以使用once修饰符，或 $o n ce 方法。 4. 触发自定义事件 : t hi s .$ emit( ’ atguigu ',数据)
5.解绑自定义事件this.$off( " atguigu ')
6.组件上也可以绑定原生DOM事件，需要使用native修饰符。
7.注意:通过this.srefs.xx. son(‘atguigu’,回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出间题!|

全局事件总线

创建全局事件总线x

方法一：

// const Dome = Vue.extend({})
// const d =new Dome()   太麻烦，简单的方法就是其实在vm身上也有emit
// Vue.prototype.x = d

方法二：

new Vue({
	render: h => h(App),
	beforeCreate(){
		Vue.prototype.$bus = this //全局事件总线 bus
	}
}).$mount('#app')

使用全局事件总线

	methods:{
			send(){
				this.$bus.$emit('hello',66)
			}
		}

接收全局事件

mounted(){
			this.$bus.$on('hello',(data)=>{
				console.log('我是学校我收到信息了',data);
			})
或
mouted(){
    this.$bus.$on('hello',this.dome//数据)
}

消息订阅与发布(pubsub)

1.—种组件间通信的方式，适用于任意组件间通信。
2.使用步骤:
1.安装pubsub: npm i pubsub-js
2.引入: import pubsub from 'pubsub-js ’
3.接收数据:A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。
methods(){
demo(data){…}}
…lmounted(){
this.pid = pubsub.subscribe( 'xxx " ,this.demo)//订阅消息}
4.提供数据:pubsub.publish( ‘xxx’,数据)
5.最好在beforeDestroy钩子中，用PubSub.unsubscribe(pid)去<span style=“color :red”">取消订阅。

过渡动画

transition属性

name: string，用于自动生成 CSS 过渡类名。例如：name: ‘fade’ 将自动拓展为 .fade-enter，.fade-enter-active 等。默认类名为 “v”
appear: boolean，是否在初始渲染时使用过渡。默认为 false。
css: boolean，是否使用 CSS 过渡类。默认为 true。如果设置为 false，将只通过组件事件触发注册的 JavaScript 钩子。
type: string，指定过渡事件类型，侦听过渡何时结束。有效值为 “transition” 和 “animation”。默认 Vue.js 将自动检测出持续时间长的为过渡事件类型。
mode: string，控制离开/进入过渡的时间序列。有效的模式有 “out-in” 和 “in-out”；默认同时进行。
duration: number | { enter: number, leave: number } 指定过渡的持续时间。默认情况下，Vue 会等待过渡所在根元素的第一个 transitionend 或 animationend 事件。

	<div>
		<button @click="isshow=!isshow">显示/隐藏</button>
	<transition name="hello">
			<h3 v-show="isshow" >你好</h3>
	</transition>
	</div>
<script>
	export default {
		name: 'MyComponent',
		data() {
			return {
				isshow :true
			}
		}
	}
</script>

styletransition模块

<style>
	h3{
		background-color: pink;
		
	}
	/* 进入的起点就是离开的终点所以可以写在一起 */
	.hello-enter,.hello-leave-to{
		transform: translateX(-100%);
	}
	
	.hello-enter-to,.hello-leave{
		transform: translateX(0);
	}
	.hello-enter-active,.hello-leave-active{
		transition: 1s linear;
	}
	/* .hello-leave{
		transform: translateX(0);
	}
	.hello-leave-to{
		transform: translateX(-100%);
	} */
</style>

过渡多个元素

	<div>
		<button @click="isshow=!isshow">显示/隐藏</button>
	<transition-group name="hello">
		<h3 v-show="isshow" key="1"  >你好</h3>
		<h3 v-show="isshow" key="2" >你好</h3>
	</transition-group>
	</div>

配置代理

请求方法：

<script>
	import axois from 'axios'
	export default {
		name: 'App',
		methods: {
			getstudent() {
				axois.get('http://localhost:8081/test/students').then(  test是方法二，为了防止前端已有的资源不会请求服务器资源
					response => {
						console.log('请求成功', response.data);
					},
					error => {
						console.log('请求失败', error.message);
					}
				)
			}
		}
	}
</script>

方法1：

 devServer: {
     proxy: 'http://localhost:5000'
    }

说明:
1.优点:配置简单，请求资源时直接发给前端(8080)即可。
2.缺点:不能配置多个代理，不能灵活的控制请求是否走代理。
3.工作方式:若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器
(优先匹配前端资源) 就是如果在脚手架中有你找的资源，那么就会请求已有的资源，不会请求服务器的资源

方法二：

    devServer: {
       proxy: {
         '/test': {//开头路径
           target: 'http://localhost:5000', //基础路径
		   pathRewrite:{'^/test':''} 把请求路线的目录改为空
            ws: true,
           changeOrigin: true //用于控制请求host true就是5000 false为8081
         },
         // '/foo': {
         //   target: '<other_url>'
         // }
       }

vuex

vuex安装

npm install vuex

为了防止不匹配，我们在做vue2时下载npm install vuex@3，做vue3项目时下载插件npm install vuex@4

我们需要在某个地方存放我们的Vuex代码：这里，我们先创建一个文件夹store，并且在其中创建一个index.js文件。在index.js文件中写入如下代码：

//该文件用于创建Vuex中最为核心的store
//引入vuex
import Vue from 'vue'
import vuex from 'vuex'

Vue.use(vuex)
//准备actions--用于响应组件中的动作
const actions = {
	jia(context, value) {
		// console.log(context,value);
		context.commit('JIA', value)
	},
	jian(context, value) {
		// console.log(context,value);
		context.commit('JIAN', value)
	},
	jiaodd(context, value) {
		console.log(context, value);
		if (context.state.sum % 2) {
			context.commit('JIA', value)
		}
	},
	jiawait(context, value) {
		// console.log(context,value);
		setTimeout(() => {
			context.commit('JIA', value)
		}, 500)
	},

}
//准备mutation--用于响应组件中的动作
const mutations = {
	JIA(state, value) {
		// console.log(state, value);
		state.sum += value
	},
	JIAN(state, value) {
		console.log(state, value);
		state.sum -= value
	}
}
//准备state--用于响应组件中的动作
const state = {
	sum: 0
}
const getters= {
	bigsum(state) {
		return state.sum * 10
	}
}

export default new vuex.Store({
	actions,
	mutations,
	state,
	getters
})

在main.js文件中我们需要引入store文件中的index.js

代码如下：

import Vue from 'vue'
import App from './App.vue'
import router from "./router";
import store  from "./store";//简写方式 如果store文件就一个index.js，那么就不用在引入index.js了

Vue.config.productionTip = false

//为什么需要挂载  store  Vue会修改原型,为所有组件添加一个全局的对象


new Vue({
  render: h => h(App),
  router,
  store
}).$mount('#app')

vuex的作用工作图

vuex-map函数用法

state全局使用方法直接使用this.$store.state.sum

用插值语法{{$store.state.sum}}

map函数引用

import mapState from 'vuex'



computed:{
			// sum(){
			// 	return this.$store.state.sum
			// },
			// bigsum(){
			// 	return this.$store.getters.bigsum
			// },
			//借助mapState生成计算属性,从state中读取数据。（对象写法)
			...mapState({sum:'sum'}),
			//借助mapState生成计算属性,从state中读取数据。（数组写法更简单)
			...mapState(['sum']),
			//mapGetters生产计算属性，从getters中读取数值
			...mapGetters({bigsum:'bigsum'})
		},

用mapmapState,mapGetters函数就相当于计算属性生成带有函数的返回值(其主要作用就是可以读取state和getters中的数值，并进行返回给原组件)

mapMutations和mapActions的用法

methods: {
             程序员自己写的函数
			// add() {
			// 	// this.$store.dispatch('jia', this.n)
			// 	this.$store.commit('JIA',this.n)
			// },
			// sub() {
			// 	// this.$store.dispatch('jian', this.n)
			// 	this.$store.commit('JIAN',this.n)
			// },
			/* add(){
			this.$store.commit( 'JIA' ,this.n)}，*/
			// 如果在button按钮中点击事件没有传参,@click="add"那么用mapMutations函数就会把把add
			// 变成带有value值自动传参,而value在没有声明传参时就是默认是event,那么就是一个事件
			/*add(event){
			this.$store.commit( ' JIA ' ,value)}，*/
			// 借助mapMutations可以生成方法,方法可以调用commit函数去联系mutations
			...mapMutations({
				add: 'JIA',
				sub: 'JIAN'
			}),
			// addOdd() {
			// 	// this.$store.dispatch('jiaodd', this.n)
			// },
			// addwait() {
			// 	this.$store.dispatch('jiawait', this.n)
			// },
			...mapActions({addOdd:'jianodd',addwait:'jiawait'})
		},