1、Vue基础知识

Vue生命周期： 创建 -> 初始化数据 -> 编译模板 -> 挂载Dom渲染 -> 更新渲染 -> 销毁！

1、创建Vue实例

1.1、第一种 - 创建vue实例

//创建vue挂载容器
<div id="root"></div>

<script>new Vue({el: '#root', data: {}})
</script>

1.2、第二种 - 创建vue实例

//创建vue挂载容器
<div id="root"></div>

<script>const vm = new Vue({data: {}})vm.$mount('#root'); //作用灵活
</script>

1.3、第一种写法 - data

普通写法

new Vue({el: '#app',data: {}
})

1.4、第二种写法 - data（推荐使用）

函数写法

new Vue({el: '#app',data() {return {}}
})

2、模板语法

2.1、插值语法

语法：{{属性名}}

<div id="root">{{name}}
</div>

<script>
new Vue({el: '#root',data:{name: 'hello'}
})
</script>

2.2、指令语法

语法：v-bind:href=“属性名”

简写：:href=“属性名”

<div id="root"><a v-bind:href="url">去往百度</a><!-- 简写：:href="" --><a :href="url">去往百度</a>
</div>

<script>new Vue({el: '#root',data:{url: 'http://www.baidu.com'}})
</script>

3、数据绑定

3.1、单向数据绑定

语法：v-bind:href =“xxx”

特点：数据只能从 data 流向页面

<div id="root"><a v-bind:href="url">去往百度</a><!-- 简写：:href="" --><a :href="url">去往百度</a>
</div>

<script>new Vue({el: '#root',data:{url: 'http://www.baidu.com'}})
</script>

3.2、双向数据绑定

语法：v-mode:value=“xxx” 或简写为 v-model=“xxx”

特点：数据不仅能从 data 流向页面，还能从页面流向 data

<div id="root">双向数据绑定：<input v-model="username"/>
</div>

<script>new Vue({el: '#root',data:{username: 'admin'}})
</script>

4、事件处理

4.1、绑定监听

语法：v-on:click=“函数名” 简写 @click=“函数名”

作用：绑定事件

<!--    v-on: 简写 @click=""-->
<button v-on:click="eventBut01"> - 无参数</button><br>
<button v-on:click="eventBut02('hello')"> - 有参数</button><br>
<button v-on:click="eventBut03($event)"> - 默认参数</button><br>
<button v-on:click="eventBut04($event, '自带参数')"> - 默认参数与自带参数</button><br>

<script>new Vue({data() {return {};},//可以定义多个函数（vue挂在容器可用）methods: {eventBut01() {alert('无参数')},eventBut02(name) {alert('有参数 - '+ name)},eventBut03(event) {alert('默认参数 - '+ event)},eventBut04(event, name) {alert('有参数 - '+ name)console.log(event)}}}).$mount('#root')
</script>

4.2、事件修饰符

（1）.stop - 阻止冒泡事件（通俗讲就是阻止事件向上级DOM元素传递）

<div id="hello"><div v-on:click="divFun"><button v-on:click.stop="butFun">按钮</button></div>
</div>

new Vue({methods: {divFun() {console.log('外层 div 触发')},butFun() {console.log('but按钮触发')}}
}).$mount('#hello')

（2） .prevent - 阻止默认事件的发生，默认事件指对DOM的操作会引起自动执行的动作，比如点击超链接的时候会进行页面的跳转，点击表单提交按钮时会重新加载页面等，使用".prevent"修饰符可以阻止这些事件的发生。

<!-- 点击也不会添加到百度这就是阻止a标签默认行为 -->
<a href="http://www.baidu.com" v-on:click.prevent>前往百度</a>

（3）.capture - 捕获冒泡，即有冒泡发生时，有该修饰符的dom元素会先执行，如果有多个，从外到内依次执行，然后再按自然顺序执行触发的事件。

<div id="hello"><div style="background-color: red; width: 300px;height: 300px;" @click.capture="div01"><div style="background-color: blue; width: 200px;height: 200px;" v-on:click="div02"><div style="background-color: yellow; width: 100px;height: 100px;" v-on:click="div03"><div style="background-color: pink; width: 50px;height: 50px;" v-on:click="div04"></div></div></div></div>
</div>

new Vue({methods: {div01() {console.log('div01')},div02() {console.log('div02')},div03() {console.log('div03')},div04() {console.log('div04')},}}).$mount('#hello')

(4). self - 将事件绑定到自身，只有自身才能触发，通常用于避免冒泡事件的影响

(5). once - 设置事件只能触发一次，比如按钮的点击等。

作用：按钮事件只触发一次

4.3、键盘事件

<div id="app"><input type="text" placeholder="键盘事件测试" @keydown.enter="downFun"> <br><!-- 组合键位的使用 --><input type="text" placeholder="键盘事件测试" @keyup.ctrl.y="upFun"> <br>
</div>

<script>new Vue({methods: {downFun(e) {console.log(e)},upFun(e) {console.log(e)}}}).$mount('#app')
</script>

5、计算属性 - 监视

5.1、计算属性 - `computed`

<div id="root"><span>今天天气 -> {{calculate}}</span><br><button @click="condition = !condition">切换天气</button>
</div>

new Vue({data() {return{condition: true}},computed: {calculate() {return this.condition ? '冷' : '热';}}
}).$mount("#root")

5.2、监视属性 - `watch`

作用：监视vue对象中的属性

属性：deep:true : 开启深度监视

immediate: true : 初始化调用一次

handler() {} ：监视的属性发生改变调用

简写：函数名() {}

<div id="root"><button @click="hello = !hello">切换</button><br><span>{{jisuan}}</span>
</div>

<script>const vm = new Vue({data() {return{hello: true,arr: {a: 1,b: 2}}},//计算属性computed: {jisuan() {return 'Hello Word!'}},//监视属性(方式一)watch: {hello: {/*  初始化调用一次*/immediate: true,/*  hello属性发生改变调用*/handler(newValue,oldValue) {console.log(newValue,oldValue)}},//简写方式hello() {handler(newValue,oldValue) {console.log(newValue,oldValue)}}}}).$mount("#root");//监视属性(方式二)vm.$watch('hello', {/*  初始化调用一次*/immediate: true,/*  hello属性发生改变调用*/handler(newValue,oldValue) {console.log(newValue,oldValue)}   })vm.$watch('hello', function(newValue,oldValue) {/*  初始化调用一次*/immediate: true,console.log(newValue,oldValue)})//监视对象属性vm.$watch('arr.a', {/*  初始化调用一次*/immediate: true,/*  hello属性发生改变调用*/handler(newValue,oldValue) {console.log(newValue,oldValue)}  })</script>

6、组件访问

6.1、`ref`属性

<template><div id="app"><div ref="appTest">App组件</div><ref ref="testRef"></ref><button ref="but" @click="refClick">ref属性</button></div>
</template><script>import ref from '@/components/Ref'export default {name: 'App',components: {ref},methods: {refClick() {console.log(this.$refs.testRef) //获取到组件实例对象console.log(this.$refs.appTest) //dom元素console.log(this.$refs.but) //dom元素}}
}
</script><style>
</style>

6.2、props（接受父组件传递的参数）

注意：props 优先级高于 data

1、父组件传递参数给子组件

<!--  方式一: 直接传递参数-->
<Student name="我是父组件的name参数" :age="20" sex="我是父组件的sex参数"></Student><!--  方式二：绑定一个对象-->
<student :data="student"></student>

2、接收父组件传递的参数

     方式一：普通接收props: ['name', 'sex', 'age'],方式二：限制类型props: {name: String,age: Number,sex: String},方式三：限制类型、限制必要性、指定默认值props: {name: {type: String,require: true,default: '默认名称'},age: {type: Number,require: true,default: 18},sex: {type: String,require: true,default: '女'},},

7、混合属性

7.1、mixin

作用：抽取多个组件公共配置提取到混合配置文件

使用方式：

步骤一：定义混合配置文件

// export 对外暴露 hunhe1
export const hunhe1 ={methods: {hunheClick() {alert(this.name)}}
}

步骤二：使用混合

局部使用: 组件里配置

<template><div><button @click="hunheClick">{{name}}</button></div>
</template><script>import {hunhe1} from '@/components/mixin';export default {name: "Hello",data() {return{ name: 'Hello' }},mixins: [hunhe1]}
</script>

全局使用：main.js 配置

import Vue from 'vue'
import App from './App.vue'
import {hunhe1} from "./components/mixin";Vue.config.productionTip = false
Vue.mixin(hunhe1)new Vue({render: h => h(App),
}).$mount('#app')

8、插件

//全局注册插件
Vue.use()

9、本地存储

//存数据
localStorage.setItem('key', 'value')//取数据
localStorage.getItem('key')

10、组件自定义事件

10.1、`$emit` - 子给父传递参数

方式一：

1、子组件传递一个 hello 函数给父组件接收

this.$emit('hello', {name: 'hello', age: 18})

2、接收hello组件传递过来的函数（子传父）

<hello @hello="helloEvent"></hello>

方式二：

1、子组件传递一个 hello 函数给父组件接收

this.$emit('hello', {name: 'hello', age: 18})

2、接收hello组件传递过来的函数（子传父）

<!--  ref === hello组件实例对象-->
<hello ref="hello"></hello>

mounted() { //钩子函数（组件挂载完成执行）//拿到hello组件实例，然后绑定一个 helloEvent 事件（注意：必须使用箭头函数 this 才执行当前vc实例对象）this.$refs.hello.$on('helloEvent', (data) => {console.log('@@@',data)})
}

10.2、`$on` - 触发事件

this.$refs.hello.$on('helloEvent', (data) => {console.log('@@@',data)
})

10.3、`$off` - 解绑事件

//解绑一个指定事件
this.$off('hello');//解绑指定多个事件
this.$off(['hello1', 'hello2']);//解绑全部事件
this.$off();

11、全局事件总线

使用步骤：

11.1、注册全局事件总线

new Vue({render: h => h(App),beforeCreate() { //vue创建完成前注册全局事件总线Vue.prototype.$bus = this //this是app组件实例}
}).$mount('#app')

11.2、使用全局事件总线

methods: {deleteOne(titleId) {if (confirm('你确定要删除？')) {// 发起一个 deleteOneDoto 事件，参数是titleIdthis.$bus.$emit('deleteOneDoto', titleId)}}
}

11.3、接收事件

mounted() {//触发 deleteOneDoto 事件this.$bus.$on('deleteOneDoto', this.deleteOneDoto)
}

11.4、vc销毁前解绑事件

//组件实例销毁前执行
beforeDestroy() {//按需解绑this.$bus.$off('deleteOneDoto')
}

12、消息订阅与发布

12.1、安装消息订阅插件

注意：有多种消息订阅插件 - 安装自己喜欢用的

npm install pubsub-js

12.2、使用步骤

1、在需要使用的组件引入

import pubsub from 'pubsub-js'

2、发布订阅pubsub.publish(name, data)

deleteOne(titleId) {if (confirm('你确定要删除？')) {//发布订阅pubsub.publish('hello', titleId)}
}

3、接受订阅 pubsub.subscribe(name, function)

mounted() {/*  pusName：发布订阅的name   titleId：传递过来的参数*/pubsub.subscribe('hello', (pusName, titleId) => {console.log('有人订阅hello事件',pusName, titleId);})// pubsub.subscribe('hello',this.deleteOneDoto)
},

4、取消订阅 pubsub.unsubscribe(pusId)

//销毁前执行
beforeDestroy() {//取消订阅pubsub.unsubscribe(this.pusId)
}

13、配置请求代理（axios）

13.1、第一种配置方式

作用：简单配置只适用于单服务器访问

配置：vue.config.js

module.exports = {devServer: {proxy: 'http://localhost:4000' //后台api服务器请求地址}
}

13.2、第二种配置方式

作用：完整配置适用于多台服务器请求

配置：vue.config.js

module.exports = {devServer: {proxy: {'/api': {target: '<url>', //服务器地址ws: true,// 用于支持 websocket（默认true）changeOrigin: true //默认true},'/foo': {target: '<other_url>'}}}
}

changeOrigin : 用户给服务器发起请求地址

true ：http:localhost:8888（服务器地址）

false: http:localhost:8080（自己的地址）

14、`slot` 插槽

14.1、默认插槽

理解：子组件定义一个默认插槽父组件往子组件插入信息（插槽没有使用返回插槽默认值）

1、子组件定义插槽（slot-demo）

<div><slot>I is  defalut slot!</slot>
</div>

2、父组件插入信息

<slot-demo><template>插入信息</template>
</slot-demo>

14.2、俱名插槽

理解：定义一个有名字的插槽按插槽名字插入信息

1、子组件定义俱名插槽（slot-demo）

<div><slot name="top">I is top slot!</slot><slot name="main">I is main slot!</slot><slot name="footer">I is footer slot!</slot>
</div>

2、父组件插入信息

注意：v-slot:top 插槽新语法配合template模板使用

<slot-demo><template v-slot:top>top</template><template v-slot:main>main</template><template v-slot:footer>footer</template>
</slot-demo>

旧语法：slot=“name”

<div slot="name">param
</div>

14.3、作用域插槽

理解：插槽本身可以传递数据给使用该插槽的组件**（子组件给父组件传递数据，使用 slot-scope="data"接受）

1、子组件定义作用域插槽（slot-demo）

<div><slot :games="games" hello="hello">I is Number</slot>
</div>

2、父组件插入信息**（接收子组件插槽传递的信息）**

<template slot-scope="data"><ul><li v-for="(item,index) in data.games" :key="index">{{item}}</li></ul><h3>{{data.hello}}</h3>
</template>

2、Vuex

1.概念

在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。

2.何时使用？

多个组件需要共享数据时

3.搭建vuex环境

创建文件：src/store/index.js

//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)//准备actions对象——响应组件中用户的动作
const actions = {}
//准备mutations对象——修改state中的数据
const mutations = {}
//准备state对象——保存具体的数据
const state = {}//创建并暴露store
export default new Vuex.Store({actions,mutations,state
})

在main.js中创建vm时传入store配置项

......
//引入store
import store from './store'
......//创建vm
new Vue({el:'#app',render: h => h(App),store
})

4.基本使用

初始化数据、配置actions、配置mutations，操作文件store.js

//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//引用Vuex
Vue.use(Vuex)const actions = {//响应组件中加的动作jia(context,value){// console.log('actions中的jia被调用了',miniStore,value)context.commit('JIA',value)},
}const mutations = {//执行加JIA(state,value){// console.log('mutations中的JIA被调用了',state,value)state.sum += value}
}//初始化数据
const state = {sum:0
}//创建并暴露store
export default new Vuex.Store({actions,mutations,state,
})

组件中读取vuex中的数据：$store.state.sum
组件中修改vuex中的数据：$store.dispatch('action中的方法名',数据) 或 $store.commit('mutations中的方法名',数据)

备注：若没有网络请求或其他业务逻辑，组件中也可以越过actions，即不写dispatch，直接编写commit

5.getters的使用

概念：当state中的数据需要经过加工后再使用时，可以使用getters加工。

在store.js中追加getters配置

......const getters = {bigSum(state){return state.sum * 10}
}//创建并暴露store
export default new Vuex.Store({......getters
})

组件中读取数据：$store.getters.bigSum

6.四个map方法的使用

mapState方法：用于帮助我们映射state中的数据为计算属性

computed: {//借助mapState生成计算属性：sum、school、subject（对象写法）...mapState({sum:'sum',school:'school',subject:'subject'}),//借助mapState生成计算属性：sum、school、subject（数组写法）...mapState(['sum','school','subject']),
},

mapGetters方法：用于帮助我们映射getters中的数据为计算属性

computed: {//借助mapGetters生成计算属性：bigSum（对象写法）...mapGetters({bigSum:'bigSum'}),//借助mapGetters生成计算属性：bigSum（数组写法）注意：名字必须对应getters对象里面的函数名...mapGetters(['bigSum'])
},

mapMutations方法：用于帮助我们生成与mutations对话的方法，即：包含$store.commit(xxx)的函数

methods:{//靠mapActions生成：increment、decrement（对象形式）...mapMutations({increment:'JIA',decrement:'JIAN'}),//靠mapMutations生成：JIA、JIAN（对象形式）...mapMutations(['JIA','JIAN']),
}

备注：mapActions与mapMutations使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则参数是事件对象。

7.模块化+命名空间

目的：让代码更好维护，让多种数据分类更加明确。

修改store.js

const countAbout = {namespaced:true,//开启命名空间state:{x:1},mutations: { ... },actions: { ... },getters: {bigSum(state){return state.sum * 10}}
}const personAbout = {namespaced:true,//开启命名空间state:{ ... },mutations: { ... },actions: { ... }
}const store = new Vuex.Store({modules: {countAbout,personAbout}
})

开启命名空间后，组件中读取state数据：

//方式一：自己直接读取
this.$store.state.personAbout.list
//方式二：借助mapState读取：
...mapState('countAbout',['sum','school','subject']),

开启命名空间后，组件中读取getters数据：

//方式一：自己直接读取
this.$store.getters['personAbout/firstPersonName']
//方式二：借助mapGetters读取：
...mapGetters('countAbout',['bigSum'])

开启命名空间后，组件中调用dispatch

//方式一：自己直接dispatch
this.$store.dispatch('personAbout/addPersonWang',person)
//方式二：借助mapActions：
...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

开启命名空间后，组件中调用commit

//方式一：自己直接commit
this.$store.commit('personAbout/ADD_PERSON',person)
//方式二：借助mapMutations：
...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),

3、router

理解：一个路由（route）就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。
前端路由：key是路径，value是组件。

1.基本使用

安装vue-router，命令：npm i vue-router
应用插件：Vue.use(VueRouter)

编写router配置项:

//引入VueRouter
import VueRouter from 'vue-router'
//引入Luyou 组件
import About from '../components/About'
import Home from '../components/Home'//创建router实例对象，去管理一组一组的路由规则
const router = new VueRouter({routes:[{path:'/about',component:About},{path:'/home',component:Home}]
})//暴露router
export default router

实现切换（active-class可配置高亮样式）

<router-link active-class="active" to="/about">About</router-link>

指定展示位置
```
<router-view></router-view>
```

路由懒加载

component: () => import('@/views/redirect')

2.几个注意点

路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹。
通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。
每个组件都有自己的$route属性，里面存储着自己的路由信息。
整个应用只有一个router，可以通过组件的$router属性获取到。

3.多级路由（多级路由）

配置路由规则，使用children配置项：

routes:[{path:'/about',component:About,},{path:'/home',component:Home,children:[ //通过children配置子级路由{path:'news', //此处一定不要写：/newscomponent:News},{path:'message',//此处一定不要写：/messagecomponent:Message}]}
]

跳转（要写完整路径）：

<router-link to="/home/news">News</router-link>

4.路由的query参数

传递参数

<!-- 跳转并携带query参数，to的字符串写法 -->
<router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link><!-- 跳转并携带query参数，to的对象写法 -->
<router-link :to="{path:'/home/message/detail',query:{id:666,title:'你好'}}"
>跳转</router-link>

接收参数：
```
$route.query.id
$route.query.title
```

5.命名路由

作用：可以简化路由的跳转。

如何使用

给路由命名：

{path:'/demo',component:Demo,children:[{path:'test',component:Test,children:[{name:'hello' //给路由命名path:'welcome',component:Hello,}]}]
}

简化跳转：

<!--简化前，需要写完整的路径 -->
<router-link to="/demo/test/welcome">跳转</router-link><!--简化后，直接通过名字跳转 -->
<router-link :to="{name:'hello'}">跳转</router-link><!--简化写法配合传递参数 -->
<router-link :to="{name:'hello',query:{id:666,title:'你好'}}"
>跳转</router-link>

6.路由的params参数

配置路由，声明接收params参数

{path:'/home',component:Home,children:[{path:'news',component:News},{component:Message,children:[{name:'xiangqing',path:'detail/:id/:title', //使用占位符声明接收params参数component:Detail}]}]
}