HTML 属性和 DOM 属性的区别

页面是如何形成的–

阅读更多

JS Array.filter()数组过滤器

1. 该方法接收一个回调**函数**作为参数
2. 该方法会为数组中每个元素调用一次回调函数(通过将其作为参数传入)，每次调用，要求回调函数return一个bool值
3. 该方法会根据返回值，保留为true的元素，舍弃为false的元素

阅读更多

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 传入，以供操作

我的博客搬家啦~当你看到本篇时，意味着我已经将博客搬到了Gitee码云。

原因是GitHub Pages太不稳定，国内用户经常访问不到。

下面讲一讲如何将博客从GitHub迁移到Gitee–

阅读更多

1. 组件插槽

   匿名插槽

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

阅读更多

父子组件

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

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

阅读更多

1. 组件切换

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

阅读更多