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