vue的知识点整理

目录

vue —— 数据驱动视图

  1. 什么是vue生命周期

    vue每个组件都是独立的，每个组件都有一个属于它的生命周期，从一个组件创建、数据初始化、挂载、更新、销毁，这就是一个组件所谓的生命周期。这给了用户在不同阶段添加自己的代码的机会。在组件中具体的方法有:

    beforeCreate > 在new一个vue实例后，只有一些磨人的生命周期钩子和默认事件，其他的东西都还没创建；在beforeCreate生命周期执行的时候，data和methods中的数据都还没有初始化。 不要在这个阶段使用data中的数据和methods中的方法！

    created > data和methods都已经初始化OK,如要需要，最早可以再这个阶段操作

    beforeMount > 执行到这个钩子的时候，在内存中已经编译好了模板了，但是还没有挂在到页面中

    mounted > 表示vue实例已经初始化完成，此时组件脱离创建阶段，进入运行阶段，如果我们想要通过插件操作页面上的DOM节点，最早可以在这个阶段进行

    beforeUpdate > data中数据已更新,页面还未同步

    updated > 页面显示的数据和data中的数据已经保持同步

    activited > keep-alive专属，组件被激活时调用

    deadctivated > keep-alive专属，组件被销毁时调用

    beforeDestroy > vue实例从运行阶段进入到会阶段, but此时所有的data和methods, 指令, 过滤器... 都还处于可用状态

    destroyed > 此时所有的data, methods, 指令, 过滤器...都是处于不可用状态, 组件正式被销毁

    拓展： vue中内置方法, 属性和生命周期的运行顺序(methods、computed、data、watch、props)

    ​ data的初始化是在created时已经完成数据观测(data observe), 并且诸如methods、computed、props等都已经初始化

    ​ img

    props -> methods -> data -> computed -> watch

  2. vue生命周期的作用是什么

    简单总结就是可以在生命周期的不同阶段调用对应的钩子函数

  3. 第一次页面加载会触发那些钩子

    beforeCreate，created，beforeMount，mounted

  4. 简述每个周期具体适合那些场景

    beforeCreate: loading事件, 在加载实例时触发

    created: 初始化完成时的事件写在这里, 例如数据(异步)请求, 也可以在此结束loading事件

    mounted: 挂在元素, 获取DOM节点

    updated: 对数据统一处理, 在此写响应函数

    beforeDestroy: 可以做阻断, 例如确认停止事件的确认框, 因为此时实例还未销毁

  5. created和mounted的区别

    created: 在模板渲染成HTML前调用,即通常初始化某些属性值, 然后再渲染成视图

    mounted: 在模板渲染成HTML后调用, 通常是初始化页面完成后, 在对HTML的DOM节点进行一些需要的操作(例如echart这里的操作可以放在这里进行, 而不是created里)

  6. vue获取数据在那个周期函数

    一般建议放在created中, 如果有DOM操作就需要放在mounted中

  7. 请详细说下你对vue生命周期的理解

    ???

    简述生命周期的概念, 表明它可以让用户在对应的阶段进行需要的操作, 列举八大基础钩子, 也可以对常用的created 和 mounted 进行拓展补充

vue路由知识点

  1. MVVM框架是什么

    MVVM > Model-View-ViewModel, 也就是把MVC中的controller演变成ViewModel.

    Model : 数据模型, 可以再Model中定义数据修改和操作的业务逻辑. 我们也可以称它为数据称, 因为它仅关注数据本身, 不关心任何行为

    View : 用户操作界面(UI), 当ViewModel对Model进行更新的时候, 会通过数据绑定更新到View

    ViewModel : 业务逻辑层, View需要什么数据, ViewModel要提供这个数据; View有某些操作, ViewModel就要对其响应, 所以, 也可以说它是 Model for View

    总结 : MVVM模式简化了界面与业务的依赖, 解决了数据频繁更新. MVVM在使用当中, 利用双向绑定技术, 使得Model变化时, ViewModel会自动更新, 而ViewModel变化时, View也会自动变化

  2. vue-router是什么? 它有哪些组件

    它是vue官方推荐使用的路由框架. 路由跳转都需要vue-router. 它有三个基本的概念: route, routes, router

    route > 指一条路由, 由单词也可以看出来, 它是单数

    routes > 指一组路由, 把route组合起来, 形成一个数组, 即为routes

    router > 是一个机制, 相当于一个管理者, 它管理着路由. 因为routes只是定义了一组路由, 他放在哪里都是静止的, router的作用就是当用户点击路由对应的按钮时, 它会到routes中去查找, 从而实现页面上的跳转

    它有哪些组件?

    <router-link :to='' active-class="active">//路由声明式跳转 ，active-class是标签被点击时的样式
<router-view> //渲染路由的容器
<keep-alive>  //缓存组件

  3. active-class是哪个组件的属性?

    router-link

    是用来做选中样式的切换

    使用方式:

    // 1. 直接在路由js文件中配置linkActiveClass
export default new Router({
  linkActiveClass: 'active'  // 可以自定义类名~
})

// 2. 直接在router-link中写入active-class
<router-link :to='' active-class="active">

  4. 怎么定义vue-router的动态路由?怎么获取传过来的值

    两种方式 : query || params

    基础用法 : 都可以通过this.$router.push 跳转

    • query :

      // 点击事件中写法; 推荐用path
this.$router.push({
  path: 'detail',
  query: {
    id: '1'
  }
})
// 用name也不报错
this.$router.push({
  name: 'detail',
  query: {
    id: '1'
  }
})
// router-link中写法
<router-link to='/detail?id=1'> handleToDetail </router-link>


// 传参接收
this.pageId = this.$route.query.id  // 注意此处为route

// 注意: 若使用name跳转动态路由, 需要在router中配置route的 'name' 属性
/** router/index.js **/
{
  path: '/detail',
  name: 'detail',
  component: () => import('@/view/detail')
}

    • params :

      // 只能使用name
this.$router.push({
  name: 'detail',
  params: {
    id: '2'
  }
})
// router-link中写法
<router-link to="/detail/" + item.id></router-link>
// 或者
<router-link to="{name: 'test', params: { id: this.pageId }}"></router-link>

// 接收参数
this.pageId = this.$route.params.id

/** router/index.js **/
{
  path: '/detail/:id',  // 容易出问题的地方, :xx  必须和传参时使用相同字段
  name: 'detail',       // 一定要设置name，才可以传params!
  component: ...
}

    区别 :

    • query通过url传参, 没有也没关系, params是路由的一部分, 必须在路由后面添加参数名
    • params是路由的一部分, 如果这个路由配置中要求params传参, 但是跳转的时候没有传这个参数, 就会导致失败或页面无内容
    • query 使用path传参, params 使用name传参
    • 二者传参的区别直白点可以理解为: query相当于get请求, 参数显示在地址栏; params相当于post请求, 参数不会在地址栏中显示

  5. vue-router有哪几种导航钩子

    vue-router的导航钩子又叫导航守卫；导航表示路由正在发生改变，vue-router提供的导航守卫主要用来：通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程：全局的，单个路由独享的，组件级的。

    注意：参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察$route对象来应对这些变化,或使用beforeRouteUpdate的组件内导航

    1. 全局守卫: router.beforeEach

      使用router.beforeEach 注册一个全局前置守卫

      const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  ...
})

      当一个导航触发时,全局前置守卫按照创建顺序调用. 守卫是异步解析执行, 此时导航在所有守卫resolve完之前一直处于等待中

      每个守卫方法都接收三个参数

      to: Route > 即将要进入的目标路由对象

      from: Route > 当前导航正在离开的路由

      next: Function > 一定要调用该方法来resolve这个钩子. 执行结果依赖next方法的调用参数

      • next(): 进行管道中下一个钩子. 如果全部钩子都执行完了, 则导航的状态就是confirmed(确认的)
      • next(false): 中断当前的导航. 如果浏览器的url改变了(可能是用户手动点击浏览器的后退按钮), 那么url地址会重置到from路由对应的地址
      • next( '/' ) 或者next({ path: '/' }) : 跳转到一个不同的地址. 当前的导航被中断, 然后进行一个新的导航. 你可以向next传递任意位置对象, 且允许设置诸如 replace: true, name: 'home' 之类的选项以及任何用在router-link的to prop 或router.push中的选项
      • next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError()注册过的回调。

    2. 全局解析守卫: router.beforeResolve

      2.5.0 新增

      在 2.5.0+ 你可以用 router.beforeResolve 注册一个全局守卫。这和 router.beforeEach 类似，区别是：在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。

    3. 全局后置钩子: router.afterEach

      你也可以注册全局后置钩子，然而和守卫不同的是，这些钩子不会接受 next 函数也不会改变导航本身：

      router.afterEach((to, from) => {
  // ...
})

    4. 路由独享的守卫: beforeEnter

      你可以在路由配置上直接定义 beforeEnter 守卫：

      const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

      这些守卫与全局前置守卫的方法参数是一样的。

    5. 组件内的守卫: beforeRouteEnter、beforeRouteUpdate(2.2新增)、beforeRouteLeave

      最后，你可以在路由组件内直接定义以下路由导航守卫：

      beforeRouteEnter 、beforeRouteUpdate (2.2 新增) 、beforeRouteLeave

      const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  //不过，你可以通过传一个回调给 next来访问组件实例。
  //在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。
  beforeRouteEnter (to, from, next) {
    next(vm => {
      // 通过 `vm` 访问组件实例
    })
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }
}

      注意：beforeRouteEnter 是支持给next传递回调的唯一守卫。对于beforeRouteUpdate 和 beforeRouteLeave 来说，this 已经可用了，所以不支持传递回调，因为没有必要了:

      beforeRouteUpdate (to, from, next) {
  // just use `this`
  this.name = to.params.name
  next()
}

      离开守卫beforeRouteLeave：通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消：

      beforeRouteLeave (to, from , next) {
  const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
  if (answer) {
    next()
  } else {
    next(false)
  }
}

  6. route和router的区别

    $router对象

    img

    • $router 是全局路由的实例, 是router构造方法的实例

    • 路由实例方法:

      1. push :

        // 字符串
this.$router.push('xxx') 
// 对象
this.$router.push({
  path: 'xxx'
})
// params
this.$router.push({
  name: 'xxx',
  params: {
    id: '1'
  }
})
// query
this.$router.push({
  path: 'xxx',
  query: {
    id: '2'
  }
})

        注意：push方法的跳转会向history栈添加一个新的记录， 当我们点击浏览器的返回按钮时可以看到之前的页面

      2. go :

        页面路由跳转, 前进或者后退

        this.$router.go(-1) // 后退1步
this.$router.go(1)  // 前进1步

      3. replact :

        替换当前页面, 不会向history栈添加新纪录, 一般用来做404页面

    $route对象

    img

    • $route对象表示当前激活的路由对象, 包含了当前的路由信息: 当前的路径, 参数, query对象等等.

    • $route的属性

      1. $route.path > 字符串，对应当前路由的路径，总是解析为绝对路径，如"/foo/bar"。

      2. $route.params > 一个 key/value 对象，包含了 动态片段 和 全匹配片段， 如果没有路由参数，就是一个空对象。

      3. $route.query > 一个 key/value 对象，表示 URL 查询参数。 例如，对于路径 /foo?user=1，则有$route.query.user == 1， 如果没有查询参数，则是个空对象。

      4. $route.hash > 当前路由的hash值 (不带#) ，如果没有 hash 值，则为空字符串。

      5. $route.fullPath > 完成解析后的 URL，包含查询参数和hash的完整路径。

      6. $route.matched > 数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。

      7. $route.name > 当前路径名字

      8. $route.meta > 路由元信息

  7. vue-router传参

    • 命名路由搭配params，刷新页面参数会丢失
    • 查询参数搭配query，刷新页面数据不会丢失
    • 接受参数使用this.$router后面就是搭配路由的名称就能获取到参数的值

  8. vue-router的两种模式

    1. 一种是利用url的hash，就是通常所说的锚点#，javascript通过hashChange事件来监听url的变化，IE7以下需要轮询。

      比如这个 URL：http://www.abc.com/#/hello，hash 的值为 #/hello。它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。

    2. 另一种是HTML5的History模式，它使url看起来像普通网站那样，以“/”分割，没有#，单页面并没有跳转。不过使用这种模式需要服务端支持，服务端在接收到所有请求后，都只想同一个html文件，不然会出现404。因此单页面应用只有一个html，整个网站的内容都在这一个html里，通过js来处理。

    history 模式利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持）
    这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。

    hash 模式和 history 模式都属于浏览器自身的特性，Vue-Router 只是利用了这两个特性（通过调用浏览器提供的接口）来实现前端路由。

  9. vue-router实现路由懒加载(动态加载路由)

    懒加载: 也叫延迟加载，即在需要的时候进行加载，随用随载

    推荐使用ES7的写法 —— import

    component: () => import('@/components/Two')

vue常见知识点

  1. vue的优点
  2. vue父组件向子组件传递数据
  3. 子组件向父组件传递事件
  4. v-show和v-if指令的共同点和不同点
  5. 如何让CSS只在当前组建中起作用
  6. 如何获取DOM
  7. 说出集中vue当中的指令和它的用法
  8. vue-loader是什么?使用它的用途有哪些?
  9. 为什么使用key? (应该是v-for)
  10. axios及安装
  11. axios解决跨域
  12. v-modal的使用
  13. scss的安装及使用
  14. 请说出vue-cli项目中src目录中每个文件夹和文件的用法
  15. 分别件数computed和watch的使用场景
  16. v-on可以监听多个方法吗
  17. $nextTick的使用
  18. vue组件中data为什么必须是一个函数
  19. vue事件对象的使用
  20. 组件间的通信
  21. 渐进式框架的理解
  22. vue中双向数据绑定是如何实现的
  23. 单页面应用和多页面应用区别及优缺点
  24. vue中过滤器有什么作用及详解
  25. v-if和v-for的优先级
  26. assets和static的区别
  27. 列举常用的指令
  28. vue常用的修饰符
  29. 数组更新检测
  30. vue.set视图更新
  31. 自定义指令详解
  32. vue的两个核心点
  33. vue和JQuery的区别
  34. 引用组件的步骤
  35. vue-cli打包命令是什么?打包后会导致路径问题,应该在哪里修改
  36. 三大框架的对比
  37. 跨组件双向数据绑定
  38. delete和vue.delete删除数据的区别
  39. SPA首屏加载慢如何解决
  40. vue-router跳转和location.href有什么区别
  41. vue slot
  42. 你们vue项目是打爆了一个js文件,一个css文件,还是多个文件?
  43. router-link在电脑上有用,在安卓上没反应怎么解决?
  44. router-link在IE和Firefox中不起左右(路由不跳转)的问题
  45. axios的她点有哪些
  46. 请说下封装vue组件的过程
  47. vue各种组建通信方法
  48. params和query的区别
  49. vue mock
  50. vue封装通用组件
  51. vue初始化页面山东问题
  52. vue禁止弹窗后的屏幕滚动
  53. vue更新数组时触发视图更新的方法
  54. vue常用的UI组件库
  55. vue如何引进本地背景图片
  56. vue如何引进sass
  57. vue修改打包后静态资源路径的修改

vuex常见知识点

  1. vuex是什么?怎么使用?哪种功能场景使用它?
  2. vuex有哪几种属性?
  3. 不适用vuex会带来什么问题
  4. vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中?
  5. vuex中如何一步修改状态
  6. vuex中actions和mutaions的区别

vue项目实战

  1. 顶部悬停效果
  2. 电话本列表效果(右边祖母分类,上下滑动,旁边字母显示高亮)
  3. vue做代理
  4. vue路由切换时的左滑和优化效果示例

ES6知识点

  1. let const var 比较
  2. 反引号(``)标识
  3. 函数默认参数
  4. 箭头函数
  5. 属性简写
  6. 方法简写
  7. Object.keys()方法,获取对象的所有属性名或方法名
  8. Object.assign()原对象的属性和方法都合并到了目标对象
  9. for...of循环
  10. import和export
  11. Promise对象
  12. 解构赋值
  13. set数据结构(可用于快速去重)
  14. Spread Operator展开运算符(...)
  15. 字符串新增方法

ES6数组知识点

  1. forEach()
  2. map()
  3. filter()
  4. reduce()
  5. some()
  6. every()
  7. all()

ES6编程题

  1. 使用解构,实现两个变量的值得交换
  2. 利用数组推到,计算出数组[1, 2, 3, 4]每一个元素的平方并组成新的数组

react

react生命周期知识点

  1. react生命周期函数
  2. react生命周期中,最适合与服务端进行数据交互的是哪个函数
  3. 运行阶段生命周期调用顺序
  4. shouldComponentUpdate是做什么的(react性能优化是哪个周期函数)
  5. 指出(组件)生命周期方法的不同

react基础知识点

  1. react中keys的作用
  2. react中refs的作用
  3. react中三种构建组件的方式
  4. 调用setState之后发生了什么?
  5. react diff原理
  6. 为什么建议传递给setState的参数是一个callback而不是一个对象
  7. 除了在构造函数中绑定this,还有其他方式吗
  8. setState第二个参数的作用
  9. (在构造函数中)调用super(props)的目的是什么
  10. 件数flux思想
  11. 在react当中element 和 component 有什么区别
  12. 描述事件在react中的处理方式
  13. createElement和cloneElement有什么区别?
  14. 如何告诉react它应该编译生产环境版本
  15. controlled Component 与 Uncontrolled Component 之间的区别是什么

react组件知识点

  1. 展示组件(Presentational component)和容器组件(Container component)之间有何不同
  2. 类组件(Class component)和函数式组件(Functional component)之间有何不同
  3. (组件的)状态(state)和属性(props)之间有何不同
  4. 何为受控组件(controlled component)
  5. 何为高阶组件(higher order component)
  6. 应该在React组件的何处发起ajax请求
  7. react中组件传值
  8. 什么时候在功能组件(Class Component)上使用类组件(Functional Component)?
  9. 受控组件(controlled component)与不受控制的组件(Uncontrolled component)有什么区别?
  10. react组件的划分业务组件、技术组件?

redux知识点

  1. redux中间件
  2. redux有什么缺点
  3. 简单说一下redux

react性能比较知识点

  1. vue和react的区别
  2. react性能优化的方案
  3. react项目用过什么脚手架
  4. 介绍一下webpack
  5. 为什么我们需要使用react提供的children API而不是JavaScript的map?

JS

  1. 简述同步和异步的区别
  2. 怎么添加、移除、复制、创建和查找节点
  3. 实现一个函数clone可以对JavaScript中的五种主要数据类型(Number、String、Object、Array、Boolean)进行复制
  4. 如何消除一个数组中重复的元素
  5. 写一个返回闭包的函数
  6. 使用递归完成1到100的累加
  7. JavaScript有哪几种数据类型
  8. 如何判断数据类型
  9. console.log(1 + '2')和console.log(1 - '2')的打印结果
  10. JS的事件委托是什么,原理是什么
  11. 如何改变函数内部的this指针的只想
  12. 列举集中解决跨域问题的方式,且说明原理
  13. 谈谈垃圾回收机制的方式及内存管理
  14. 写一个function, 清除字符串前后的空格
  15. JS事项集成的方法有哪些
  16. 判断一个变量是否是数组, 有哪些办法
  17. 箭头函数与普通函数有什么区别
  18. 随机取1 - 10之间的证书
  19. new 操作符具体干了什么
  20. ajax原理
  21. 模块化开发怎么做
  22. 异步加载JS的方式有哪些
  23. xml和json的区别
  24. webpack如何实现打包
  25. 常见web安全及防护原理
  26. 用过哪些设计模式
  27. 为什么要有同源限制
  28. offsetWidth/offsetHeight, clientWidth/clientHeight与scrollWidth/scrollHeight的区别
  29. JavaScript有哪些方法定义对象
  30. 谈谈你对AMD, CMD的裂解
  31. web开发中回话跟中的方法有哪些
  32. 介绍js有哪些内置对象
  33. 说几条写JavaScript的基本规范
  34. eval是做什么的
  35. null, undefined 的区别
  36. ["1", "2", "3"].map(parseInt) 打印是多少
  37. JavaScript代码中的"use strict"
  38. js延迟加载的方式有哪些?
  39. defer和async
  40. 说说严格模式的限制
  41. attribute和property的区别是什么?
  42. ECMAScript6 class
  43. 常见兼容性问题
  44. 函数防抖节流
  45. 原始类型有哪几种?null是对象吗
  46. 为什么console.log(0.2 + 0.1 == 0.3) // false
  47. 说一下js中类型转换的规则
  48. 深拷贝和浅拷贝的区别?如何实现
  49. 如何判断this?箭头函数的this是什么
  50. == 和 === 的区别
  51. 什么是闭包
  52. JavaScript原型, 原型链
  53. typeof() 和 instanceof() 的用法区别
  54. 什么是变量提升
  55. all、apply以及bind函数内部实现是什么样的
  56. 为什么会出现setTimeout倒计时误差？如何减少
  57. 谈谈你对JS执行上下文栈和作用域链的理解
  58. new的原理， 通过new 的方式创建对象和通过字面量创建有什么区别
  59. prototype和proto区别是什么？
  60. 使用ES5实现一个继承
  61. 取数组的最大值(ES5, ES6)
  62. ES6新的特性有哪些?
  63. Promise有几种状态, Promise 有什么优缺点?
  64. Promise构造函数是同步还是异步执行, then呢?Promise如何实现then处理?
  65. Promise和setTimeout的区别
  66. 如何实现Promise.all?
  67. 如何实现Promise.finally?
  68. 如何判断img加载完成
  69. 如何组织冒泡
  70. 如何组织默认事件
  71. ajax请求时,如何解析json数据
  72. json和jsonp的区别
  73. 如何用原生js给一个按钮绑定两个onclick事件
  74. 拖拽会用到那些事件
  75. document.write和innerHTML的区别
  76. jQuery的事件委托方法bind, live, delegate, on之间有什么区别?
  77. 浏览器是如何渲染页面的
  78. $(document).ready()方法和window.onload有什么区别
  79. jQuery中.get()提交和post()提交有区别吗
  80. 对前端路由的理解? 前后端路由的区别
  81. 手写一个类的继承
  82. XMLHttpRequest: XMLHttpRequest.readyState 状态码的意思

正则表达式常见知识点

  1. 建一个字符串: get-element-by-id转化为驼峰形势
  2. 匹配二进制数字
  3. 非零的十进制数字(有至少一位数字,但是不能以0开头)
  4. 匹配一年中的12个月
  5. 匹配常见的固定电话号码
  6. 匹配ip地址
  7. 匹配用尖括号括起来的以a开头的字符串
  8. 分割数字每三个以一个逗号划分
  9. 判断字符串是否包含数字
  10. 判断电话号码
  11. 判断是否符合指定格式
  12. 判断是否符合USD格式
  13. JS实现千位分隔符
  14. 获取url参数
  15. 验证邮箱
  16. 验证身份证号码
  17. 匹配汉字
  18. 去除首尾的'/'
  19. 判断日期格式是否符合'yyyy-MM-dd'的形式,简单判断,只判断格式
  20. 判断日期格式是否符合'yyyy-MM-dd'的形式,严格判断
  21. IPv4地址正则
  22. 十六进制颜色正则
  23. 车牌号正则
  24. 过滤HTML标签
  25. 密码强度正则, 最少6位,包括至少一个大写字母,一个小写字母,一个数字,一个特殊字符
  26. 匹配浮点数

浏览器/HTML/CSS知识点

  1. 什么是盒模型
  2. 行内元素有哪些?块级元素有哪些?空(void)元素有哪些?行内元素和块级元素有什么区别?
  3. 简述src和href的区别
  4. 什么css Hack
  5. 优雅降级 和 渐进增强
  6. px和em的区别
  7. Http的状态码有哪些
  8. 一次完整的HTTP请求是怎么一个过程
  9. HTTPS是如何实现加密的
  10. 浏览器是如何渲染页面的
  11. 浏览器的内核? 分别有什么代表的浏览器
  12. 页面导入时,使用link和@import有什么区别
  13. 如何优化图像,图像格式的区别
  14. 列举你了解HTML5, CSS3的新特性
  15. 可以通过哪些方法优化css3 animation渲染
  16. 列举几个前端性能方面的优化
  17. 如何实现同一个浏览器多个标签页之间的通信
  18. 浏览器的存储技术有哪些
  19. css定位方式
  20. 尽可能多的写出浏览器兼容性问题
  21. 垂直上下居中的方法
  22. 响应式布局原理
  23. 清除浮动的方法
  24. http协议和tcp协议
  25. 刷新页面,js请求一般会有哪些地方有缓存处理
  26. 如何对网站的文件和资源进行优化
  27. 你对网页标准和W3C重要性的理解
  28. http和https的区别
  29. data-属性的作用
  30. 如何让Chrome浏览器显示小于12px的文字
  31. 那些操作会引起页面回流(Reflow)
  32. CSS预处理器的比较: less, sass
  33. 如何实现页面每次打开时清除本页缓存
  34. 什么事Virtual DOM,为何要使用Virtual DOM
  35. 伪元素和伪类的区别
  36. http的集中请求方法和区别
  37. 前端需要注意哪些SEO
  38. img的title和alt有什么区别
  39. 从浏览器地址输入url到显示页面的过程发生了什么
  40. 如何进行网站性能优化
  41. 语义化的理解
  42. HTML5的离线存储怎么使用,工作原理能不能解释一下
  43. 浏览器是怎么对HTML5的离线存储资源进行管理和加载的呢
  44. iframe有哪些缺点
  45. web标准以及W3C标准是什么
  46. DOCTYPE的作用,严格模式与混杂模式如何区分?他们有何意义
  47. HTML全局属性(global attribute)有哪些
  48. Canvas和SVG有什么区别
  49. 如何在页面上实现一个圆形的可点击区域
  50. 网页验证码是干嘛的,是为了解决什么安全问题
  51. 请描述一下cookies, sessionStorage和localStorage的区别
  52. CSS选择器有哪些?那些属性可以继承
  53. CSS优先级算法如何计算
  54. CSS3有哪些新特性
  55. 请解释一下CSS3的flexbox(弹性盒布局模型),以及使用场景?
  56. 用纯CSS创建一个三角形的原理是什么?
  57. 常见的兼容性问题
  58. 为什么要初始化CSS样式
  59. absolute和containing block计算方式跟正常流有什么不同
  60. css中的visibility属性有个collapse属性值? 在不同浏览器下有什么区别
  61. display: none与visibility: hidden 的区别
  62. position跟display、overflow、float这些属性相互叠加后会怎样
  63. 对BFC规范(块级格式化上下文: block formatting context)的理解
  64. 为什么会出现浮动和什么时候需要清除浮动?清除浮动的方式
  65. 上下margin重合的问题
  66. 设置元素浮动后,该元素的display值是多少
  67. 移动端的布局用过媒体查询吗
  68. CSS优化/提高性能的方法有哪些
  69. 浏览器是怎么样解析CSS选择器的
  70. 在网页中应该使用奇数还是偶数像素的字体
  71. margin和padding分别适合什么场景使用
  72. 元素属相的百分比设定是相对于容器的高度吗
  73. 全屏滚动的原理是什么?用到了CSS的那些属性
  74. 什么是响应式设计, 响应式设计的基本原理是什么,如何兼容低版本的IE
  75. 诗句滚动效果
  76. ::before和:after中双冒号和单冒号有什么区别?解释一下这两个伪元素的作用
  77. 让页面里的字体变清晰,变细用CSS怎么做
  78. position: fixed; 在Android下无效怎么处理
  79. 如果需要动手些动画, 你认为最小时间间隔是多久,为什么
  80. li和li之间又看不见的空白间隔是什么原因引起的?有什么解决办法
  81. display:inline-block什么时候会显示间隙
  82. 有一个高度自适应的div,里面有两个div,一个高度100ox,希望另一个天马剩下的高度
  83. png, jpg, gif这些图片格式解释一下,分别什么时候用,有没有了解过webp
  84. style标签卸载body后和body前有什么区别
  85. CSS属性overflow属性定义溢出元素内容区的内容会如何处理
  86. 阐述一下CSS Sprites

微信小程序开发

  1. 注册小程序
  2. 微信开发者工具
  3. 小程序与普通网页开发的区别
  4. 小程序尺寸单位rpx
  5. 样式导入(WeUI for)
  6. 选择器
  7. 小程序image高度自适应及裁剪问题
  8. 微信小程序长按识别二维码
  9. 给页面加背景色
  10. 微信小程序获取用户信息
  11. 代码审核和发布
  12. 小程序微信认证
  13. 小程序申请微信支付
  14. 小程序的目录结构及四中文件类型
  15. 小程序文件的作用于
  16. 小程序常用组件
    1. view
    2. scroll-view
    3. swiper
    4. movable-view
    5. cover-view
    6. cover-image

小程序基础

  1. 授权得到用户信息
  2. 数据绑定
  3. 列表渲染
  4. 条件渲染
  5. 公共模板简历
  6. 事件及事件绑定
  7. 引用
  8. 页面跳转
    1. wx.switchTab
    2. wx.reLaunch
    3. wx.redirectTo
    4. x.navigateTo
    5. wx.navigateBack
  9. 设置tabBar
  10. 页面生命周期
  11. 转发分享

小程序高级

  1. request请求后台接口
  2. http-promise封装
  3. webview
  4. 获取用户收货地址
  5. 获取地理位置
  6. 自定义组件
  7. 微信小程序支付问题

小程序项目实战

  1. 微信小程序本地数据缓存
  2. 下拉刷新和下拉加载
  3. 列表页向详情页跳转(动态修改title)
  4. 客服电话
  5. 星级评分组件
  6. 小程序插槽的使用slot
  7. 模糊查询
  8. wxs过滤
  9. 小程序动画
  10. 列表根据所引致渲染
  11. 小程序动态修改class
  12. 小程序常用框架
  13. 参数传值的方法
  14. 提高小程序的应用速度
  15. 微信小程序的优劣势
  16. 小程序的双向绑定和vue的区别
  17. 微信小程序给按钮添加动画
  18. 微信小程序的tab按钮的转化
  19. 为小程序引进echarts
  20. app打开小程序流程
  21. 小程序解析富文本编辑器

小程序常见bug

  1. 域名必须是HTTPS
  2. input组件placeholder字体颜色
  3. wx.navigateTo无法跳转到tabbar的页面
  4. tabbar在切换时页面数据无法刷新
  5. 如何去掉自定义button灰色的圆角边框
  6. input textarea是APP的原生组件, z-index层级最高
  7. 一段文字如何换行
  8. 设置最外成标签的margin-bottom在IOS下不生效
  9. 小程序中canvas的图片不支持base64格式
  10. 回到页面顶部
  11. wx.setStorageSync和wx.getStorageSync报错问题
  12. 如何获取微信群名称
  13. new Date跨平台兼容性问题
  14. wx.getSystemInfoSyns获取windowHeight不准确
  15. 图片本地资源名称,尽量使用小写命名

移动端热点问题

  1. px border问题
  2. 2X图 3X图适配
  3. 图片在安卓上, 有些设备模糊问题
  4. 固定定位布局, 键盘挡住输入框内容
  5. click的300ms延迟问题和点击穿透问题
  6. phone以及ipad下输入框默认内阴影
  7. 防止手机中页面放大和缩小
  8. px, em, rem, %, vw, vh, vm这些单位的区别
  9. 移动端适配 - dpr浅析
  10. 移动端扩展点击区域
  11. 上下拉动滚动条时 卡顿、慢
  12. 长时间按住页面出现闪退
  13. iOS和Android下触摸元素时出现半透明灰色遮罩
  14. active兼容处理 即伪类 :active失效
  15. webkit mask兼容处理
  16. pc端与移动端字体大小的问题
  17. transition闪屏
  18. 圆角bug
  19. 如何解决禁用表单后移动端样式不统一问题
posted @ 2020-09-19 10:14  涂磊。  阅读(63)  评论(0)    收藏  举报