脚手架#

Vuecli自定义创建项目#

步骤：

1、安装脚手架

2、创建项目：

1
vue create 项目名

3、选择自定义: Manually select features

选择特性：(根据自己的项目来，需要什么选什么，上下键选择，空格键选中)

具体选择（根据自己的项目进行选择）

ESLint代码规范#

代码规范:一套写代码的约定规则。例如:“赋值符号的左右是否需要空格""一句结束是否是要加;”…

JavaScript Standard Style（目前市场上使用最多的规范）： https://standardis.com/rules-zhcn.html

下面是这份规则中的一小部分:

• 字符串使用单引号 ‘abc’
• 无分号 const name =‘zs’
• 关键字后加空格 if(name =‘ls’){..}
• 函数名后加空格 function name (arg){…}
• 坚持使用全等 ===、摒弃 ==
• …

一切不符合规范的代码都会报错

1
// 当保存的时候，eslint自动帮我们修复错误"
2
  "editor.codeActionsOnSave": {
3
    "source.fixAll": true
4
  },
5
  //保存代码，不自动格式化'
6
  "editor.formatOnSave":false,

非单文件组件#

1
  <div id="id" class="">
2
    <h1>{{str}}</h1>
3
    <!-- 使用组件 -->
4
    <school></school>
5
    <hr>
6
    <students></students>
7
    <all></all>
8
  </div>
9
  <div id="id2" class="">
10
    <all></all>
11
  </div>
12
  <script src="../../vue.js"></script>
13
  <script>
14
    // 创建组件
15
    const school = Vue.extend({
16
      template: `
17
        <div>
18
          <div>学校 :{{name}}</div>
19
          <div>地址 :{{address}}</div>
20
        </div>`,
21
      data() {
22
        return {
23
          name: '清华',
24
          address: '北京'
25
        }
26
      }
27
    })
28
    const students = Vue.extend({
29
      template: `
30
        <div>
31
          <div>学生 :{{name}}</div>
32
          <div>年龄 :{{age}}</div>
33
        </div>
34
      `,
35
      data() {
36
        return {
37
          name: '卡卡',
38
          age: 20
39
        }
40
      }
41
    })
42
    const all = Vue.extend({
43
      template: `<div><h2>全局配置</h2></div>`
44
    })
45
    // 全局注册
46
    Vue.component('all', all)
47
    new Vue({
48
      el: '#id',
49
      data: {
50
        str: '非单文件组件'
51
      },
52
      // 局部注册组件
53
      components: {
54
        school,
55
        students
56
      }
57
    })
58
    new Vue({
59
      el: '#id2'
60
    })
61
  </script>

单文件组件#

1
Student组件 （子组件）
2

3
<template>
4
    <!-- 配置模板结构 -->
5
  <div>
6
    <h2>学生姓名：{{name}}</h2>
7
    <h2>学生年龄：{{age}}</h2>
8
  </div>
9
</template>
10

11
<script>
12
    // 默认导出
13
    export default {
14
  //这里面配置组件信息
15
    name:'Student',//组件名，一般和文件名相同
16
    data(){
17
      return {
18
        name:'张三',
19
        age:18
20
      }
21
  };
22
</script>
23

24
<style>
25
    /*样式结构*/
26
</style>

1
App.vue   统帅组件（父组件/根组件）
2

3
<template>
4
  <div>
5
    <Student></Student>
6
  </div>
7
</template>
8

9
<script>
10
//引入 Student组件
11
import Student from "./components/Student";
12
export default {
13
   //组件注册
14
  components: {
15
    Student
16
  },
17
};
18
</script>

1
入口文件
2

3
//引入Vue 和 App组件
4
import Vue from 'vue'//这是个不完整的vue，只包含核心，没有模板解析器
5
import App from './App.vue'
6

7
new Vue({
8
  template: `<app></app>`,
9
  el: '#app',
10
  render: h => h(App)//引入的vue不包含模板解析器，所以要用render
11
})

注册全局组件#

1
入口文件中 / main.js中
2

3
// 引入组件
4
  import all from './components/all'
5
// 全局注册
6
    Vue.component('all', all)

父传子#

prop配置项#

1. 功能：让组件接收外部传过来的数据

2. 传递数据：<Demo name="xxx"/>

3. 接收数据：

   1. 第一种方式（只接收）：props:['name']

   2. 第二种方式（限制类型）：props:{name:String} 用的最多

   3. 第三种方式（限制类型、限制必要性、指定默认值）：

      1
      props:{
      2
        name:{
      3
        type:String, //类型
      4
        required:true, //必要性 ，是否必填
      5
        default:'老王', //默认值
      6
          validator(value){
      7
            //自定义校验逻辑
      8
            return 是否通过校验
      9
            //if (value > 100) {
      10
            //return true
      11
            // } else {
      12
            // console.error('传入的数字必须大于100')
      13
            //return false
      14
            }
      15
          }
      16
        }
      17
      }
      

   备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。

子传父#

this.$emit('事件名'，数据)

自定义事件（子传父）#

组件中的通信机制：子组件==>父组件 （子组件 传 数据 给 父组件）

绑定方式：

​ 1.在组件标签中绑定：父组件中 <School @事件名=“回调函数”/> 或 <School v-on:事件名=“回调函数”/>

​ 2.用ref绑定：父组件中

1
<Demo ref="标识名"/>
2
......
3
mounted(){
4
   this.$refs.标识名.$on('事件名',回调函数)
5
}

​ 3.若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法。

触发自定义事件：触发事件的组件中this.$emit('事件名'，参数（根据情况传入参数，可以有多个）)

解绑自定义事件：触发事件的组件中

​ 解绑单个 ：this.off('事件名')

​ 解绑多个 ：this.off(['事件名1','事件名2'])

​ 全部解绑 ：this.off()

组件上也可以绑定原生DOM事件，需要使用native修饰符。

注意：通过this.$refs.标识名.$on('事件名',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！

全局事件总线（GlobalEventBus）#

是一种组件间的通信机制：（任意组件间的通信）

使用：

​ 1、安装全局事件总线：在入口文件中(main.js 或 index.js)

1
// 法一：给Vue的一个实例对象安装全局事件总线
2
// Vue.prototype.$bus = new Vue()
3

4
// 法二：在当前管理组件的Vue实例对象的钩子上安装
5
new Vue({
6
  ......
7
  beforeCreate() {
8
    Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm
9
  },
10
    ......
11
})

​ 2.使用：

​ ①哪个组件需要接收数据就在哪个组件的mounted钩子上给$bus注册事件监听

1
methods(){
2
  demo(data){......}
3
}
4
......
5
mounted() {
6
    //注册事件监听
7
  this.$bus.$on('事件名',this.demo)//可直接写回调函数，建议将回调写到方法中
8
}

​ ②发送数据的组件中

1
// 发送
2
this.$bus.$emit('事件名',数据)

​ ③注册事件监听解的组件绑事件监听

1
 beforeDestroy() {
2
    // 解绑事件监听器
3
    this.$bus.$off('事件名')
4
  }

父传子孙通信-provide&inject配置项#

provide&inject作用：跨层级共享数据，可以理解为后代组件共用的data,但是后代组件需要用inject接收

1.父组件 provide 提供数据

1
export default {
2
  data() {
3
    return {
4
      color: 'blue',
5
      userInfo: {
6
        name: 'kaka',
7
        age: 17,
8
      },
9
    }
10
  },
11
  provide() {
12
    return {
13
      // 普通类型 【非响应式】
14
      color: this.color,
15
      // 复杂属性 【响应式】
16
      userInfo: this.userInfo,
17
    }
18
  },
19
}

2.子组件 inject 获取数据

1
export default {
2
  inject: ['color', 'userInfo'],
3
}

mixin（混入/合）配置项#

1. 功能：可以把多个组件共用的配置提取成一个混入对象

2. 使用方式：

   第一步定义混合——创建一个名为xxx的js文件，在里面配置组件需要共用的部分：

   1
   export default {
   2
       data(){....},
   3
       methods:{....}
   4
       ....
   5
   }
   

   全局也可以直接 ：Vue.mixin({这里面配置})

   第二步使用混入：

   ​ 1.哪个组件需要使用，就引入该混合文件。

   ​ 2.混入

   ​ 全局混入：入口文件中配置：Vue.mixin(xxx) 局部混入：vc中配置：mixins:['xxx']

插件#

1. 功能：用于增强Vue

2. 本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。

3. 定义插件：

   1
   对象.install = function (Vue, options) {
   2
       // 1. 添加全局过滤器
   3
       Vue.filter(....)
   4
   
   5
       // 2. 添加全局指令
   6
       Vue.directive(....)
   7
   
   8
       // 3. 配置全局混入(合)
   9
       Vue.mixin(....)
   10
   
   11
       // 4. 添加实例方法
   12
       Vue.prototype.$myMethod = function () {...}
   13
       Vue.prototype.$myProperty = xxxx
   14
   }
   

4. 使用插件：Vue.use(插件名（文件名）)

   ​

scoped样式#

在组件的样式中，样式默认是混合的，容易造成类名重复，需要用 scoped来限制

1. 作用：让样式在局部生效，防止冲突。
2. 写法：<style scoped>

消息订阅与发布(pubsub)#

也是一种组件间通信的技术，和全局事件总线相似 (任意组件间通信)

使用步骤：

1. 安装pubsub：npm i pubsub-js

2. 引入: import pubsub from 'pubsub-js' （发送数据和接收数据的组件都需要引入）

3. 获取数据的组件 pubsub.subscribe('订阅名',回调函数)

   1
     mounted() {
   2
       // this.pid = pubsub.subscribe('订阅名',回调函数)
   3
       // 回调函数的第一个参数是订阅名，第二个才是数据
   4
       // 和定时器的感觉一样，会返回一个订阅id
   5
       this.pid = pubsub.subscribe('getData', (pbname, data) => {
   6
         console.log(data)
   7
       })
   8
     },
   9
     beforeDestroy() {
   10
       // 取消订阅
   11
       pubsub.unsubscribe(this.pid)
   12
     },
   13
   }
   

4. 发送数据的组件: pubsub.publish('xxx',数据)

ref获取Dom和组件实例#

给标签添加的标识，相当于（id的替代）

​ 1.配置ref属性：内置标签 ： <h1 ref="xxx"></h1> 组件标签 <School ref="xxx"/>

​ 2.获取Dom和组件实例：this.$refs.xxx 内置标签获取到的是Dom , 组件标签获取到的是组件实例对象

​ 3 .this$refs.xxx获取到组件实例对象，可以直接.方法名()调用该组件的方法

$nextTick#

1
<template>
2
  <div class="app">
3
    <input v-if="isEdit" ref="inp" type="text" />
4
    <span v-else>点击编辑显示输入框</span>
5
    <button @click="edit">编辑</button>
6
  </div>
7
</template>
8

9
<script>
10
export default {
11
  data() {
12
    return {
13
      isEdit: false,
14
    }
15
  },
16
  methods: {
17
    edit() {
18
      // 让输入框显示
19
      this.isEdit = true
20
      // 让输入框获取焦点
21
      // this.$refs.inp.focus()//此处报错，因为vue是异步更新DOM,此时无法获取到DOM
22
      this.$nextTick(() => {
23
        // this.$nextTick(回调函数)，这里面的回调函数是当DOM更新完才执行
24
        this.$refs.inp.focus()
25
      })
26
    },
27
  },
28
}
29
</script>

插槽（父传子，子传父）#

1
父组件中：
2
        <Category>
3
           <div>html结构1</div>
4
        </Category>
5
子组件中：
6
        <template>
7
            <div>
8
               <!-- 定义插槽 -->
9
               <slot>插槽默认内容...</slot>
10
            </div>
11
        </template>

1
父组件中：
2
        <Category>
3
            <template slot="head">//写法一
4
              <div>html结构1</div>
5
            </template>
6

7
            <template v-slot:center>//写法二
8
               <div>html结构2</div>
9
            </template>
10

11
             <template #footer>//写法三
12
               <div>html结构2</div>
13
            </template>
14
        </Category>
15
子组件中：
16
        <template>
17
            <div>
18
               <!-- 定义插槽 -->
19
               <slot name="head">插槽默认内容...</slot>
20
               <slot name="center">插槽默认内容...</slot>
21
               <slot name="footer">插槽默认内容...</slot>
22
            </div>
23
        </template>

1
<slot :id="item.id" msg="测试文本"></slot>

1
{id:3，msg:'测试文本'}

1
<MyTable :list="list">
2
    <!-- 接收数据 -->
3
  <template #default="obj">
4
    <button @click="del(obj.id)">删除</button>
5
    </template>
6
</MyTable>

单页面应用程序#

Vue封装的过渡与动画#

1. 作用：在插入、更新或移除 DOM元素时，在合适的时候给元素添加样式类名。

2. 图示：

3. 写法：

   1. 准备好样式：

      • 元素进入的样式：
        1. v-enter：进入的起点
        2. v-enter-active：进入过程中
        3. v-enter-to：进入的终点
      • 元素离开的样式：
        1. v-leave：离开的起点
        2. v-leave-active：离开过程中
        3. v-leave-to：离开的终点

   2. 使用<transition>包裹要过度的元素，并配置name属性：

      1
      <transition name="hello">
      2
        <h1 v-show="isShow">你好啊！</h1>
      3
      </transition>
      

   3. 备注：若有多个元素需要过度，则需要使用：<transition-group>，且每个元素都要指定key值。