1.SCSS语法

变量申明

• $+变量名+:+变量值 例$width:200px
• $width:200px 普通变量
• $width:200px !default 默认变量即可覆盖

选择器嵌套

scss

nav {  a {    color: red;        header {      color:green;    }  }  }

属性嵌套

css：

.box {     font-size: 12px;     font-weight: bold;}

scss：

.box {  font: {   size: 12px;   weight: bold;  }  }

伪类嵌套

.clearfix{&:before,&:after {    content:"";    display: table;  }&:after {    clear:both;    overflow: hidden;  }}

声明混合宏（可带参数）

申明：

@mixin border-radius {    -webkit-border-radius: 5px;    border-radius: 5px;}

调用：

button {    @include border-radius;}

sass 继承

.btn {  border: 1px solid #ccc;  padding: 6px 10px;  font-size: 14px;}.btn-primary {  background-color: #f36;  color: #fff;  @extend .btn;}

• sass占位符%：用占位符声明的代码，如果不被@extend调用就不会被编译。
• sass：支持加减乘除

2.JavaScript获取元素父节点、子节点、兄弟节点

• el.parentNode:获取元素父节点
• el.parentElement：获取元素父节点，目前没发现与parentNode的区别在哪里
• el.childNodes:获取元素子节点，会计算text，回车也算！
• el.children获取元素子节点，不计算text.
• el.nextSibling:后一个节点
• el.previousSibling: 前一个节点

3.flex布局

• display: flex
• display: inline-flex
• webkit内核浏览器加上-webkit前缀

基本概念

       容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size

容器的属性

• flex-direction：项目排列方向row、column、row-reverse、column-reverse
• flex-wrap：nowrap、wrap、wrap-reverse
• flex-flow：flex-direction和flex-wrap的简写形式
• justify-content：主轴上的对齐方式flex-start、flex-end、center、space-between、space-around
• align-items：交叉轴上的对齐方式flex-start、flex-end、baseline、strentch
• align-content：多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

项目属性

• order：项目的排列顺序。数值越小，排列越靠前，默认为0。
• flex-grow：项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
• flex-shrink：项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
• flex-basis：配多余空间之前，项目占据的主轴空间（main size）。
• flex：flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
• algin-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。

4.vuex 状态管理模式

       核心概念：vuex应用的核心是store，里面包含大部分的state，vuex的状态存储是响应式的，state中的状态不能直接更改

• state
• gettter
• mutation
• action
• module

/*vueStore.js*/import Vue from 'vue'import Vuex from 'vuex'import moduleA from './moduleA.js'Vue.use(Vuex);let state = {  a1: 12,  data: ['a','a','a','a','a']};let getters = {  printData: state => {    console.log(state.data);    return state.data;  }};let mutations = {  setData(state, data){    state.data = data;  }};let actions = {  setData({ commit },n){    commit('setData', n);  }};export default new Vuex.Store({    strict: true,    state,    getters,    mutations,    actions,    modules: {    moduleA  }});

/*moduleA.js*/let state = {  data: ['A', 'A',' A', 'A', 'A']};let getters = {  printDataA: state => {    return state.data;  }};let mutations = {  setDataA(state, data) {    state.data = data;  }};let actions = {  setDataA({commit}, n) {    commit('setDataA', n);  }};export default ({  strict: true,//严格模式  namespaced: true,  state,  getters,  mutations,  actions})

state

       在根实例中注册store选项，该store就会注入到下面的所有组件，子组件通过this.$store能访问到

computed: {        count () {        return this.$store.state.data //['a','a','a','a','a']        }    }

getter

       getter类似于计算属性，它的返回值会根据它的依赖被缓存起来，只有当它它的依赖值发生改变才会重新计算，也可以接受其他get特然作为第二个参数

getter会暴露store。getter对象

methods:{    getData(){        this.$store.getters.printData; //['a','a','a','a','a']    }}

通过方法访问

getters: {  getTodoById: (state) => (id) => {    return state.todos.find(todo => todo.id === id)  }}store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false

mutation

       vuex中更改store中的状态的唯一方法就是提交mutation，它接受state作为第一个参数，触发mutation的方法徐调用store.commit,我们可以向store.commit转入额外的参数，即mutation的载荷（payload）

methods:{      send(){        this.$store.commit('setData', [0,0,0,0,0]);        console.log(this.$store.state.data); //[0,0,0,0,0]      }

mutation必须是同步函数；

action

action类似于mutation，不同在于：

• action提交的是mutation。而不是直接改变状态。
• action可以包含任意异步操作。

       action接受一个与store实例具有相同方法和属性的context对象，context.commit来提交一个mutation、context.state、context.getters

Action 通过 store.dispatch 方法触发：

methods:{      send(){        this.$store.dispatch('setData', [0,0,0,0,0]);        console.log(this.$store.state.data); //[0,0,0,0,0]      }    }

module

       Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割

store.state.moduleA //moduleA的状态store.commit('setDataA',[0,0,0,0,0]) //触发moduleA的mutation中的setDataAstore.dispatch('setDataA',[0,0,0,0,0]) //moduleA  actionsstore.getters.printDataA; //getter

命名空间

       默认情况下模块内部的action、mutation、getter是注册在全局命名空间的，所以多个模块能够对同一mutation、action做出响应。添加namespaced: true的方式使其成为命名空间模块，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。

store.state.moduleA //moduleA的状态store.commit('moduleA/setDataA',[0,0,0,0,0]) //触发moduleA的mutation中的setDataAstore.dispatch('moduleA/setDataA',[0,0,0,0,0]) //moduleA  actionsstore.getters['moduleA/printDataA']; //moduleA  getter

5.axios

一、请求的方式

1、通过配置发送请求

axios(config);

axios(url[,config]);

axios({    method:"POST",    url:'/user/a',    data:{        msg: 'helloWorld'    }});

2、通过别名发送请求

axios.request(config);

axios.get(url[,config]);

axios.delete(url[,config]);

axios.head(url[,config]);

axios.post(url[,data[,config]]);

axios.put(url[,data[,config]])

axios.patch(url[,data[,config]])

3、并发请求

axios.all(params)

axios.spread(callback) ; //callback要等到所有请求都完成才会执行

4、创建axios实例

axios.create([config])

实例方法

axios#request(config)axios#get(url[,config])axios#delete(url[,config])axios#head(url[,config])axios#post(url[,data[,config]])axios#put(url[,data[,config]])axios#patch(url[,data[,config]])

二、请求的配置参数

• url: 请求地址
• method：请求方式默认get
• baseURL：相对地址
• transformRequest：选项允许我们在请求发送到服务器之前对请求的数据做出一些改动
• transformResponse：选项允许我们在数据传送到then/catch方法之前对数据进行改动
• headers：自定义请求头信息
• params：项是要随请求一起发送的请求参数----一般链接在URL后面
• data：选项是作为一个请求体而需要被发送的数据，该选项只适用于方法：put/post/patch
• timeout：如果请求花费的时间超过延迟的时间，那么请求会被终止
• responseType：返回数据的格式
• onUploadProgress：下载进度的事件
• ...

获取响应信息

/*search.js*/import axios from 'axios';export default function (keywords, type) {  const require = new Promise((resolve, reject) => {    axios.get('http://47.94.16.170:3000/search',{      params:{        keywords: keywords,        type: type      },    }).then((data)=> {      resolve(data);    })  });  return require;}/*调用*/import search from '@/api/search';let that = this;search(this.searchText, this.searchType).then(function (data) {    that.content = data.result;})

三、默认配置

1.全局默认配置

axios.defaults.baseURL = 'http://api.exmple.com';

2.自定义的实例默认设置

var instance = axios.create({    baseURL: 'https://api.example.com'});instance.defaults.headers.common["Authorization"] = AUTH_TOKEN;instance.get('/longRequest',{  timeout: 5000});

3.配置优先级

lib/defaults.js < 实例中的默认配置 < 请求中的默认配置

四、拦截器

//添加一个请求拦截器axios.interceptors.request.use(function(config){  //在请求发出之前进行一些操作  return config;},function(err){  //Do something with request error  return Promise.reject(error);});//添加一个响应拦截器axios.interceptors.response.use(function(res){  //在这里对返回的数据进行处理  return res;},function(err){  //Do something with response error  return Promise.reject(error);})