前端开发技巧与概念详解-CSDN博客

本文链接：https://blog.csdn.net/weixin_42748934/article/details/107694282

一：在规定文本的中间加一条直线（表示已删除）的两种方法：
1：css加入 text-decoration: line-through;
2：将该段文本放入标签内

二：a href=“javascript:void(0)” 和 a href="#"的区别：
javascript:void(0)，表示点击这个链接后执行一条javascript语句：void(0); 这条语句表示什么也不做，是个空语句。当绑定了onclick()事件并且点击后，页面会停留在原地

三：在页面中有些组件切换会很生硬（突然消失或突然出现），这里需要用css修饰
　　过渡transition是一个复合属性，包括transition-property、transition-duration、transition-timing-function、transition-delay这四个子属性。通过这四个子属性的配合来完成一个完整的过渡效果，transition-property: 过渡属性(默认值为all) transition-duration: 过渡持续时间(默认值为0s) transiton-timing-function: 过渡函数(默认值为ease函数) transition-delay: 过渡延迟时间(默认值为0s)。[注意]IE9-不支持该属性，safari3.1-6、IOS3.2-6.1、android2.1-4.3需要添加-webkit-前缀；而其余高版本浏览器支持标准写法

四：async和await

function 摇色子(){
    return new Promise((resolve, reject)=>{
        let sino = parseInt(Math.random() * 6 +1)
        setTimeout(()=>{
            resolve(sino)
        },3000)
    })
}
async function test(){
    let n =await 摇色子()
    console.log(n)
}
test()

上面这段代码async中使await 摇色子()先执行，等到三秒后执行完再把得到的结果赋值给左边的n，也就是说test函数需要三秒钟才执行完成，所以test函数是异步的，因此前面必须写async。

五：创建nuxt项目步骤

1：使用如下命令一步搭建项目
vue init nuxt-community/starter-template testPro --testPro为项目名称
2：需要进一步输入以下信息
Project name (testPro) test-pro --输入项目名称，回车 Project description (Nuxt.js project) --项目描述，直接回车即可 Author syf --输入作者姓名，回车即可
3.进入到testPro
cd testPro
4.安装依赖
npm install
5.启动项目
npm run dev

六：VUEX 核心API
1：state ：数据仓库，所有的数据都存在这里。 =》 vue对象的data。
2：getters ：可以搭配仓库中的数据结合起来联动相应的数据 =》 vue的计算属性 =》
3：mapGettersmutation ：更新数据仓库中的数据 -> mapMutationsaction ：负责异步操作（网络请求、定时器等内容）调用mutation来更新数据 -> mapActionsmodules : 模块模式提供了命名空间使状态管理支持了树形结构。（画重点）
使用 Vuex 通信
用来管理状态，共享数据，在各个组件之间管理外部状态
获取状态
引入 vuex, 并通过 use 方法使用它
创建状态仓库
通过 this.$store.state.xxx 直接拿到需要的数据

  import Vuex from 'vuex'
   Vue.use(Vuex) 
   //创建状态仓库
    var store = new Vuex.Store({
      state: {
        XXX: xxx
      }
    })
直接通过 this.$store.state.xxx 拿到全局状态

改变状态
通过 mutations
//创建状态仓库
var store = new Vuex.Store({
state: {
XXX: xxx
},
mutations: {
//定义状态改变函数，直接改变 state
a: function (state) {
//xxxx
}
}
})
//调用改变状态的函数
//this.$store.commit(‘a’)
2. 通过 actions
actions 提交的是 mutation, 而不是直接变更状态
//创建状态仓库
var store = new Vuex.Store({
state: {
XXX: xxx
},
mutations: {
//定义状态改变函数，直接改变 state
a: function (state) {
//xxxx
}
},
actions: {
b: function (context) {
//只能对 mutation 进行操作
context.commit(‘a’)
}
}
})
//调用 actions 中的方法

  //this.$store.dispatch('b')

为啥要用 actions 呢

actions 中可以包含异步操作，但是 mutation 中只能包含同步操作

getters

对数据进行处理(点击数据减少，最小为0)

  ...
  getters: {
    c(state) {
      //对 state 中的数据做处理（最小为0，不能为负数）
    }
  }
//调用 getters 中的方法
//this.$store.getters.c

VueRouter 怎么使用

Vue Router 是 Vue.js 官方的路由管理器

History 模式

这种模式充分利用history.pushStateAPI 来完成 URL 跳转而无须重新加载页面。

const router = new VueRouter({
mode: ‘history’,
routes: […]
})
当你使用 history 模式时，URL 就像正常的 url，例如http://yoursite.com/user/id，也好看！

导航/路由守卫

https://zhuanlan.zhihu.com/p/59889754

https://www.jianshu.com/p/dcf5ce5f3ed7

场景：有些页面必须要登录才能操作，例如登录状态下才能编辑/创建博客

路由元信息，配置路由时，加一个 meta以及导航守卫去控制路由对应组件的入口，

路由懒加载

常用API

router-link: 支持用户在具有路由功能的应用中 (点击) 导航，通过to属性指定目标地址

router-view: 组件是一个 functional 组件，渲染路径匹配到的视图组件

this.$router.push:

想要导航到不同的 URL，使用这个方法，这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。
当你点击(声明式)时，这个方法会在内部调用，所以说，点击等同于调用router.push(…)（编程式）。
this.$router.replace：跟router.push很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。

this.$route.params：获取到路径路径参数及所对应的值（{路径参数：值}）

七：ES6 新特性

新的变量声明方式——let const ：let一般用于声明一个变量，const来声明常量
新增api：
includes()：返回布尔值，表示是否找到了参数字符串。
startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。

八：数组中新增了map和reduce方法
map()：接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回。
举例：有一个字符串数组，我们希望转为int数组

let arr = ['1','20','-5','3'];
console.log(arr)

arr = arr.map(s => parseInt(s));
console.log(arr)

结果：
在这里插入图片描述
reduce()：接收一个函数（必须）和一个初始值（可选）
第一个参数（函数）接收两个参数：第一个参数是上一次reduce处理的结果；第二个参数是数组中要处理的下一个元素。
reduce()会从左到右依次把数组中的元素用reduce处理，并把处理的结果作为下次reduce的第一个参数。如果是第一次，会把前两个元素作为计算参数，或者把用户指定的初始值作为起始参数。
举例：const arr = [1,20,-5,3]
没有初始值：
在这里插入图片描述
指定初始值：

九：vue路由的两种模式
hash与history 对于Vue 这类渐进式前端开发框架，为了构建SPA（单页面应用），需要引入前端路由系统，这也就是Vue-router存在的意义。前端路由的核心，就在于——— 改变视图的同时不会向后端发出请求。

一、为了达到这个目的，浏览器提供了以下两种支持：
1、hash ——即地址栏URL中的#符号（此hsah 不是密码学里的散列运算）。比如这个URL：http://www.abc.com/#/hello, hash 的值为#/hello。它的特点在于：hash 虽然出现URL中，但不会被包含在HTTP请求中，对后端完全没有影响，因此改变hash不会重新加载页面。
2、history ——利用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法。（需要特定浏览器支持）这两个方法应用于浏览器的历史记录站，在当前已有的back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改是，虽然改变了当前的URL，但你浏览器不会立即向后端发送请求。 history模式，会出现404 的情况，需要后台配置。

二、404 错误
1、hash模式下，仅hash符号之前的内容会被包含在请求中，如 http://www.abc.com, 因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回404错误；
2、history模式下，前端的url必须和实际向后端发起请求的url 一致，如http://www.abc.com/book/id 。如果后端缺少对/book/id 的路由处理，将返回404错误。

经典面试题系列：
十： css兼容性有哪几种处理方案
首先，为什么会有兼容性问题？
浏览器太多了~不同厂商，甚至同一厂商不同版本，对同一段CSS的解析效果也不一致，这就导致了页面显示效果不统一，也就带来了兼容性问题。
处理方案主要包括四个方面——浏览器CSS样式初始化，浏览器私有属性，CSS hack语法和自动化插件。

由于每个浏览器的css默认样式不尽相同，所以最简单有效的方式就是对其进行初始化，在所有CSS开始前，先把marin和padding都设为0，以防不同浏览器的显示效果不一样（推荐库： Normalize.css）

*{ 
 margin: 0; 
 padding: 0; 
}

十一：ES6新增语法
这是es6中新增的字符串方法

可以配合反单引号完成拼接字符串的功能

1、反单引号怎么打出来？
将输入法调整为英文输入法，单击键盘上数字键1左边的按键。

2、用法
step1：定义需要拼接进去的字符串变量
step2：将字符串变量用${}包起来，再写到需要拼接的地方

3、示例代码：

let a='Karry Wang';
let str=`I love ${a}, because he is handsome.`;
//注意：这行代码是用返单号引起来的
alert(str);

十一： css3新属性有哪些
十二：怎么理解margin越界的问题
十三： js的继承方式有哪些
十四：深拷贝怎么实现
十五：js的事件轮训机制有了解吗
十六：说说call,apply,bind
十七：聊聊es6的promise
十八：为什么要用async，await
十九：vue生命周期
二十：vue双向数据绑定原理
二十一：vue的异步更新，以及nexttick
二十二：vue路由有哪几种方式，是如何实现的,以及注意事项
二十三：vuex的使用，及其原理
二十四：http与https的区别
二十五：从输入URL到页面展示发生了什么
二十六：redux的原理
二十七：项目中遇到过什么问题
二十八：有没有封装过组件，插件
二十九：webpack怎么进行打包的
三十：项目中是怎么优化的
三十一：xss怎么处理的