前端Vue2笔记

笔记

脚手架文件结构

node_modules

public

​ favicon.ico: 页签图标

​ index.html: 主页面

src

​ assets: 存放静态资源

​ logo.png

​ component: 存放组件

​ HelloWord.vue

​ App.vue: 汇总所有组件

​ main.js: 入口文件

.gitignore: git版本管制忽略的配置

babel.config.js: babel的配置文件

package.json: 应用包配置文件

README.md: 应用描述文件

package-lock.json: 包版本控制文件

关于不同版本的Vue

• vue.js与 vue.runtime.xxx.js的区别：

  （1）vue.js是完整版的Vue。包含：核心功能 + 模板解析器。

  （2）vue.runtime.xxx.js是运行版的Vue，只包含：核心功能【没有模板解析器】

• 因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，

  需要使用render函数接收到的createElement函数去指定具体内容。

Vue.config.js配置文件

• 使用vue inspect > output.js 可以查看到Vue手脚架的默认配置。
• 使用vue.config.js可以对手脚架进行个性化定制，详情见：https://cli.vuejs.org/zh

ref属性

1. 被用来给元素或子组件注册引用信息（id的替代者）

2. 应用在html标签上获取的是真实DOM元素，应用在组件实例对象（vc）

3. 使用方式：

   ​ 打标识：

   …

   或

   ​ 获取：this.$refs.xxx

插件

​ 功能：用于增强Vue

​ 本质：包含install方法为一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。

​ 定义插件：

​ 对象.install =function (Vue, options){

​ //1.添加全局过滤器

​ Vue.filter(…)

​ //2.添加全局指令

​ Vue.directive(…)

​ //3.配置全局混入（合）

​ Vue.mixin(…)

​ //4.添加实例方法

​ Vue.prototype.$myMethod = function () {…}

​ Vue.prototype.$myProperty=xxxx

​ }

引入插件：import pulgin from “package/pulgin.js”

使用插件：Vue.use()

scoped样式

1.作用：让样式在局部生效，防止冲突

2.写法：

3.生效样式绑定属性：lang

​ 写法：

4.scoped 和 lang 两个属性可结合在一起使用

​ 写法:

总结TodoList案例

1.组件化编码流程：

​ (1).拆分静态组件：组件要按照功能点拆分，命名不要与html

​ (2).实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是些组件在用：

​ 1).一个组件在用：放在组件自身即可

​ 2).一些组件在用：放在它们公共的父组件上(状态提示)。

​ (3).实现交互：从绑定事件开始。

2.props使用于：

​ (1).父组件 ===> 子组件 通信

​ (2).子组件 ===> 父组件 通信 （要求 父先给子一个函数)

3.使用v-model时要切记：v-model绑定的值不能是 props传过来的值，因为props是不可以修改的！

4.props传过来的若是对象类型的值，修改对象中的属性是Vue不会报错，但不推荐这样做。

webStorage

1.存储内容大小一般支持5MB左右（不同浏览器可能还不一样）

2.浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地储存机制

3.相关API：

​ 1.xxxxxStorage.setItem(‘key’,‘value’);

​ 该方法接收一个键和值作为参数，会包键值对添加到存储中，如果键名存在，则更新器对应的值

​ 2.xxxxxStorage.getItem(‘person’);

​ 该方法接收一个键名作为参数，返回键名对应的值。

​ 3.xxxxxStorage.remove(‘key’);

​ 该方法接收一个键名作为参数，并包该键名从存储中移除

4.备注：

​ 1.SessionStorage存储的内容会随着浏览器窗口关闭而消失

​ 2.LocalStorage存储的内容，需要手动清除才会消失。

​ 3.xxxxStorage。getItem(xxx)如果xxx对应的value获取不到，那么getItem的返回值是null

​ 4.JSON.parse(null)的结果依然是null

组件的自定义事件

1.一种组件间通信的方式，适用于：子组件 ====> 父组件

2.使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中绑定自定义事件（事件的回调在A中）

3.绑定自定义事件：

​ 1)第一种方式，在父组件种： 或

​ 2)第二种方式，在父组件中：

​ …

​ mounted(){

​ this.$refs.xxx.$on('atschool',this.test)

​ }

​ 3若想要让自定义事件只能触发一次，可以使用once修饰符，或$once方法

4.触发自定义事件：this.$emit('atschool',数据)

5.解绑自定义事件：this.$off('atschool')

6.组件上也可以绑定原生的DOM事件，需要native修饰符

7.注意：通过 this.$refs.xxx.$on('atschool',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this的指向上会出现问题

全局事件总线（GlabaEventBus）

1.一种组件间通信的方式，适用于任意组件间通信。

2.安装全局事件总线：

​ new Vue({

​ .......

​ beforeCreate( ){

​ vue.prototype.$bus=this //安装全局事件总线，$bus就是当前应用的vm

​ },

})

3.使用事件总线：

​ （1）接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件回调留在A组件自身。

​ methods(){

​ demo(data){

​ this.$bus.$emit(......)

​ }

​ }

................

​ mounted(){

​ this.$bus.$on('xxx',this.demo)

​ }

​ （2）提供数据：this.$bus.$emit('xxx',数据)

4.最好在beforDestroy钩子中，用$off去解绑当前组件所用到的事件。

消息的订阅与发布（pubsub）

1.一种组件间通信的方式，适用于任意组件间通信

2.使用步骤：

​ (1).安装：pubsub: npm i pubsub-js

​ (2).引入：import pubsub from ‘pubsub-js’

3.接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。

​ methods(){

​ demo(data){......}

​ }

​ ...........

​ mounted(){

this.pid = pubsub.subscribe('xxx',this.demo)//订阅消息

}`

4.提供数据： pubsub.publish('xxx',数据)

nextTick

1.语法：this.$nextTick(回调函数)

2.作用：在下一次DOM更新结束后执行器指定的回调。

3.什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作，要在nextTick所指定的回调函数中执行；

Vue封装的过渡和动画

1.作用：在插入，更新或移除DOM元素是，在合适的时候给元素添加样式类名。

2.写法：

​ 1.准备好样式：

• 元素进入样式：

  • v-ente：进入的起点
  • v-enter-active：进入的过程中
  • v-enter-to：进入的终点

• 元素离开样式：

  • v-leave：离开的起点
  • v-leave-active：离开的过程中
  • v-leave-to：离开的终点

  2.使用包裹要过渡的元素，并配置name属性：

  你好啊！！
  

3.备注：若有多个元素需要过渡，则需使用：,且每个元素都要指定key的值

Vue脚手架配置代理

方法一

​ 在vue.config.js中添加如下配置：

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

说明：

​ 1.优点：配置精简，请求资源是直接发给前端（8080）即可

​ 2.缺点：不能配置多个代理，不能灵活的控制请求是都走代理

​ 3.工作方式： 若俺早上述配置代理，当请求了前端不存在的资源时，南无该请求会转发给服务器（优先匹配前端资源）

方法二

​ 编写vue.config.js配置具体代理规则：

devServer: {
    proxy: {
      '/api': {
        target: '',//匹配所有以'/api'开头的请求路径
        pathRewrite:('^/api',''),
        ws: true,//用于支持webscoket
        changeOrigin: true//用于显示访问者的IP地址，可显示是否为真或为假的
      },
      '/foo': {
        target: ''//这是一个不进行任何 schema 验证的对象，因此它可以用来传递任何第三方插件选项
      }
    }
  }

说明：

​ 1.优点：可以配置多个代码，且可以灵活拦截是否是代理

​ 2.缺点：配置稍显繁琐，请求支援时必须加前缀

vue中常用的2个Ajax库

axios

通用的Ajax请求库，官方推荐，使用广泛

vue-resource

vue插件库，vue 1.x使用广泛，vue官方不维护

插槽

1.作用：让父组件可以向子组件位置插入html结构，也是一种组件间通信的方式，适用于 父组件 ===> 子组件

2.分类：默认插槽，具名插槽，作用域插槽

3.使用方式：

​ 1.默认插槽：

​ 父组件中：
​

			
html结构

​
​ 子组件中：

​ 2.具名插槽：

---

父组件中：

	
    
    
`
子组件中：
头部插槽
尾部插槽

​ 3.作用域插槽：（可传值给要使用它的那个组件）

​ (1)理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者决定。（data数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）

​ (2)具体代码：

​

父组件中：

						
			
    	
子组件中
	

Vuex

1.概念

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

2.何时使用？

多个组件需要共享数据时

3.搭建vuex环境

​ (1)创建文件：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

})

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

.........

//引入store

import store from './store'

...........

//创建vm

new Vue({

	el:'#app',

	reder:h =>(App),

	store

})

Vuex的基本使用

1.初始化变量，配置actions，配置mutations，操作文件store.js

//引入Vue核心库

import Vue from 'vue'

//引入Vuex

import Vuex from 'vuex'

//引入Vuex

Vue.use(Vuex)

const actions={

​	//响应组件中加的动作

​	add(context,value){

​	//consloe.log('actions中的add被调用了',minStore,value)

​	context.commit('ADD',value)

​	},

}

`const mutations ={`

​	//执行加

​	ADD(state,value){

​	//console.log('mutations中的ADD被调用了',state,value)

​	state.sum += value

​	}

}

//初始化数据

const state ={

​	sum:0

`}`

//创建并暴露store

export default new Vuex.Store({

​	actions,

​	mutations,

	state

})

2.组件中读取vuex中的数据：$store.state.sum

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

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

getters的使用(逻辑复用推荐)

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

2.在 store.js 中追加 getters 配置

......
const getters={

bigSum(state){

​	return state.sum * 10

​	}

}

//创建并暴露store

export default new Vuex.Store({

​	........

​	getters

}) 

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

四个map方法的使用

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

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

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

computed:{
	//借助mapGetters生成计算属性：bigSum(对象写法)
	...mapGetters({bigSum:'bigSum'}),
	//借助mapGetters生成计算属性：bigSum(数组写法)
	...mapGetters(['bigSum']),
},

**3.mapActions方法：**用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数

methods:{
	//靠mapActions生成：incrementOdd，incrementWait(对象形式)
	...mapActions({incrementOdd:'odd',incrementWait:'wait'}),
	//靠mapActions生成：incrementOdd，incrementWait(数组形式)
	...mapActions(['odd','wait'])
}

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

methods:{
	//靠mapActions生成：increment,decrement(对象形式)
	...mapMutations({increment:'ADD',decrement:'SUBTRACT'}),
	//靠mapActions生成：increment,decrement(数组形式)
	...mapMutations(['ADD','SUBTRACT']),
}

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

模块化+命名空间

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

2.修改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({
	moudles:{
		countAbout,
		personAbout
	}

})

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

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

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

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

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

//方式一：自己直接dispatch
this.$store.dispatch('personAbout/addPersonOne',person),
//方式二：借助mapActions
...mapActions('countAbout',{incrementOdd:'add',increnment:'subtract'}),

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

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

vue-router

vue-router的理解

vue的一个插件库，专门用来实现 SPA应用

对SPA应用的理解

1.单页面Web应用（single page web application，SPA）。

2.整个应用只能有一个完美的页面

3.点击页面中的导航俩你今儿不会刷新页面，只会做页面的局部更新。

4.数据需要通过 ajax 请求获取

路由的理解

什么是路由

1.一个路由就是一组映射关系（key-value），多个路由需要路由器（router）进行管理

2.前端路由：key为路径，value可能是function或component

路由分类

1.后端路由：

​ 1）理解：value 是 function , 用于处理客户端提交的请求。

​ 2）工作过程：服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求，

返回响应数据。

2.前端路由：

​ 1）理解：value 是component，用于展示页面内容。

​ 2）工作过程：当浏览器的路劲改变时，对应的组件就会显示。

基本使用

1.安装vue-router,命令： npm i vue-router@3(Vue2中)

2.应用插件：Vue.use(VueRouter)

3.编写router配置项：

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

4.实现切换（active-class课配置高亮样式）

About

5.指定展示位置

几个注意点

1.路由组件通常存放在pages文件夹，一般组件通常存放在component文件夹

2.通过切换，'隐藏’的路由组件，默认是被销毁的，需要的时候在去挂载。

3.每个组件都有自己的$route属性，里面存储着自己的路由信息。

4.整个应用自由一个router，可以通过组件的```$router``属性获取到

多级路由（多级路由）

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

routes:[
	{
		path:'/about',
		component:About
	},
	{
		path:'/home',
		component:Home,
		thildren:[
			{
				path:'news',
				component:News
			},
			{
				path:'message',
				component:Message
			}
		]
	}
	
]

2.跳转（要写完整路径）：

```News``

路由的query参数

1.传递参数

跳转

跳转

2.接收参数

$route.query.id
$route.query.title

路由命名

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

2.如何使用

​ (1).给路由命名：

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

2.简化跳转：

跳转


跳转


跳转

路由的params参数

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

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

2.传递参数

跳转

跳转

特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！

3.接收参数：

$route.params.id
$route.params.title

路由的props配置

作用：让路由组件更方便的收到参数

{
	name:'detail',
	path:'detail/:id/:title',
	component:Detail,
	//第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给props传给Detail组件
	props:{id:001,title:'消息1'}
	//第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件
	props:true
	//第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
	props($route){
		return{
			id:$route.query.id,//如果传入的是params值则使用$route.params.id
			title:$route.query.title如果传入的是params值则使用$route.params.title
		}
	}	
}

replace方法

1.作用：控制路由跳转时操作浏览器历史记录的模式

2.浏览器的历史记录有两种写入方式：push和replace,其中push是追加历史记录,replace是替换当前记录，路由跳转时候默认为push方式

3.开启replace模式：News

编程式路由导航

1.作用：不借助实现路由跳转，让路由跳转更加灵活

2.具体编码：

this.$router.push({
	name:'detail',
	params:{
		id:xxx,
		title:xxx
	}
})

this.$router.replace({
	name:'detail',
	params:{
		id:xxx,
		title:xxx
	}
})
this.$router.forward()	//前进，若其中若加入了path则为跳转路径
this.$router.back()		//后退，若其中若加入了path则为跳
this.$router.go()		//可前进也可后退，若其中若加入了path则为跳

缓存路由组件

1.作用：让不展示的组件保存挂载，不销毁

2.具体编码：

//include内写的是组件名，如不写include则来者不拒全部保持挂载

	

路由里的两大生命钩子函数

activated和deactivated