使用 Vue 脚手架

一、初始化脚手架

1.1 说明

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

2. 最新的版本是 4.x。

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

1.2 具体步骤

第一步(仅第一次执行):全局安装@vue/cli。 npm install -g @vue/cli

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

第三步:启动项目 npm run serve

备注:

1. 如出现下载缓慢请配置 npm 淘宝镜像:npm set

config

registry

https://registry.npm.taobao.org

2. Vue 脚手架隐藏了所有 webpack 相关的配置，若想查看具体的 webpakc 配置， 请执行:vue inspect > output.js

1.3 模板项目的结构

├── node_modules

├── public

• │  ├── favicon.ico: 页签图标

• │  └── index.html: 主页面 ├── src

• │  ├── assets: 存放静态资源

• │  │ └── logo.png

• │  │── component: 存放组件

• │  │ └── HelloWorld.vue

• │  │── App.vue: 汇总所有组件

• │  │── main.js: 入口文件
  ├── .gitignore: git 版本管制忽略的配置

• ├── babel.config.js: babel 的配置文件

• ├── package.json: 应用包配置文件
  ├── README.md: 应用描述文件
  ├── package-lock.json:包版本控制文件

二、 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},

}

三、混入

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

1. 作用:用于给节点打标识
2. 读取方式:this.$refs.xxxxxx

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

四、插件

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

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

五、Todo-list 案例

组件化编码流程(通用)

1.实现静态组件:抽取组件，使用组件实现静态页面效果

2.展示动态数据:

2.1. 数据的类型、名称是什么?

2.2. 数据保存在哪个组件?

3.交互——从绑定事件监听开始

六、Vue 中的自定义事件

绑定事件监听

<Header @addTodo="addTodo"/>

或者

<Header ref="header"/>

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

触发事件

this.$emit('addTodo', todo)

七、全局事件总线

7.1 理解

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

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

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

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

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

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

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

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

3. 全局事件总线
1) 包含事件处理相关方法的对象(只有一个) 2) 所有的组件都可以得到

7.2 指定事件总线对象

new Vue({
beforeCreate () { // 尽量早的执行挂载全局事件总线对象的操作

Vue.prototype.$globalEventBus = this },

}).$mount('#root')

7.3 绑定事件

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

7.4 分发事件

this.$globalEventBus.$emit('deleteTodo', this.index) 3.7.5 解绑事件

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

八、消息订阅与发布

8.1 理解

1. 这种方式的思想与全局事件总线很相似 2. 它包含以下操作:

(1) 订阅消息--对应绑定事件监听 (2) 发布消息--分发事件
(3) 取消消息订阅--解绑事件监听

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

1. 在线文档: https://github.com/mroderick/PubSubJS 2. 下载: npm install -S pubsub-js
3. 相关语法

(1) import PubSub from 'pubsub-js' // 引入
(2) PubSub.subscribe(‘msgName’,functon(msgName,data){})
(3) PubSub.publish(‘msgName’,data):发布消息,触发订阅的回调函数调用 (4) PubSub.unsubscribe(token):取消消息的订阅

九、过度与动画

9.1 效果

9.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: 指定隐藏时的样式

9.3 基本过渡动画的编码

1. 在目标元素外包裹<transition name="xxx">

2. 定义 class 样式

   1. a)  指定过渡样式: transition

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