一、计算属性

例子：

注意：调用计算属性时，不可以带括号，那样调用的就是方法，如：以下调用fullName时不可funnName()

		<div id="root">姓：<input type="text" v-model="firstName"> <br/><br/>名：<input type="text" v-model="lastName"> <br/><br/>测试：<input type="text" v-model="x"> <br/><br/>全名：<span>{{fullName}}</span> <br/><br/><!-- 全名：<span>{{fullName}}</span> <br/><br/>  //在调用fullName就是从内存里面取了全名：<span>{{fullName}}</span> <br/><br/>全名：<span>{{fullName}}</span> --></div>data:{firstName:'张',lastName:'三',x:'你好'}computed:{fullName:{//get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值//get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时。get(){console.log('get被调用了')// console.log(this) //此处的this是vmreturn this.firstName + '-' + this.lastName},//set什么时候调用? 当fullName被修改时。set(value){console.log('set',value)const arr = value.split('-')this.firstName = arr[0]this.lastName = arr[1]}}}

简写：

二、vueX

1.安装

vue默认vue3版本，vuex默认vuex4版本，vuex4只能在vue3中使用，在vue2中能使用vuex3,那么不能默认下载最新的版本
如果你出现了版本的问题只需要 npm install vuex@3 --save 重新安装对应版本就好的

import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({state: {token: ''},mutations: {updateToken (state, newToken) {state.token = newToken}}
})
export default store

2.在main.js中

import store from '@/store'
new Vue({router,store,  //<<<<<<--------这里render: h => h(App)
}).$mount('#app')

3.src/store/index.js
注意大写

import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({state: {count: 123},getters: {},mutations: {addCount (state,count) {state.count += count}},actions: {},modules: {}
})

2.Store => state

2.1获取 store仓库：

 1.Vue模板中获取 this.$store2.js文件中获取 import 导入 store

2.2获取状态state数据：

模板中：     {{ $store.state.xxx }}
组件逻辑中：  this.$store.state.xxx
JS模块中：   store.state.xxx

 computed: {token(){return this.$store.state.count}}

每次都像这样一个个的提供计算属性, 太麻烦了,我们有没有简单的语法帮我们获取state中的值呢？

2.2通过辅助函数mapState 获取数据

1. 第一步：导入mapState (mapState是vuex中的一个函数)

import { mapState } from 'vuex'

2. 第二步：采用数组形式引入state属性

mapState(['count']) 

前两部代码类似于

count () {return this.$store.state.count
}

3. 第三步：利用展开运算符将导出的状态映射给计算属性

  computed: {...mapState(['count'])}

3.Store=>mutations

mutations是一个对象，对象中存放修改state的方法

3.1组件中提交

handle ( ) {this.$store.commit('addCount', 10)
}

小tips: 提交的参数只能是一个, 如果有多个参数要传, 可以传递一个对象

this.$store.commit('addCount', {count: 10
})

3.2通过辅助函数 mapMutations提交

import  { mapMutations } from 'vuex'
methods: {...mapMutations(['addCount'])
}

上面代码的含义是将mutations的方法导入了methods中，和参没关系，等价于

methods: {// commit(方法名, 载荷参数)addCount () {this.$store.commit('addCount')}}

3.3调用

<button @click="addCount">值+1</button>

4. Store=>actions

actions则负责进行异步操作
如: 一秒钟之后, 要给一个数 去修改state

4.1 定义actions

mutations: {changeCount (state, newCount) {state.count = newCount}
}
actions: {setAsyncCount (context, num) {// 一秒后, 给一个数, 去修改 numsetTimeout(() => {context.commit('changeCount', num)}, 1000)}
},

4.2 组件中通过dispatch调用

setAsyncCount () {this.$store.dispatch('setAsyncCount', 666)
}

4.3辅助函数 -mapActions

import { mapActions } from 'vuex'
methods: {...mapActions(['changeCountAction'])
}

上面代码的含义是将actions的方法导入了methods中，等价于

methods: {changeCountAction (n) {this.$store.dispatch('changeCountAction', n)},
}

4.4调用

<button @click="changeCountAction(200)">+异步</button>

5.Store=>getters

除了state之外，有时我们还需要从state中筛选出符合条件的一些数据，这些数据是依赖state的，此时会用到getters
例如，state中定义了list，为1-10的数组

state: {list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
}

组件中，需要显示所有大于5的数据，正常的方式，是需要list在组件中进行再一步的处理，但是getters可以帮助我们实现它

5.1定义getters

  getters: {// getters函数的第一个参数是 state// 必须要有返回值filterList:  state =>  state.list.filter(item => item > 5)}

5.2原始方式-$store

<div>{{ $store.getters.filterList }}</div>

5.3辅助函数 - mapGetters

computed: {...mapGetters(['filterList'])
}

5.4调用

 <div>{{ filterList }}</div>

6.小结

三、路由

1.引入

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

import Vue from 'vue'
import VueRouter from 'vue-router'Vue.use(VueRouter)const routes = [{path: '/',redirect: '/home'}, //重定向，默认打开是/然后跳转到 /home{ path: '/home',name: 'Home',component:() => import('../views/home.vue')},{ path: '*', component: () => import('@/views/error/error') } //放到最后
]const router = new VueRouter({mode:'history',  //  默认是hash history常用 会把路径中的#消除routes
})export default router

2.重定向

{ path: 匹配路径, redirect: 重定向到的路径 },
比如：
{ path:'/' ,redirect:'/home' }

3.404

routes: [...{ path: '*', component: NotFind } //最后一个]

4.Vue路由-模式设置

路由的路径看起来不自然, 有#，能否切成真正路径形式?

• hash路由(默认) 例如: http://localhost:8080/#/home
• history路由(常用) 例如: http://localhost:8080/home (以后上线需要服务器端支持，开发环境webpack给规避掉了history模式的问题)

const router = new VueRouter({mode:'histroy', //默认是hashroutes:[]
})

5.两种路由跳转方式

• path 路径跳转 （简易方便）
• name 命名路由跳转 (适合 path 路径长的场景)

5.1path路径跳转语法

简易方便

//简单写法
this.$router.push('路由路径')//完整写法
this.$router.push({path: '路由路径'
})

5.2path跳转方式

特点：适合 path 路径长的场景

{ name: '路由名', path: '/path/xxx', component: XXX }
跳转
this.$router.push({name: '路由名'
})

6.两种传参方式

① path 路径跳转传参

② name 命名路由跳转传参

6.1path路径跳转传参（query传参）

//简单写法
this.$router.push('/路径?参数名1=参数值1&参数2=参数值2')
//完整写法
this.$router.push({path: '/路径',query: {参数名1: '参数值1',参数名2: '参数值2'}
})

接受参数的方式依然是：$route.query.参数名

6.2path路径跳转传参（动态路由传参）

//简单写法
this.$router.push('/路径/参数值')
//完整写法
this.$router.push({path: '/路径/参数值'
})

接受参数的方式依然是：$route.params.参数值
注意： path不能配合params使用

7.嵌套（多级）路由

在一级路由下，配置children属性

const router = new VueRouter({routes: [{path: '/parent',component: Parent,-----------------------------------------------------| |   children:[|    //children中的配置项 跟一级路由中的配置项一模一样 |    {	path: 'son1',component: xxxx.vue },|    {	path: 'son2',component: xxxx.vue }|  ]|-----------------------------------------------------}]
})

注意：二级路由，或者说是子路由，路径不要 / 如上面的 son1、son2
上面的路由路径是：
/parent/son1
/parent/son2

四、插槽 官网讲的比较好

黑马的视频 作用域插槽讲的也不错

该页面假设你已经阅读过了组件基础。如果你还对组件不太了解，推荐你先阅读它。

在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和
slot-scope（elementUI中目前还在使用） 这两个目前已被废弃但未被移除且仍在文档中的 attribute。新语法的由来可查阅这份 RFC。

1.插槽内容

组件

<navigation-link url="/profile">Your Profile
</navigation-link>

插槽

<navigation-link><a v-bind:href="url" class="nav-link"><slot></slot></a>
<navigation-link>

最终渲染：当组件渲染的时候， 将会被替换为“Your Profile”

<navigation-link url="/profile"><a v-bind:href="url" class="nav-link">Your Profile</a>
<navigation-link>

2.后备内容

组件没有向插槽传递数据是，插槽有个默认的（后备的），不至于组件不会像插槽传数据

<solt>嘿嘿嘿，就知道你会不传递数据给我，这就是我的后备内容<slot>

3.具名插槽

就是有名字的插槽
上面使用插槽只使用了一个<slot><slot>所以不需要指定名称
而接下来的插槽是多个<slot><slot>标签, 并且为<slot>标签起名字<slot name="soltName">，如果不写默认名字为default，所以组件再向插槽传递数据时就要对号入座
组件在向插槽传递数据时，使用<template></template>标签包裹数据，在<template>标签中指定，要为那个插槽传递数据<template v-slot:soltName>向名为soltName插槽传递数据<template>
如果没有<template>标签包裹，那么会将组件标签中的所有数据，都会传递给名为defalut的插槽或者没命名的插槽

例子：
插槽：

<div class="container"><header><slot name="header"></slot></header><main><slot></slot></main><footer><slot name="footer"></slot></footer>
</div>

组件:

<base-layout><template v-slot:header><h1>Here might be a page title</h1></template><p>A paragraph for the main content.</p><p>And another one.</p>**上面两行等价于**<template v-slot:default><p>A paragraph for the main content.</p><p>And another one.</p></template><template v-slot:footer><p>Here's some contact info</p></template>
</base-layout>

渲染:

<div class="container"><header><h1>Here might be a page title</h1></header><main><p>A paragraph for the main content.</p><p>And another one.</p></main><footer><p>Here's some contact info</p></footer>
</div>

4.作用域插槽

自 2.6.0 起有所更新。已废弃的使用 slot-scope（目前Element UI还有用到）
作用域插槽：定义插槽的同时，是可以传递数据的，给插槽上可以绑定数据
比如：组件（父）给插槽（子）传递的是<button><button>标签，现在button需要用到父组件中的数据id，这可怎么办，所以在传递时将<button>和id一起传递给插槽（或者理解为：将<button>传递给插槽，将id传递给<button>），这就是作用域插槽，组件（父）中的数据在插槽（子）中被使用，id的作用域发生了变化，所以叫作用域插槽。
场景（下图）： 4.5.6是使用作用域插槽的步骤
1.父传子表格中的数据
2.利用默认插槽定制操作列
3.操作列再删除时，需要用到当前项的id（属于组件内部数据）

4. 向删除（插槽）绑定组件中的数据，数据以添加属性的方式传递

<slot :id="item.id" msg="测试文本"></slot>

5. 所有添加的属性，都会被收集到一个对象中，在组件使用时进行接收

{id: 3,msg: "测试文本"}

6. 在template，通过#插槽名=“obj”（v-slot:插槽名=“obj”）接收，默认插槽名为default，obj是任意起个名字，接收数据以属性的方式传递过来的数据对象（第五点中的数据）

<MyTable><template #default="obj"> 这里的obj父组件中传递过来的数据对象，类似第5点中的数据<button @click="del(obj.id)">删除</button></template>
</Mytable>

4.5.6是使用作用域插槽的步骤