arrayObect.shift()

用于把数组的第一个元素从其中删除，并返回第一个元素的值

* **注释：**该方法会改变数组的长度。
* **提示：**要删除并返回数组的最后一个元素，请使用 pop() 方法。
* 与`arrayObect.push()`、定时器配合使用可实现轮播效果(公告栏)，第一个元素被删除后，再重新添加到数组末尾，实现轮回

阅读更多

String.padStart(int,String)

阅读更多

使用Vue实现对数据的增删改查

阅读更多

Vuex

Vuex：Vue 配套的公共数据管理工具(响应式状态存储库)，用于保存共享的数据，整个程序中的任何组件都可访问和提交数据变动

–可用于简单实现多级组件、兄弟组件数据传递

使用：

1. 导入vuex.js
2. 创建对象 vuex 对象(状态存储仓库 store)

1
2
3
4
5
6

const store = new Vuex.Store({
  state: {
    //state相当于data，用于保存数据/状态
    count: 0,
  },
});

3. 在祖先组件注册处添加store：store

然后…

1. 访问共享数据

该祖先组件及其子孙组件即可通过this.$store.state.count，访问store中的state中的数据

2. 修改共享数据

由于组件复用，当共享数据变动导致错误时，不清楚是哪个组件发生了错误，就要逐一检查，因此不建议直接修改共享数据，而采用–

提交数据变动：在 vuex 对象中添加 mutation(突变)对象，与 state 同级，如下 ↓

1
2
3
4
5
6
7
8
9
10
11
12

const store = new Vuex.Store({
  state: {
    //state相当于data，用于保存数据/状态
    count: 0,
  },
  mutations: {
    //mutations:突变,用于保存数据变动函数
    increment(state) {
      state.count++;
    },
  },
});

• 在mutations中定义数据变动函数，vuex 会默认为这些函数传入state，允许在其中使用 state.数据名改变数据状态
• 当需要数据改变时，使用this.$store.commit('函数名')调用mutations中对应的数据变动函数即可，可以理解为显式地提交了数据变动
• 这样的话，错误不在组件，而在这些数据变动函数中，因此直接到对应函数中追踪错误即可

3. getters

1
2
3
4
5
6
7
8
9
10
11
12
13
14

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: "...", done: true },
      { id: 2, text: "...", done: false },
    ],
  },
  getters: {
    //相当于实例中的computed，第一次调用后会缓存
    doneTodos: (state) => {
      return state.todos.filter((todo) => todo.done);
    },
  },
});

vuex 也会将 state 传入，以供操作

1. 组件插槽

   匿名插槽

默认情况下不能在子组件标签中额外**(不是子组件的

阅读更多

父子组件

父子组件即组件嵌套，例如：实例与<template>定义在其中的局部组件与就是一对父子组件。之前也说过实例就是一个组件，其中可以设置 methods、components 等对象，那么局部组件中也可设置 components，就是设置其子组件，如下 ↓

为自定义全局组件设置子组件

阅读更多

1. 组件切换

对于自定义的组件，也可像普通元素一样使用 v-if 进行切换

阅读更多

Vue 组件

全局组件

1. 创建组件构造器

Vue.extend(options)

需在构造器中编写模板template，用于说明这个组件中要写什么元素

阅读更多

Vue 过渡动画

类名过渡

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果

阅读更多

1. 展示未绑定数据的模板元素
2. 绑定数据并生成 HTML
3. 渲染 HTML 元素

当用户网速较慢或网站性能较差时，用户可能会看到 vue 模板内容，

阅读更多