小程序分享-优快云博客

优点

使用方便
缺点

自由度太大导致不容易维护和debug
用法

1.初始化

创建事件总线并将其导出，以便其它模块可以使用或者监听它。
```
import Vue from 'vue' 
export const EventBus = new Vue()
复制代码
```
跟页面的mian.js的差别在于它没有引入page 并且以常量的形式被导出。

现在已经创建了EventBus，接下来你需要做的就是在组件中加载它，并且调用同一个方法，就如你在父子组件中互相传递消息一样。
1. 导入方式
import { EventBus } from '@/{dir}/event-bus.js'
1. 事件发送
在你需要传递的页面导入EventBus后：
```
let dataObj = {
        'index': indexTemp,
        'data': data
      }
      /**
       * 'event' 字符串要和接收端匹配
       */
      EventBus.$emit('event', dataObj)
复制代码
```
这里event是这次事件的名称，要传递的是一个对象
1. 事件接收
在你需要接收的页面导入EventBus后：
```
EventBus.$on('event', (resp) => {
      //resp 就是传递过来的dataObj
      var data = resp.data
      var index = resp.index
      ......
    
        }
    )
复制代码
```

事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

用法

在v-on后面的事件中连缀事件修饰符
.once

点击事件将只会触发一次
.stop

阻止事件继续传播
.prevent

提交事件不再重载页面

键盘事件

在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符。

示例

<h2>键盘事件</h2>
    <label>姓名</label>
    <input type="text"  @keyup.enter="logName">
    <label >年龄</label>
    <input type="text" @click.ctrl="logAge">
复制代码

计算属性和方法的区别

简单来说如果在标签的内容里面使用方法，会在每次虚拟dom树重新渲染的时候，全部都会执行到每次点击按钮都会刷新虚拟dom 从而每个内容里面的方法都会被执行

(虚拟dom：Vue会拷贝一份源dom进行操作然后进行通知源dom 而不是直接修改)

    //这里在虚拟dom树重新渲染的时候，会一次调用两个标签内部引用的方法
    <p>Sum+A = {{addToA()}}</p>
    <p>Sum+B = {{addToB()}}</p>
复制代码

官方的解释是->

v-for on a `<`template`>`

通常情况下,如果使用循环，v-for的同级标签会被index次渲染

    <div v-for="(item,index) in list">
        <h5>{{index}}.  {{item.name}}</h5>
        <p>Age = {{item.age}}</p>
    </div>
复制代码

层级关系如图：

这时我们可以用v-for on a <template> 来减少层级嵌套

    <template v-for="(item,index) in list">
        <h5>{{index}}.  {{item.name}}</h5>
        <p>Age = {{item.age}}</p>
    </template>
复制代码

Vue的src文件流程

首先初始化一个项目 Vue 2.X：

vue init webpack my-project

Vue 3.X

vue create my-project2

2.X下创建项目的目录结构如图：

index.html

当前项目的入口文件，里面有id='app'的根容器
App.vue

<template>
  <div id="app">  //这里的div id='app'标签会替换掉index文件下的div标签
  </div>
</template>
复制代码

main.js

import Vue from 'vue'  //引vue
import App from './App'  //引入根组件App.vue

Vue.config.productionTip = false  //对于开发版本，会默认向控制台打印 false取消提示

/* eslint-disable no-new */
new Vue({
  el: '#app',  
  components: { App }, //声明组件App
  template: '<App/>'  //使用组件App
})
复制代码

所以文件的执行顺序

index.html -> main.js ->App.vue

style样式的作用域和scoped

<style scoped>:style只在这个vue文件本身生效

<style>:style对这个文件内所有的子组件也会生效

props传值和传引用的区别

props传值：String boolean Number

多个组件的值是独立的

props传引用：Array Object

多个组件的值调用的是同一个内存上的数据，一个改动，所有的地方都会有变化

生命周期

  beforeCreate () {
    alert('组件Vue()实例化之前执行的函数beforeCreate')
  },
  created () {
    alert('组件Vue()实例化完毕 页面还没有显示created')
  },
  beforeMount () {
    alert('组件挂载前 页面仍未展示 但虚拟DOM已经配置 beforeMount')
  },
  mounted () {
    alert('组件挂载 此方法执行后 页面展示 mounted')
  },
  beforeUpdate () {
    alert('组件更新前 页面仍未更新 但虚拟DOM已经配置 beforeUpdate')
  },
  updated () {
    alert('组件更新 此方法执行后 页面刷新完毕 updated')
  },
  beforeDestroy () {
  },
  destroyed () {
  }
复制代码