前端初学基础知识 2

2024年5月28日 169次阅读 来源: 不快乐的程序员

1.SCSS语法

变量说明

  • $+变量名+:+变量值 例$width:200px
  • $width:200px 平常变量
  • $width:200px !default 默许变量即可掩盖

选择器嵌套

<header>
    <nav>
        <a href="#">home</a>
        <a href="#">page</a>
    </nav>
</header>

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中的setDataA
store.dispatch('setDataA',[0,0,0,0,0]) //moduleA  actions
store.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中的setDataA
store.dispatch('moduleA/setDataA',[0,0,0,0,0]) //moduleA  actions
store.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);
})
    原文作者：不快乐的程序员
    原文地址: https://segmentfault.com/a/1190000014041462
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞