前端笔记命名规范: BEM, 网易NEC. 模块化, 考虑一个警告窗口(position: absolute), 所有组

CSS

命名规范: BEM, 网易NEC. 网页布局: MDN: flex布局, grid布局. 选择器: MDN-CSS选择器

.demo-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
}
.demo-item {
    flex: 1 1 auto;
    justify-items: center;
    align-items: center;
}

优先级：伪类(如:hover)、属性选择器(如[type]="input")优先级同类选择器。通用选择器(*)和组合器(>+~)不影响优先级。

a:link a:visited a:hover a:active

使用initial来撤销样式（注意display的初始值是inline）

支持无单位的属性：line-height, z-index, font-weight.

HTML

<head>
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="stylesheet" href="/style.css">
    <script src="app.js"></script>
</head>

JS

const safeHTML = (val) => { val.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;'); }

Vuex

模块化, 考虑一个警告窗口(position: absolute), 所有组件都能设置值而不用导入组件.

// src/store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
import common from './common';

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    common,
  },
});

// src/store/common.js
const state = () => ({
  warnMessage: '',
});

const getters = {
  getWarn(state) {
    return state.warnMessage;
  },
};

const actions = {
  setWarn({ commit }, msg) {
    commit('SET_WARN', msg);
  },
};

const mutations = {
  SET_WARN(state, payload) {
    state.warnMessage = payload;
  },
};

export default {
  namespaced: true, // 启用单独的命名空间
  state,
  getters,
  actions,
  mutations,
};

const errorMsg = 'error string';
// 在组件中
this.$store.state.common.warnMessage;
this.$store.getters['common/getWarn'];
this.$store.dispatch('common/setWarn', errorMsg);
this.$store.commit('SET_WARN', errorMsg)