模块与组件、模块化与组件化
模块
- 理解: 向外提供特定功能的 js 程序, 一般就是一个 js 文件
- 为什么: js 文件很多很复杂
- 作用: 复用 js, 简化 js 的编写, 提高 js 运行效率
组件
- 理解: 用来实现局部(特定)功能效果的代码集合(html/css/js/image…..)
- 为什么: 一个界面的功能很复杂
- 作用: 复用编码, 简化项目编码, 提高运行效率
模块化
当应用中的 js 都以模块来编写的, 那这个应用就是一个模块化的应用。
组件化
当应用中的功能都是多组件的方式来编写的, 那这个应用就是一个组件化的应用,。
非单文件组件
- 模板编写没有提示
- 没有构建过程, 无法将 ES6 转换成 ES5
- 不支持组件的 CSS
- 真正开发中几乎不用
单文件组件
一个.vue 文件的组成(3 个部分)
1. 模板页面
<template>
页面模板
</template>
2. JS 模块对象
<script>
export default {
data() {return {}},
methods: {},
computed: {},
components: {}
}
</script>
3. 样式
<style>
样式定义
</style>
基本使用
- 引入组件
- 映射成标签
- 使用组件标签
使用 Vue 脚手架
初始化脚手架
说明
- Vue 脚手架是 Vue 官方提供的标准化开发工具(开发平台)。
- 最新的版本是 4.x。
- 文档: https://cli.vuejs.org/zh/。
具体步骤
第一步(仅第一次执行):全局安装@vue/cli。
npm install -g @vue/cli
第二步:
切换到你要创建项目的目录
,然后使用命令创建项目
vue create xxxx
第三步:启动项目
npm run serve
1.如出现下载缓慢请配置 npm 淘宝镜像:npm config set registryhttps://registry.npm.taobao.org2.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
- 作用:用于给节点打标识
- 读取方式:this.$refs.xxxxxx
props
- 作用:用于父组件给子组件传递数据
- 读取方式一: 只指定名称 props: ['name', 'age', 'setName']
- 读取方式二: 指定名称和类型
props: {name: String,age: Number,setNmae: Function}
-
读取方式三: 指定名称/类型/必要性/默认值props: {name: {type: String, required: true, default:xxx},}
混入
- Vue 插件是一个包含 install 方法的对象
- 通过 install 方法给 Vue 或 Vue 实例添加方法, 定义全局指令等
插件
- Vue 插件是一个包含 install 方法的对象
- 通过 install 方法给 Vue 或 Vue 实例添加方法, 定义全局指令等
Todo-list 案例
组件化编码流程(通用)
- 实现静态组件:抽取组件,使用组件实现静态页面效果
- 展示动态数据:
数据的类型、名称是什么?数据保存在哪个组件?
- 交互——从绑定事件监听开始
Vue 中的自定义事件
绑定事件监听
<Header @addTodo="addTodo"/>
或者
<Header ref="header"/>
this.$refs.header.$on('addTodo', this.addTodo)
触发事件
this.$emit('addTodo', todo)
全局事件总线
理解
- Vue 原型对象上包含事件处理的方法
1) $on(eventName, listener): 绑定自定义事件监听2) $emit(eventName, data): 分发自定义事件3) $off(eventName): 解绑自定义事件监听4) $once(eventName, listener): 绑定事件监听, 但只能处理一次
- 所有组件实例对象的原型对象的原型对象就是 Vue 的原型对象
1) 所有组件对象都能看到 Vue 原型对象上的属性和方法2) Vue.prototype.$bus = new Vue(), 所有的组件对象都能看到$bus 这个属性对象
- 全局事件总线
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) 发布消息 --分发事件(3) 取消消息订阅 --解绑事件监听
- 需要引入一个消息订阅与发布的第三方实现库: PubSubJS
使用 PubSubJS
- 在线文档: https://github.com/mroderick/PubSubJS
- 下载: npm install -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): 取消消息的订阅
过度与动画
效果
vue 动画的理解
- 操作 css 的 trasition 或 animation
- vue 会给目标元素添加/移除特定的 class
- 过渡的相关类名:
1. xxx-enter-active: 指定显示的 transition2. xxx-leave-active: 指定隐藏的 transition3. xxx-enter/xxx-leave-to: 指定隐藏时的样式
基本过渡动画的编码
- 在目标元素外包裹<transition name="xxx">
- 定义 class 样式
a) 指定过渡样式: transitionb) 指定隐藏时的样式: opacity/其它