简历表面的一些知识点（一）

1、百度统计是什么？

百度统计是百度推出的一款免费的专业网站流量分析工具，能够告诉用户访客是如何找到并浏览用户的网站，在网站上做了些什么，有了这些信息，可以帮助用户改善访客在用户的网站上的使用体验，不断提升网站的投资回报率。“世界很复杂，百度更懂你”，百度统计提供了几十种图形化报告，全程跟踪访客的行为路径。同时，百度统计集成百度推广数据，帮助用户及时了解百度推广效果并优化推广方案。

 

2、H5和CSS3新增特性？

CSS3:

选择器：属性选择器、伪类选择器、伪元素选择器。

特性：

1.颜色：新增RGBA，HSLA模式
2. 文字阴影（text-shadow）
3.边框： 圆角（border-radius）边框阴影： box-shadow
4. 盒子模型：box-sizing
5.背景：background-size 设置背景图片的尺寸background-origin 设置背景图片的原点
background-clip 设置背景图片的裁切区域，以”，”分隔可以设置多背景，用于自适应布局
6.渐变：linear-gradient、radial-gradient
7. 过渡：transition，可实现动画
8. 自定义动画
9. 在CSS3中唯一引入的伪元素是 ：：selection.
10. 媒体查询，多栏布局
11. border-image
12.2D转换：transform：translate(x，y) rotate(x，y) skew(x，y) scale(x，y)

 

13. 3D转换

伪类：

 

　p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
    p:last-of-type  选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
    p:only-of-type  选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
    p:only-child    选择属于其父元素的唯一子元素的每个 <p> 元素。
    p:nth-child(2)  选择属于其父元素的第二个子元素的每个 <p> 元素。
    :enabled、:disabled 控制表单控件的禁用状态。

    :checked，单选框或复选框被选中。

------------------------------------------------------------------------------------------------------------------------

H5:

1. 拖拽释放(Drag and drop) API 
2. 语义化更好的内容标签（header,nav,footer,aside,article,section）
3. 音频、视频API(audio,video)
4. 画布(Canvas) API
5. 地理(Geolocation) API
6. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
7. sessionStorage 的数据在浏览器关闭后自动删除
8. 表单控件，calendar、date、time、email、url、search  
9. 新的技术webworker, websocket, Geolocation支持HTML5标签；
* IE8/IE7/IE6支持通过document.createElement方法产生的标签，
  可以利用这一特性让这些浏览器支持HTML5新标签，
  浏览器支持新标签后，还需要添加标签默认的样式：
* 当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

10.本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；sessionStorage 的数据在浏览器关闭后自动删除。

3、JavaScript基础（内置对象、BOM、DOM、JSON、AJAX）

1、数据类型

         基本数据类型：字符串、数字、布尔值、空、未定义；

　     引用数据类型：对象、数组、函数；

2、转义字符

          \n　　换行

　　   \r　　回车

　　   \t　　tab

  　    \b　   退格

          \f　    换页符

3、浏览器对象BOM

（1）window对象的属性（窗口高度）

（2）浏览器存储

 

　　sessionStorage ：在浏览器中存储 key/value 对。 在关闭窗口或标签页之后将会删除这些数据。
　　localStorage： 在浏览器中存储 key/value 对。没有过期时间。
　　cookie： 存储于访问者的计算机中的变量，当同一台计算机通过浏览器请求某个页面时，就会发送这个cookie，识别用户。
（3）计时器

　　setInterval()；每隔指定的时间执行
　　setTimeout()；在指定时间后执行

（4）开启/关闭窗口

　　window.resizeTo(width,height)；把窗口的大小调整到指定的宽度和高度。

　　window.scrollTo(x,y) ；把内容滚动到指定的坐标。

　　window.open([URL], [窗口名称], [参数字符串])打开窗口

 

（5）History 对象

　　包含用户（在浏览器窗口中）访问过的 URL。可通过window.history进行访问。

 

　　**window.history.back() 加载历史列表中的前一个 URL。
　　window.history.forward() 加载历史列表中的下一个 URL。
　　window.history.go()；加载历史列表中的某个具体页面

（6）location对象，用于获取或设置窗体的URL。

 

（7）Navigator 对象

　　包含有关浏览器的信息，通常用于检测浏览器与操作系统的版本。

 

4、HTML 　DOM操作

1、DOM方法

　　节点访问：    getElementById() 返回带有指定 ID 的元素。
　　　　　　　　getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
　　　　　　　　getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。

　　创建节点：　createAttribute() 创建属性节点。
　　　　　　　　createElement() 创建元素节点。
　　　　　　　　createTextNode() 创建文本节点。

　　添加/删除/替换元素

　　　　　　　　　appendChild(新元素) 追加元素，新元素作为父元素的最后一个子元素进行添加

 

　　　　　　　　insertBefore(新节点，指定节点) 在指定的子节点前面插入新的子节点。

　　　　　　　　removeChild() 删除子节点，必须清楚该元素的父元素。

　　　　　　　　replaceChild(新节点，指定节点) ;：替换子节点。

2、DOM属性

　　　　innerHTML 用于获取或替换 HTML 元素的内容。

　　　　element.style.样式属性名=新样式内容，改变html样式。

3、元素对象
　　　　nodeName 属性返回节点的名称。
　　　　nodeValue 属性返回节点的值。
　　　　nodeType 属性返回节点的类型。nodeType 是只读的。

　　　　parentNode - 元素的父节点

　　　　childNodes - 元素的子节点

　　　　firstChild： 元素的第一个子元素

　　　　lastChild： 元素的最后一个子元素

4、DOM事件

　　onclick 点击

　　onblur：失去焦点
　　onfocus 得到焦点
　　onkeydown 按下键盘
　　onkeyup 松开键盘
　　onkepress 按住键盘
　　onmousedown 按下鼠标
　　onmouseup 松开鼠标
　　onmouseover 鼠标悬浮
　　ommousemove 移动鼠标
　　onmouseout 移开鼠标
　　select 选中
　　onload ：页面加载
　　onchange：改变
　　onsubmit ：表单提交

5、JSON数据

　　用于存储和传输数据的格式，通常用于服务端向页面传递数据；

　　JSON.stringify()： JavaScript -> JSON     js值转换成JSON字符串

　　JSON.parse() ： JSON-> JavaScript　　字符串转换成js对象

6、Ajax更新部分页面

（1）创建 XMLHttpRequest 对象

　　　　XMLHttpRequest 用于在后台与服务器交换数据。

（2）向服务端发送请求（异步/同步）

　　xmlhttp.open(“GET/POST”,url,异步true/同步false);规定请求类型、服务器上文件的地址以及是否异步处理请求。
　　xmlhttp.send(string);将请求发送到服务器。string：仅用于 POST 请求。

（3）服务器响应

7、Vue、Vuex、Vue-router分别是什么？有什么作用？

vue：

1、核心：实现数据双向绑定和组件化模式。

2、单向数据流：简单来说就是数据是单向的，数据流动方向可以追踪，流向单一，追踪问题可以更快捷，缺点是写起来不方便。

     双向数据流：数据之间是相通的，将数据变更的操作隐藏在框架内部。优点是表单交互较多的场景下，会简化大量与业务无关的代码。 缺点是无法追踪局部状态的改变，增加了出错时debug的难度。

3、对MVC、MVVM的理解

MVC:

　特点 ：（1）view传送命令到controller（控制器）

      　　  （2）controller完成业务逻辑后，要求model（模型）改变状态

　　        （3）model将新的数据发送到view，用户得到反馈。

MVC所有的通信都是单向的。

MVVM:

　特点：（1）各部分之间的通信都是双向的

 　　　   （2）采用双向绑定：view的变化。自动反应在viewModel（视图模型）。

4、vue的生命周期

  • beforeCreated() 在实例创建之间执行，数据未加载状态
  • created() 在实例创建、数据加载后，能初始化数据，dom渲染之前执行
  • beforeMount() 虚拟dom已创建完成，在数据渲染前最后一次更改数据
  • mounted() 页面、数据渲染完成，真实dom挂载完成
  • beforeUpadate() 重新渲染之前触发
  • updated() 数据已经更改完成，dom 也重新 render 完成,更改数据会陷入死循环
  • beforeDestory() 和 destoryed() 前者是销毁前执行（实例仍然完全可用），后者则是销毁后执行

5、组件通信

 

父传子：将父组件的数据绑定到使用子组件的自定义标签上，子组件在选项中添加一个props属性来接 受数据；
子传父：在响应该点击事件的函数中使用$emit来触发一个自定义事件，并传递一个参数。

6、v-if 和 v-show 区别

 

　使用了 v-if 的时候，如果值为 false ，那么页面将不会有这个 html 标签生成。

　v-show 则是不管值为 true 还是 false ，html 元素都会存在，只是 CSS 中的 display 显示或隐藏

7、$route和$router的区别

　　$router 为 VueRouter 实例，想要导航到不同 URL，则使用 $router.push 方法

　　$route 为当前 router 跳转对象里面可以获取 name 、 path 、 query 、 params 等

8、NextTick 是做什么的

　　　$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM

9、Vue 组件 data 为什么必须是函数

　　　因为js本身的特性带来的，如果 data 是一个对象，那么由于对象本身属于引用类型，当我们修改其中的一个属性时，会影响到所有Vue实例的数据。如果将 data 作为一个函数返回一个对象，那么每一个实例的 data 属性都是独立的，不会相互影响了

10、计算属性computed 和事件 methods 有什么区别

　　computed: 计算属性是基于它们的依赖进行缓存的,只有在它的相关依赖发生改变时才会重新求值

　　 method :只要发生重新渲染，method 调用总会执行该函数

11、 对比 jQuery ，Vue 有什么不同

　　jQuery 专注视图层，通过操作 DOM 去实现页面的一些逻辑渲染； Vue 专注于数据层，通过数据的双向绑定，最终表现在 DOM 层面，减少了 DOM 操作

　　Vue 使用了组件化思想，使得项目子集职责清晰，提高了开发效率，方便重复利用，便于协同开发

12、Vue 中怎么自定义过滤器

　　可以用全局方法 Vue.filter() 注册一个自定义过滤器，它接收两个参数：过滤器 ID 和过滤器函数。过滤器函数以值为参数，返回转换后的值

13、Vue 中怎么自定义指令

全局注册
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})
局部注册
directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

14、对 keep-alive 的了解

　　keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染

15、Vue 中 key 的作用

 

　　key 的特殊属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用 key，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。

　　有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误

16、vue 等单页面应用的优缺点

优点：
  • 良好的交互体验
  • 良好的前后端工作分离模式
  • 减轻服务器压力
缺点：
  • SEO难度较高
  • 前进、后退管理
  • 初次加载耗时多

Vuex

1、vuex是什么

 

　　vuex是状态管理器。统一管理和维护各个vue组件的可变状态。
　　vuex相当于一个全局变量，用来存储状态和管理数据。

 

2、五个模型

（1）state:定义初始化变量，
（2）mutations:更改 Vuex 的 store 中的状态的唯一方法是提交 mutation,命名规则：动词_名词，全部大写，例如：SET_USER
（3）actions: Action 提交的是 mutation，而不是直接变更状态。Action 可以包含任意异步操作。命名规则：动词名词,驼峰规则 例如:setUser；
（4）getters:简单来说就是对state里面的属性进行计算，所有需要访问vuex中的属性，都需使用getter来获取， getter需要单独成一个文件

 

vue-router

1、vue-router是什么？有哪些组件？

 

　　动态路由是单页面的路径管理器，vue页面应用是基于路由和组件的，路由用于设定访问路径 ，并将路径和组件映射起来。也就是说组件之间的切换。

　　就是从列表页跳转到详情页，列表页是一些接近或者重复的内容，所以详情页的页面结构是比较接近的，但是数据不一样。因此需要一个组件来渲染不同的页面，数据不一样是受到url的影响。所以url的值不一样，url不一样拿到的数据也不一样，因此渲染出来的页面也不一样。同一个结构渲染出来的页面不一样。因此是路由不一样，所以叫动态路由。这次的路由结构是和上次类似但不完全一样，是一个变化的值，可以调整和改变的值，经常用于列表页调整到详情页。

 

  • <router-link>和<router-view>和<keep-alive>

 

2、active-class 是哪个组件的属性？

　　active-class是router-link终端属性，用来做选中样式的切换，当router-link标签被点击时将会应用这个样式

3、怎么定义vue-router的动态路由？

　　动态路由的创建，主要是使用path属性过程中，使用动态路径参数，以冒号开头

4、vue-router响应路由参数的变化

  • 用watch 检测
// 监听当前路由发生变化的时候执行
watch: {
  $route(to, from){
    console.log(to.path)
    // 对路由变化做出响应
  }
}

　　

  • 组件内导航钩子函数
beforeRouteUpdate(to, from, next){
  // to do somethings
}

5、vue-router 传参

Params
  • 只能使用name，不能使用path
  • 参数不会显示在路径上
  • 浏览器强制刷新参数会被清空
  // 传递参数
  this.$router.push({
    name: Home，
    params: {
        number: 1 ,
        code: '999'
    }
  })
  // 接收参数
  const p = this.$route.params

Query:

  • 参数会显示在路径上，刷新不会被清空
  • name 可以使用path路径
  // 传递参数
  this.$router.push({
    name: Home，
    params: {
        number: 1 ,
        code: '999'
    }
  })
  // 接收参数
  const p = this.$route.params

6、vue-router实现路由懒加载（动态加载路由）

  • 把不同路由对应的组件分割成不同的代码块，然后当路由被访问时才加载对应的组件即为路由的懒加载，可以加快项目的加载速度，提高效率
const router = new VueRouter({
  routes: [
    {
      path: '/home',
      name: 'Home'，
      component:() = import('../views/home')
        }
  ]
})

　

 

posted @ 2020-07-05 23:44  柠檬IT  阅读(344)  评论(0)  编辑  收藏  举报