Vue学习笔记——使用Vue脚手架

3.1初始化脚手架

3.1.1.说明

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

3.1.2.具体步骤

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

npm install -g @vue/cli

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

vue create xxxx

第三步：启动项目

npm run serve

3.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：包版本控制文件

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.3.混入

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

3.4.插件

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

3.5.Todo-list案例

在这里插入图片描述

组件化编码流程（通用）

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

3.6.Vue中的自定义事件

绑定事件监听

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

触发事件

this.$emit('addTodo', todo)

3.7.全局事件总线

  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) 所有的组件都可以得到

3.7.2.指定事件总线对象

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

3.7.3.绑定事件

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

3.7.4 分发事件

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

3.7.5 解绑事件

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

3.8.消息订阅与发布

3.8.1.理解

  1. 这种方式的思想与全局事件总线很相似
  2. 它包含以下操作：
    订阅消息–对应绑定事件监听
    发布消息–分发事件
    取消消息订阅–解绑事件监听
  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): 取消消息的订阅

3.9.过度与动画

3.9.1.效果

在这里插入图片描述

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

在这里插入图片描述

3.9.3.基本过渡动画的编码

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