Web技术基础之复习提纲
1、vuejs开发webapp中，1px边框问题
https://www.jianshu.com/p/2157210a93a5
首先说说，为什么会存在1px的问题，由于现在市场上的移动设备屏幕种类太多，dpr不同，设计师给的稿子，上面明明是1px的线，在高分辨率的屏幕下，可能显示成2px，甚至更大，然而对于有强迫症的设计师，这点是不能容忍的，所以就出现了1px的问题。
Index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>web03</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
在main.js中引入下面两个文件，重新设置边框
import './assets/styles/border.css'
import './assets/styles/reset.css'
引入Stylus（一个CSS预处理器）
cnpm install stylus --save-dev
cnpm install stylus-loader --save-dev
2、使用 fastclick解决移动端click事件300毫秒延迟方法
判断，上下滑动，点击，放大事件
- 安装fastclick插件
npm install fastclick --save - 安装完以后，可以在在main.js中全局引入，并绑定到body，全局生效。或者在单页面引入，只针对当前页面生效
import fastClick from ‘fastclick’
fastClick.attach(document.body) // 插件绑定在页面上
}
3. swipe组件的使用
（1）安装
npm install vue-awesome-swiper --save
（2）全局引入
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
// require stylesimport 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper, /* { default global options } */)
（3）用法
<template>
<swiper :options="swiperOption" ref="mySwiper">
<!-- slides -->
<swiper-slide>I'm Slide 1</swiper-slide>
<swiper-slide>I'm Slide 2</swiper-slide>
<swiper-slide>I'm Slide 3</swiper-slide>
<!-- Optional controls -->
<div class="swiper-pagination" slot="pagination"></div>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
<div class="swiper-scrollbar" slot="scrollbar"></div>
</swiper>
</template>
-------------------scrip：Return --------------
swiperOption: {
pagination: '.swiper-pagination',
loop: true
}
（4）小白点颜色调整
.swiper-content >>> .swiper-pagination-bullet-active
background :#fff
（5）为了防止网速慢的时候先加载好的移动到上面，需要设置
Heigh：0
Padding-bottom=26.7%
4、拖动图标的实现
（1）用将icon包含，将每一页的内容用包含
（2）样式
（3）动态数据
（4）每一页8个图标，Math.fllor(index18)----向下取整
5、Axios的使用
（1）安装axios
cnpm install axios from ‘axios’ --save
（2）引入
import axios from 'axios'
Vue.prototype.$ajax = axios
（3）使用
import axios from 'axios'
getHomeInfo () {
axios.get('/api/index.json')
.then(this.getHomeInfoSucc)
}
（4）使用Mock数据,将api映射到目的文件加下，（config->index.js）
6、Better-scroll（滚动查询）
封装一个better-scroll组件，包括上拉刷新，下拉刷新效果。
（1）安装
cnpm install better-scroll --save
（2）引入需要的页面局部引入
import Bscroll from 'better-scroll'
（3）HTML的写法
（4）Css
.list
overflow :hidden
position :absolute
top:1.3rem
left:0
right:0
bottom:0
1、这里只是举例，并不是一定要这样写。
2、首先将 获取到的加了 ref 的div 的 高度固定， 可以设置定位， 也可以设置 height， max-height…
2、加 overflow: hidden 。
（5）Js
- 在mount（）中引入
mounted () {
this.scroll = new Bscroll(this.$refs.wrapper, {click: true})
},
- 具体定位
letter () {
if (this.letter) {
const element = this.$refs[this.letter][0]
this.scroll.scrollToElement(element)
}
}
7、优化问题
1、不需要重复加载的数据写在updata（）中，当重新渲染页面时再更新
2、定时器
3、keep alive
是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。
<keep-alive include="test-keep-alive">
<!-- 将缓存name为test-keep-alive的组件 -->
<component></component>
</keep-alive>
当组件在keep-alive内被切换时组件的activated、deactivated这两个生命周期钩子函数会被执行
被包裹在keep-alive中的组件的状态将会被保留，例如我们将某个列表类组件内容滑动到第100条位置，那么我们在切换到一个组件后再次切换回到该组件，该组件的位置状态依旧会保持在第100条列表处
4、localStorage
Vue中实现本地存储的方法。
（1）保存 localStorage.setItem(‘hou’ , JSON.stringify(info));
（2）获取 localSorage.getItem(‘hou’);
（3）删除 localStorage.removeItem(‘hou’);
（4）监听
window.addEventListener('storage', function (e) {
console.log('key', e.key); console.log('oldValue', e.oldValue);
console.log('newValue', e.newValue); console.log('url', e.url);
})
vuex中加入locaStorage
let defaultCity = ‘上海’
try {
if (localStorage.chooseCity) {
defaultCity = localStorage.chooseCity
}
} catch (e) {}
export default {
chooseCity : defaultCity
}
8、vuex的使用
1、安装，引入
cnpm install vuex --save
import Vuex from 'vuex'
Vue.use(Vuex)
2、结构
3、代码
this.$store.state.name
this.$store.getters.getName
this.$store.commit(“setName”,data)
this.$store.dispatch(“setName”,data)
4、用法二
import { mapState,mapActions } from 'vuex'
computed: {
...mapState({
city: 'chooseCity'
})
},
5、vuex是什么
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
这个状态自管理应用包含以下几个部分：
- state，驱动应用的数据源；
- view，以声明方式将 state 映射到视图；
- actions，响应在 view 上的用户输入导致的状态变化。
6、state，getter,mutation,action分别是干什么的
state：vuex的仓库，保存着所有的全局变量
getter： 对state中数据派生出来的一些状态，例如对数据进行过滤。
mutation： 更改vuex中store中状态的唯一方法就是提交mutation（是同步函数）
Action： action类似于mutation，不同点在于，action提交的是mutation，可以实 现异步提交
Module：可以分散管理
7、项目结构
Vuex 并不限制你的代码结构。但是，它规定了一些需要遵守的规则：
（1）应用层级的状态应该集中到单个 store 对象中。
（2）提交 mutation 是更改状态的唯一方法，并且这个过程是同步的。
（3）异步逻辑都应该封装到 action 里面。
9、递归组件的使用
10.vue-router
1、什么是vue-router
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。
2、结构
import VueRouter from ‘vue-router’
Vue.use(VueRouter)
const routes=[
{path:’/’,component:’’,beforeEnter:()=>{
}
}
]
const router =new VueRouter({
routes,
mode:’history’
})
const router=new VueRouter({}).beforeEacher((from,to,next)=>{
})
3、动态路由匹配
{ path: '/user/:id', component: User }
<div>User {{ $route.params.id }}</div>
（1）响应路由参数的变化
提醒一下，当使用路由参数时，例如从/user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。
复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch(监测变化)$route对象
const User = {
template: '...',
watch: {
'$route' (to, from) {
// 对路由变化作出响应...
}
}}
4、嵌套路由：
[
{
path: '/user/:id', component: User,
children: [
// 当 /user/:id 匹配成功，
// UserHome 会被渲染在 User 的 <router-view> 中
{ path: '', component: UserHome },
// ...其他子路由
]
}
]
5.编程式导航
除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。
（1）router.push(location, onComplete?, onAbort?)
想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。
| 声明式 | 编程式 |
|---|---|
<router-link :to="..."> | router.push(...) |
（2）router.replace(location, onComplete?, onAbort?)
跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。
声明式 编程式
<router-link :to="..." replace> router.replace(...)
（3）router.go(n)
这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步
// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)
// 后退一步记录，等同于 history.back()
router.go(-1)
6、命名路由
在 routes 配置中给某个路由设置名称
7、重定向和别名
重定向：{ path: ‘/a’, redirect: ‘/b’ }
别名：/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。
{ path: ‘/a’, component: A, alias: ‘/b’ }
8、配置路由模式
mode 表示路由的配置模式两种
hash模式（默认）:使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。
比如这个 URL：http://www.test.com/#/hello，hash 的值为 #/hello。它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。history模式: 通过 history 完成 URL 跳转而无须重新加载页面。
：使用/xxxx模式显示当前路由，改变地址栏，但是不会向后台发送请求，如果刷新页面，则会以地址栏地址向后台发送请求，此时要求后台服务器，响应此路径请求，并且照样返回index.html
hash与history的明显区别
| 比较 | 项目 | Value |
|---|---|---|
| url显示 | 有#，很Low | 无#，好看 |
| 回车刷新 | 可以加载到hash值对应页面 | 一般就是404掉了 |
| 支持版本 | 支持低版本浏览器和IE浏览器 | HTML5新推出的API |
9、路由守卫
（1）全局前置守卫
（2）全局后置钩子
router.afterEach((to, from) => {
// ...})
（3）路由独享守卫
（4）组件内的守卫 （5）全局解析守卫
Hash与history区别
-
更关键的一点是，因为hash发生变化的url都会被浏览器记录下来，从而你会发现浏览器的前进后退都可以用了，同时点击后退时，页面字体颜色也会发生变化。
-
vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。
如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。
11、vue生命周期图
下图展示了实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。
1、什么是vue生命周期？
答： Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。
2、vue生命周期的作用是什么？
答：它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。
3、vue生命周期总共有几个阶段？
答：它可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/销毁后
4、第一次页面加载会触发哪几个钩子？
答：第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子
5、DOM 渲染在 哪个周期中就已经完成？
答：DOM 渲染在 mounted 中就已经完成了。
render方法的实质就是生成template模板；
1、new vue(),数据还没有挂载，还是个空壳 Beforecreate
2、挂载数据，绑定事件，然后执行created函数
3、编译模版为虚拟的dom放入render函数中准备渲染，然后执行beforeMount钩子函数
4、接下来开始render，渲染出真实地dom，然后执行mounted钩子函数
5、当组件或实例的数据更改以后，会立刻执行beforeUpdate
6、当更新完成后，执行updated
7、当调用destroy时，立即执行beforeDestroy
8、组件的数据绑定、监听…去掉后只剩下dom空壳，这个时候，执行destroyed
12、json是什么，json的代码格式
什么是json：是一种轻量级的数据交换格式。
代码格式：JSON 键值对是用来保存 JS 对象的一种方式
{
"people":[
{
"firstName":"li",
"lastName":"hui"
},
{
...
}
]
}
vue基础
1、vue配置别名并引用
（1）
@import '~styles/mixins.styl'
（2）引入统一css样式
@import '~@/assets/styles/mixins.styl'
Mixins.styl文件
ellipsisCss()
overflow :hidden
white-space :nowrap
text-overflow :ellipsis
用法：
ellipsisCss()
2、vue项目打包
cnpm run build
3、RESTful无状态原则
因为无状态原则的特性，让RESTful在分布式系统中得到了广泛的应用，它改善了分布式系统的可见性、可靠性以及可伸缩性，同时有效的降低了Client与Server之间的交互延迟。无状态的请求有利于实现负载均衡，在分布式web系统下，有多个可的Server，每个Server都可以处理Client发送的请求。有状态的请求的状态信息只保存在第一次接收请求的Server上，所以后来同一个Client的请求都只能由这台Server来处理，Server无法自由调度请求。无状态请求则完全没有这个限制。其次，无状态请求有较强的容错性和可伸缩性。如果一台服务器宕机，无状态请求可以透明地交由另一台可用Server来处理，而有状态的请求则会因为存储请求状态信息的Server宕机而承担状态丢失的风险。Restful风格的无状态约束要求Server不保存请求状态，如果确实需要维持用户状态，也应由Client负责。
get：查询
put： 更新
post：插入
delete：删除
访问路由是一样的
4、如何引入组件
（1）自定义组件：
- import Header from ‘’
- 在components中进行声明
- 使用
（2）引入第三方组件：
- cnpm install … --save
- 在main.js中引入
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)
- 根据第三方插件的要求去用
5、vue.js是什么
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
6、语法
见复习提纲
vue面试题
1、自定义指令（v-check、v-focus）的方法有哪些？它有哪些钩子函数？还有哪些钩子函数参数？
答：全局定义指令：在vue对象的directive方法里面有两个参数，一个是指令名称，另外一个是函数。组件内定义指令：directives
钩子函数：bind（绑定事件触发）、inserted(节点插入的时候触发)、update（组件内相关更新）
钩子函数参数：el、binding
2、什么是RESTful API？怎么使用?
答：是一个api的标准，无状态请求。请求的路由地址是固定的，如果是tp5则先路由配置中把资源路由配置好。标准有：.post .put .delete
3、说出至少4种vue当中的指令和它的用法？
答：v-if：判断是否隐藏；v-for：数据循环出来；v-bind:class：绑定一个属性；v-model：实现双向绑定
4、请详细说下你对vue生命周期的理解？
答：总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。
创建前/后： 在beforeCreated阶段，vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，$el还没有。
载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。
更新前/后：当data变化时，会触发beforeUpdate和updated方法。
销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在
21、请说出vue.cli项目中src目录每个文件夹和文件的用法？
答：assets文件夹是放静态资源；components是放组件；router是定义路由相关的配置;view视图；app.vue是一个应用主组件；main.js是入口文件
11、mvvm框架是什么？它和其它框架（jquery）的区别是什么？哪些场景适合？
答：一个model+view+viewModel框架，数据模型model，viewModel连接两个
区别：vue数据驱动，通过数据来显示视图层而不是节点操作。
场景：数据操作比较多的场景，更加便捷
19、 什么是vuex，使用vuex的好处
Vuex是一个专为 Vue.js 应用程序开发的状态管理模式。
好处：
可以做状态管理 采用localstorage保存信息，数据便一直存储在用户的客户端中
使用场景：适合在巨大后复杂的项目中使用，
20、state,getter,mutation,action,module,plugins 各自的用途，和用法
详见vuex
2、vue-router有哪几种导航钩子？
答：三种，一种是全局导航钩子：router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。第二种：组件内的钩子；第三种：单独路由独享组件
6、v-model是什么？怎么使用？ vue中标签怎么绑定事件？
答：可以实现双向绑定，指令（v-class、v-for、v-if、v-show、v-on）。vue的model层的data属性。绑定事件：<input @click=doLog() />
7、axios是什么？怎么使用？描述使用它实现登录功能的流程？
答：请求后台资源的模块。npm install axios -S装好，然后发送的是跨域，需在配置文件中config/index.js进行设置。后台如果是Tp5则定义一个资源路由。js中使用import进来，然后.get或.post。返回在.then函数中如果成功，失败则是在.catch函数中
12、自定义指令（v-check、v-focus）的方法有哪些？它有哪些钩子函数？还有哪些钩子函数参数？
答：全局定义指令：在vue对象的directive方法里面有两个参数，一个是指令名称，另外一个是函数。组件内定义指令：directives
钩子函数：bind（绑定事件触发）、inserted(节点插入的时候触发)、update（组件内相关更新）
钩子函数参数：el、binding
1302
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
