入门Vue 脚手架

模块与组件、模块化与组件化

模块

1. 理解: 向外提供特定功能的 js 程序, 一般就是一个 js 文件
2. 为什么: js 文件很多很复杂
3. 作用: 复用 js, 简化 js 的编写, 提高 js 运行效率

组件

1. 理解: 用来实现局部(特定)功能效果的代码集合(html/css/js/image…..)
2. 为什么: 一个界面的功能很复杂
3. 作用: 复用编码, 简化项目编码, 提高运行效率

模块化

当应用中的 js 都以模块来编写的, 那这个应用就是一个模块化的应用。

组件化

当应用中的功能都是多组件的方式来编写的, 那这个应用就是一个组件化的应用,。

非单文件组件 

1. 模板编写没有提示
2. 没有构建过程, 无法将 ES6 转换成 ES5
3. 不支持组件的 CSS
4. 真正开发中几乎不用

单文件组件 

一个.vue 文件的组成(3 个部分)

1. 模板页面

<template>
页面模板
</template>

2. JS 模块对象

<script>
export default {
data() {return {}},
methods: {}, 
computed: {}, 
components: {}
}
</script>

3. 样式

<style>
样式定义
</style>

基本使用

1. 引入组件
2. 映射成标签
3. 使用组件标签

使用 Vue 脚手架

初始化脚手架

说明

1. Vue 脚手架是 Vue 官方提供的标准化开发工具（开发平台）。
2. 最新的版本是 4.x。
3. 文档: https://cli.vuejs.org/zh/。

具体步骤 

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

npm install -g @vue/cli

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

vue create xxxx

第三步：启动项目

npm run serve

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

https://registry.npm.taobao.org

2.Vue 脚手架隐藏了所有 webpack 相关的配置，若想查看具体的 webpakc 配置，

请执行：vue inspect > output.js

模板项目的结构 

├── 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 方法的对象
2. 通过 install 方法给 Vue 或 Vue 实例添加方法, 定义全局指令等

插件 

1. Vue 插件是一个包含 install 方法的对象
2. 通过 install 方法给 Vue 或 Vue 实例添加方法, 定义全局指令等

Todo-list 案例

组件化编码流程（通用）

1. 实现静态组件：抽取组件，使用组件实现静态页面效果
2. 展示动态数据：
   数据的类型、名称是什么？
   数据保存在哪个组件？
   ​​
3. 交互——从绑定事件监听开始

Vue 中的自定义事件

绑定事件监听

<Header @addTodo="addTodo"/>
或者
<Header ref="header"/>
this.$refs.header.$on('addTodo', this.addTodo)

触发事件

this.$emit('addTodo', todo)

全局事件总线

理解

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 = new Vue(), 所有的组件对象都能看到$bus 这个属性
   对象
3. 全局事件总线
   1) 包含事件处理相关方法的对象(只有一个)
   2) 所有的组件都可以得到

指定事件总线对象 

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

绑定事件

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

分发事件

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

解绑事件

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

消息订阅与发布

理解

1. 这种方式的思想与全局事件总线很相似
2. 它包含以下操作:
   (1) 订阅消息 --对应绑定事件监听
   (2) 发布消息 --分发事件
   (3) 取消消息订阅 --解绑事件监听
3. 需要引入一个消息订阅与发布的第三方实现库: PubSubJS

使用 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): 取消消息的订阅

过度与动画

效果

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

 

基本过渡动画的编码 

1. 在目标元素外包裹<transition name="xxx">
2. 定义 class 样式​​​​​​​
   a) 指定过渡样式: transition
   b) 指定隐藏时的样式: opacity/其它