Vue2篇 2

第3章：使用Vue脚手架

3.1 初始化脚手架

3.1.1 说明

1. Vue脚手架是Vue官方提供的标准化开发工具（开发平台）。

2. 文档:https://cli.vuejs.org/zh/ 。

3.1.2 具体步骤

第一步（仅第一次执行）：全局安装@vue/cli。

npm install -g @vue/cli

第二步：切换到你要创建项目的目录，然后使用命令创建项目 vue create xxxx

第三步：启动项目 npm run serve

备注：  如出现下载缓慢请配置npm淘宝镜像： https://registry.npm.taobao.org 

3.1.3模板项目的结构 

3.2 ref 与props

ref

1. 作用：用于给节点打标识

2. 读取方式：this.$refs.xxxxxx

props

1. 作用：用于父组件给子组件传递数据

2. 读取方式一:只指定名称 props: ['name', 'age', 'setName']

3. 读取方式二:指定名称和类型 props: { name: String, age: Number, setNmae: Function }

4. 读取方式三:指定名称/类型/必要性/默认值 props: { name: {type: String, required: true, default:xxx}, }

3.3mixin混入

3.4 插件

1. Vue插件是一个包含install方法的对象

2. 通过install方法给Vue或Vue实例添加方法,定义全局指令等

3.5 Vue中的自定义事件 绑定事件监听

绑定事件监听：

<Header @addTodo="addTodo"/>

或者

this.$refs.header.$on('addTodo', this.addTodo)

触发事件 this.$emit('addTodo', todo)

3.6全局事件总线

3.6.1理解

1. Vue原型对象上包含事件处理的方法

   1) $on(eventName, listener):绑定自定义事件监听

   2) $emit(eventName,data):分发自定义事件

   3) $off(eventName):解绑自定义事件监听

   4) $once(eventName, listener):绑定事件监听,但只能处理一次

2.所有组件实例对象的原型对象的原型对象就是Vue的原型对象

   1)所有组件对象都能看到Vue原型对象上的属性和方法

   2) Vue.prototype.$bus=newVue(),所有的组件对象都能看到$bus这个属性 对象

3.全局事件总线

   1)包含事件处理相关方法的对象(只有一个)

   2)所有的组件都可以得到

3.6.2指定事件总线对象

new Vue({
   beforeCreate（){/尽量早的执行挂载全局事件总线对像的操作
   Vue.prototype.$globalEventBus this
},
}).$mount('#root')

3.6.3绑定事件

this.$globalEventBus.$on('deleteTodo',this.deleteTodo)

3.6.4分发事件

this.$globalEventBus.$emit('deleteTodo',this.index)

3.6.5解绑事件

this.$globalEventBus.$off('deleteTodo')

3.7 消息订阅与发布

3.7.1 理解

1. 这种方式的思想与全局事件总线很相似

2. 它包含以下操作: (1) 订阅消息--对应绑定事件监听 (2) 发布消息--分发事件 (3) 取消消息订阅--解绑事件监听

3. 需要引入一个消息订阅与发布的第三方实现库:PubSubJS

3.7.2 使用PubSubJS

3. 相关语法 1. 在线文档:https://github.com/mroderick/PubSubJS

2. 下载: npminstall-S pubsub-js

(1) import PubSub from 'pubsub-js' // 引入

(2) PubSub.subscribe(‘msgName’, functon(msgName, data){ })

(3) PubSub.publish(‘msgName’, data): 发布消息, 触发订阅的回调函数调用

(4) PubSub.unsubscribe(token): 取消消息的订阅

3.8过度与动画

3.8.1效果

3.8.2 vue动画的理解

1. 操作css的trasition或animation

2. vue会给目标元素添加/移除特定的class

3. 过渡的相关类名：

1. xxx-enter-active: 指定显示的 transition

2. xxx-leave-active: 指定隐藏的transition

3. xxx-enter/xxx-leave-to: 指定隐藏时的样式

3.8.3 基本过渡动画的编码

1. 在目标元素外包裹

2. 定义class样式

a) 指定过渡样式:transition

b) 指定隐藏时的样式:opacity/其它

第4章：Vue中的ajax

4.1插槽

第5章：vuex

5.1 理解vuex

5.1.1 vuex 是什么

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

2. Github地址: https://github.com/vuejs/vuex

5.1.2 什么时候使用Vuex

1. 多个组件依赖于同一状态

 2. 来自不同组件的行为需要变更同一状态

5.1.3 Vuex 工作原理图

5.2 vuex 核心概念和API

5.2.1 state

1. vuex 管理的状态对象

2. 它应该是唯一的

3. 示例代码：

5.2.2 actions

1. 值为一个对象，包含多个响应用户动作的回调函数

2. 通过commit( )来触发mutation中函数的调用,间接更新state

3. 如何触发actions中的回调？ 在组件中使用:$store.dispatch('对应的action 回调名') 触发

4. 可以包含异步代码（定时器,ajax等等）

5. 示例代码：

5.2.3 mutations

1. 值是一个对象，包含多个直接更新state的方法

2. 谁能调用mutations中的方法？如何调用？

在action中使用：commit('对应的mutations方法名') 触发

4. 示例代码：

5.2.4 getters

1. 值为一个对象，包含多个用于返回数据的函数

2. 如何使用？——$store.getters.xxx 3. 示例代码：

第6章：vue-router

6.1 相关理解

6.1.1 vue-router 的理解

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

6.1.2 对SPA应用的理解

1. 单页Web应用（singlepagewebapplication，SPA）。

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

3. 点击页面中的导航链接不会刷新页面，只会做页面的局部更新。

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

6.1.3 路由的理解

1. 什么是路由?

1） 一个路由就是一组映射关系（key-value）

2） key为路径,value可能是function或component

2. 路由分类

1. 后端路由：

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

2) 工作过程：服务器接收到一个请求时,根据请求路径找到匹配的函数 来处理请求,返回响应数据。

2. 前端路由：

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

2) 工作过程：当浏览器的路径改变时,对应的组件就会显示。

6.2 基本路由

6.2.1 总结: 编写使用路由的3步

1. 定义路由组件

2. 注册路由

3. 使用路由

6.3 嵌套（多级）路由

6.3 路由传参

6.4 编程式路由导航 相关API：

1. this.$router.push(path): 相当于点击路由链接(可以返回到当前路由界面)

2. this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面)

3. this.$router.back(): 请求(返回)上一个记录路由

4. this.$router.go(-1): 请求(返回)上一个记录路由

5. this.$router.go(1): 请求下一个记录路由