前端初学基础知识 2

JowayYoung 发布于2019-08-26 17:23 / 927人阅读

摘要：数值越小，排列越靠前，默认为。而不是直接改变状态。接受一个与实例具有相同方法和属性的对象，来提交一个通过方法触发允许我们将分割成模块。添加的方式使其成为命名空间模块，它的所有及都会自动根据模块注册的路径调整命名。

1.SCSS语法 变量申明

$+变量名+:+变量值例$width:200px

$width:200px 普通变量

$width:200px !default 默认变量即可覆盖

选择器嵌套


    
        home
        page

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://www.ucloud.cn/yun/110136.html

我是如何从零开始学习前端的

摘要：相关频道最后的坦白最后我得承认这一次我又标题党了无非是想吸引更多前端初学者进来，希望大家都能少走一些弯路，也希望那些从零开始自学前端的同学更有勇气去面对自己的选择。我是怎么走上前端开发这条路？首先，我是个文科生，大学里只学过vb，觉得计算机编程这东西太玄乎，不是我玩得转的。后来机缘巧合去做了一家互联网创业公司的HR，阅了上千份程序员的简历，面了上百个不同水平不同领域的程序员。跟程...

mykurisu 2019-08-19 17:55 评论0 收藏0
Java 初学者做的第一个微信小程序总结--关于Java基础

摘要：官方资料微信公众平台注册小程序。官网开发文档社区开发工具部署微信小程序微信小程序本身不需要部署，在微信开发工具中直接上传代码就行。为什么学习 Java 三年，目前已经工作了2年，因为自学，基础差，所以打算年末总结一下常见的基础知识和面试点；也可以通过独立做一个项目整合自己工作期间学习的知识，加深印象。但是想着回家或是平时手机用的多，做一款APP和小程序很方便查看。项目展示本...

mudiyouyou 2019-08-16 14:30 评论0 收藏0
零基础的前端开发初学者应如何系统地学习？

摘要：在有了基础之后，进一步学习内容包括框架。前端学习交流群禁止闲聊，非喜勿进。代码提交前必须做的三个事情检查所有变更跑一边单元测试手动运行一遍所有网站开发开发大致分为前端和后端，前端主要负责实现视觉和交互效果，以及与服务器通信，完成业务逻辑。其核心价值在于对用户体验的追求。可以按如下思路学习系统学习：基础知识： html + css 这部分建议在 w3school 在线教程上学习，边...

JouyPub 2019-08-01 17:53 评论0 收藏0
零基础的前端开发初学者应如何系统地学习？

摘要：在有了基础之后，进一步学习内容包括框架。前端学习交流群禁止闲聊，非喜勿进。代码提交前必须做的三个事情检查所有变更跑一边单元测试手动运行一遍所有网站开发开发大致分为前端和后端，前端主要负责实现视觉和交互效果，以及与服务器通信，完成业务逻辑。其核心价值在于对用户体验的追求。可以按如下思路学习系统学习：基础知识： html + css 这部分建议在 w3school 在线教程上学习，边...

funnyZhang 2019-08-29 13:42 评论0 收藏0
前端——基础

摘要：思路屡清楚后，我们就开始说零基础如何自学前端开发。首先，了解前端是干什么用的，简单来说就是负责把网站的页面以一种更好的用户体验提供给客户的一份工作，就是做网站开发的。其实这个问题很简单，我用最简单的语言给大家描述一下，学习一样东西就要了解这样东西学完了要干什么事情，有什么作用。然后就是应该学习哪些必要的内容，该如何运用得当的方法进行有效率的学习不至于自己摸不着头脑，然后就是一直坚持下去，直到...

番茄西红柿 2019-04-23 13:16 评论0 收藏0
前端初学基础知识 3

摘要：根据浏览器设备的绘制限制来更新动画，回调的次数常是每秒次。鼠标移入则停止自动改变树枝状态，转为由鼠标的横纵坐标控制。基本的深拷贝方法数组，等方法，新增运算符对象思路是把对象拆开分别赋值，同样可以使用新增运算符，循环等。 canvas动画动画的形成：先画出一幅图，改变其中的一些参数，重新绘制图片...不断的重复形成动画。 fillStyle:设置或返回填充绘画的颜色，渐...

Chao 2019-08-22 16:15 评论0 收藏0