1.自我介绍
2.Vue组件间传值
- 父—子:props
- 父组件:绑定一个属性: v-bind:mag (缩写:mag)
- 子组件:props:[‘mag’]
- 子—父:子组件通过事件向父组件传递数据
- 父组件:自定义一个事件 @trans = getUser;
- 子组件:input v-model=’username’ @change = setUser
methods{ setUser:function() { this.$emit(‘trans’,this.username) // 父组件的事件 子组件的数据 } } - 兄弟之间:通过中央事件总线传值,bus.js文件
import Vue from 'vue' export default new Vue() import Bus from 'bus.js' Bus.$on(‘val’,数据) Bus.$emit(‘val’,数据) - 非父子组件之间传值,需要定义个公共的公共实例文件bus.js,作为中间仓库来传值,不然路由组件之间达不到传值的效果。
- 在工程src目录下新建一个Pub.js文件
import Vue from "vue"
export default new Vue() - 在各组件中引入Pub.js文件
import Pub from "../Pub.js" - 在A组件中通过
$emit调用自定义函数并且传参
Pub.$emit('namefn',"str1","str2",……) - 在B组件中通过
$on响应事件并接受参数
Pub.$on('namefn',(str1,str2,……) =>{ console.log(str1+"就是A组件中定义的数据") }) - Vuex:
- 如果想要把数据映射过来就用到 mapState
- 如果想要把方法映射过来就是用mapMutations
- 在工程src目录下新建一个Pub.js文件
3.v-if和v-show的区别
- 区别
- v-if: 相当于真正的条件渲染,当条件为假,元素不会被渲染。不是使用CSS来改变元素,而是操作DOM,动态的删除和添加元素
- v-show :不管初始条件是什么,第一次的时候元素总被渲染。之后的切换相当于 display:none 和 display:block 的切换。
- 适用场景
- v-if : 适用于在运行时很少改变条件,不需要频繁切换条件的场景
- v-show : v-show 则适用于需要非常频繁切换条件的场景。
4.Vue页面之间传值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./lib/vue-2.4.0.js"></script>
<!-- 1.引入包-->
<script src="./lib/vue-router-3.0.1.js"></script>
<style>
/*路由高亮显示:
1.默认给的类名
2.自己修改类名
*/
.router-link-active, .myActive {
color: #0f0f0f;
font-weight: 800;
font-style: italic;
font-size: 20px;
text-decoration: underline;
background-color: lightblue;
}
.v-enter,
.v-leave-to {
opacity: 0;
transform: translateX(80px);
}
.v-enter-active,
.v-leave-active {
transition: all 0.8s ease;
}
</style>
</head>
<body>
<div id="app">
<!--vue-router提供的标签,专门用来当做占位符,匹配到的组件就会展示在router-view中-->
<!--<a href="#/login">登录</a>
<a href="#/register">注册</a>-->
<!-- 默认渲染a标签,改变就是使用tag='标签名' 改变-->
<!-- 传参第一种:如果在路由中,使用查询字符串,给路由传递参数,不需要修改path -->
<!--<router-link to="/login?id=10">登录</router-link>
<router-link to="/register">注册</router-link>-->
<!--传参第二种: -->
<router-link to="/login/10">登录</router-link>
<router-link to="/register">注册</router-link>
<transition mode="out-in">
<router-view></router-view>
</transition>
</div>
<script>
//组件的模板对象
var login = {
//第一种传参:this.$route.query.id
// template:'<h1>登录组件---{{$route.query.id}}</h1>',
//第二种传参:this.$route.params.id
template:'<h1>登录组件---{{$route.params.id}}</h1>',
created(){
console.log(this.$route);
//第一种传参
// console.log(this.$route.query.id);
//第二种传参
console.log(this.$route.params.id);
},
};
var register = {
template:'<h1>注册组件</h1>'
};
//2.创建路由规则对象
//当引入vue-router包之后,在window全局对象中就有一个路由构造函数VueRouter
var routerObj = new VueRouter({
// 路由匹配规则
routes:[
//每个路由规则都是一个对象,必须有两个属性:
//path:监听的路由地址
//component:匹配到对应路由,则展示对应component的组件
//component的属性中必须是一个属性模板对象,不能是组件的引用名
//可以使用,但是不推荐,不同路径对应相同组件
// { path: '/', component: login},
//客户端重定向,与Node中的redirect完全不一样
{ path: '/', redirect: '/login'},
//第一种:不需要修改参数,直接传入即可
/*{ path: '/login', component: login},
{ path: '/register', component: register},*/
//第二种:可以传递多个参数
{ path: '/login/:id/:name', component: login},
{ path: '/register', component: register},
],
//修改类为自己的
linkActiveClass:'myActive'
});
var vm = new Vue({
el:'#app',
data:{
},
methods:{
},
//3.将路由规则对象注册到VM实例对象上,用来监听url地址的变化
router: routerObj
});
</script>
</body>
</html>
5.Vue自定义指令
- 全局
- 参数一:指令名称(定义时不需要加v-,调用时需要加v-)
- 参数二:是对象
Vue.directive('focus',{ //以下三个函数的第一个参数永远是:el //1.指令绑定到此元素上时,会立即执行函数bind,只执行一次 //注意:在元素刚绑定了指令的时候,还没有插入到DOM中,调用focus函数没有作用 bind:function(el,binding){ // el.focus(); // el.style.color=binding.value; }, //2.元素插入到DOM中时,会立即执行函数inserted,只执行一次 inserted:function (el) { //focus的使用必须是元素插入DOM中才可以起作用 el.focus(); }, //3.当VNode更新时,会立即执行updated函数,可以触发多次 updated:function (el) { } }); - 局部
directives:{ 'color':{ //以下三个函数的第一个参数永远是:el //1.指令绑定到此元素上时,会立即执行函数bind,只执行一次 //注意:在元素刚绑定了指令的时候,还没有插入到DOM中,调用focus函数没有作用 bind:function(el,binding){ // el.focus(); el.style.color=binding.value; } }, //一般使用最多的是bind和update,以下的使用同时使用这两个函数 'fontsize':function (el,binding) { el.style.fontSize=parseInt(binding.value)+'px'; } }
6.Vue如何实现页面无刷新更新
- Hash模式
- 路由重定向
7.Vue页面跳转子路由
- 全局
//当引入vue-router包之后,在window全局对象中就有一个路由构造函数VueRouter
var routerObj = new VueRouter({
// 路由匹配规则
routes:[
//每个路由规则都是一个对象,必须有两个属性:
//path:监听的路由地址
//component:匹配到对应路由,则展示对应component的组件
//component的属性中必须是一个属性模板对象,不能是组件的引用名
//可以使用,但是不推荐,不同路径对应相同组件
// { path: '/', component: login},
//客户端重定向,与Node中的redirect完全不一样
{ path: '/', redirect: '/login'},
{ path: '/login', component: login},
{ path: '/register', component: register},
],
//修改类为自己的
linkActiveClass:'myActive'
});
//将路由规则对象注册到VM实例对象上,用来监听url地址的变化
router: routerObj,
- 子路由
var router = new VueRouter({
routes:[
{
path: '/account',
component: account,
//设置子路由,path前面不需要'/' 根路径
children:[
{path:'login',component:login},
{path:'register',component:register},
]
},
]
});
8.MVVM模式
- MVVM分为Model、View、ViewModel三者。
- Model:代表数据模型,数据和业务逻辑都在Model层中定义;
- View:代表UI视图,负责数据的展示;
- ViewModel:负责监听Model中数据的改变并且控制视图的更新,处理用户交互操作;
- 解释:Model和View并无直接关联,而是通过ViewModel来进行联系的,Model和ViewModel之间有着双向数据绑定的联系。因此当Model中的数据改变时会触发View层的刷新,View中由于用户交互操作而改变的数据也会在Model中同步。这种模式实现了Model和View的数据自动同步,因此开发者只需要专注对数据的维护操作即可,而不需要自己操作dom。
9.Vue的双向数据绑定
- vue.js是采用数据劫持结合发布者 - 订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。
10.使用JS如何实现数据的双向数据绑定
- Object对象的defineProperty属性,重写data的set和get函数来实现的
<body>
<input type="text" id="a">
<div id="b"></div>
<script>
var obj = {};
Object.defineProperty(obj,'hello',{
set:function (newVal) {
document.getElementById('a').value = newVal;
document.getElementById('b').innerHTML = newVal;
},
});
document.addEventListener('keyup',function (e) {
obj.hello = e.target.value;
})
</script>
</body>
- 作用:定义对象的属性和赋值,修改已经存在的属性
- 语法:Object.defineProperty(需要定义属性的当前对象, 当前需要定义的属性名, 属性描述符)
- eg
const user = {} Object.defineProperty(user, 'name', { value: 'cc', enumerable: true // 该属性是否可枚举 }) console.log(user); // {name: "cc"} - 属性描述符:
configrable 描述属性是否配置,以及可否删除
enumerable 描述属性是否会出现在for in 或者 Object.keys()的遍历中 - 数据描述符:writable是否可修改,默认false
属性名 默认值
value undefined
get undefined
set undefined
writable false
enumerable false
configurable false - 存取描述符:getter setter
- 扩展
- Object.preventExtensions(…):如果你想禁止一个对象添加新属性并且保留已有属性,就可以使用
- Object.seal():会创建一个密封的对象,这个方法实际上会在一个现有对象上调用object.preventExtensions(…)并把所有现有属性标记为configurable:false。不可以添加新属性,不可以冲洗配置或删除任何原有属性,可以修改属性
- Object.freeze()会创建一个冻结对象,这个方法实际上会在一个现有对象上调用Object.seal(),并把所有现有属性标记为writable: false,这样就无法修改它们的值。
11.什么场景下使用vuex
- 涉及非父子组件之间跨组件共享数据
- 组件基于数据创建,多个组件使用这个数据,各组件之间的联系不可预料
- 同一个数据在不同页面控制某个属性,且多个页面都能修改这个数据
- 组件被销毁:组件是一个弹框,输入后数据要保存
- 可以直接通过$store.state来调用,通过commit()来修改值;
- 也可以在created的时候,读取存在state里面的值,在destroyed的时候,写回 state;一般处理需要数据和组件分离的项目时使用Vuex
12.axios中如何设置拦截器
- 请求拦截器
axios.interceptors.request.use(config=>{
//发送请求前做的事
return config
},err=>{
//请求错误时做的事
return Promise.reject(err)
})
- 响应拦截器
axios.interceptors.response.use(res=>{
//请求成功对响应数据做处理
return res
},err=>{
//响应错误时做的事
return Promise.reject(err)
})
- 取消拦截器
let interceptor = axios.interceptors.request.use(config=>{
return config
});
axios.interceptors.request.eject(interceptor)
- 拦截器不会给axios绑定,直接给实例绑定,不使用catch,进行统一错误处理
let instance = axios.create({});
instance.interceptors.request.use(config=>{
return config
},err=>{
//统一错误处理
$("#err").show();
setTimeout(()=>{
$("#err").hide();
},1000);
return Promise.reject(err)
});
instance.interceptors.response.use(res=>{
return res
},err=>{
//统一错误处理
$("#err").show();
setTimeout(()=>{
$("#err").hide();
},1000);
return Promise.reject(err)
});
- 并发请求
import axios from 'axios'
export default {
created() {
//请求多个请求
axios.all([
axios.get('/a.json'),
axios.get('/b.json')
]).then(
//分割不同请求的返回值
axios.spread((aRes,bRes)=>{
console.log(aRes);
console.log(bRes);
})
)
}
}
- 取消请求
import axios from 'axios'
let source = axios.CancelToken.source();
axios.get('/db.json',config=>{
cancelToken:source.token
}).then(res=>{
console.log(res)
}).catch(err=>{
console.log(err)
});
//取消请求(message可选)
source.cancel('cancel')
13.如何优化vue项目
14.http中hash和history的区别
- Hash :地址栏URL中的#符号 #/index window.location.hash
- History:在host之后直接添加斜线和路径请求 /index,window.location.pathname
- 区别
- 是否向后端传参 :Hash的#后面的内容不会包含在请求中,只是被前端浏览器利用刷新网页;History是看到请求的url为完整的url,请求后端
- 是否刷新页面:Hash不刷新;History刷新
- 方法:Hash:onhashchange History:pushState replaceState
15.http的请求方法以及含义
- GET:获取资源
- POST:提交信息
- PUT:传输文件
- DELETE:删除文件
- CONNECT:用隧道协议建立连接
- TRACK:跟踪路径
- OPTIONS:询问支持的方法
- HEAD:和GET方法类似,只不过只返回请求头部
16.Get和Post的区别
- get方法的参数在url中,post方法参数在request body中
- get方法参数是裸露的,相比较而言,post更安全
- get方法的参数有长度限制,post方法的参数没有限制。
- get方法一次将header和data发送,返回200,只产生一个TCP数据包。post方法先发送header,返回100,再发送data,返回200,产生二个TCP数据包。但是post方法有特例,Firefox就只发送一次。
- get方法支持一种url编码,post支持多种编码格式,json,text/application
- get请求会主动缓存,post请求不会
- GET请求参数会被完整保留在浏览器历史记录里,而POST中的参数不会被保留。
17.Get请求有body吗?
- 在http规范任何方法都能发送请求实体。他们报文时没有任何区别的,但是在浏览器中,因为XMLHttpRequest规范的限制,浏览器中ajax发送的http请求,get,delete请求不能携带实体。
18.http常用请求头
- Accept 能正确接收的媒体类型
- Accept-Charset 能正确接收的字符集
- Accept-Encoding 能正确接收的编码格式列表
- Accept-Language 能正确接收的语言列表
- Expect 期待服务端的指定行为
- From 请求方邮箱地址
- Host 服务器的域名
- If-Match 两端资源标记比较
- If-Modified-Since 本地资源未修改返回304(比较时间)
- If-None-Match 本地资源未修改返回304(比较标记)
- User-Agent 客户端信息
- Max-Forwards 限制可被代理及网关转发的次数
- Proxy-Authorization 向代理服务器发送验证信息
- Range 请求某个内容的一部分,范围请求
- Referer 表示浏览器所访问的前一个页面
- TE 传输编码方式
19.http请求报文和响应报文
- HTTP请求报文由3部分组成(请求行+请求头+请求体)
- 请求行
- 请求方法,如GET和POST。
- 请求对应的URL地址,它和报文头的Host属性组成完整的请求URL。
- 是协议名称及版本号。
- 请求头
- 是HTTP的报文头,包含若干个属性,格式为“属性名:属性值”,服务端据此获取客户端的信息。与缓存相关的规则信息,均包含在header中
- 请求体
- 是报文体,它将一个页面表单中的组件值通过param1=value1¶m2= value2的键值对形式编码成一个格式化串,它承载多个请求参数的数据。报文体可以传递请求参数,同样请求URL也可以通过类似于“/chapter15/user.html?param1=value1¶m2=value2”的方式传递参数。
- HTTP请求报文头属性说明
- Accept:请求报文告诉服务端,客户端接受什么类型的响应。如Accept:text/plain报文头告诉服务端,客户端能够接受的响应类型仅为纯文本数据。
- Referer: 表示这个请求是从哪个URL过来的。
- Accept-Language:告知服务器客户端能够处理的语言集(指中文或英文等),以及语言集的相对优先级。
- User-Agent:用户代理,告知服务器客户端浏览器的类型、版本等信息,以便服务器更好的提供服务。
- Content-Type:表明发送数据流的类型,服务器根据编码类型使用特定的解析方式获取数据。
- Host: 用于区分同一IP上的不同虚拟主机。
- Content-Length: 标识HTTP消息实体的传输长度,单位字节。
- Connection: 用于管理持久连接,HTTP/1.1, 版本的默认连接都是持久连接,想明确断开连接时,则指定Connection 的值为 Close。
- Cache-Control:缓存控制,比如是否需要缓存或要缓存多久等。
- Cookie:客户端Cookie通过这个报文头属性传给服务端。服务端如何确定客户端的多个请求隶属哪个Session?通过请求报文头Cookie属性的jsessionid的值来确定。(也可以通过重写URL将ID附带在URL的后面)。
- HTTP的响应报文也由三部分组成(响应行+响应头+响应体)
- 响应行: HTTP/1.1 200 OK
- 报文协议及版本;
- 状态码及状态描述;
- 响应头
- 响应报文头,也是由多个属性组成;
- 响应体
- 响应报文体,真正需要的数据。
- HTTP响应报文头一些属性说明
- Server:告知客户端当前服务器上安装的 HTTP 服务器应用程序的信息。
- Transfer-Encoding:规定了传输报文主体时采用的编码方式。HTTP/1.1 的传输编码方式仅对分块传输编码有效。
- Date:创建 HTTP 报文的日期和时间。
19.HTTP常见的状态码:
- 301:永久重定向;
- 302:临时重定向;
- 400:请求报文中有语法错误;
- 401:发送的请求要有http的验证信息;
- 403:无权访问;拒绝访问
- 404:没有对应的资源;
- 500:服务器执行请求时发生错误;
- 503:服务器停机或正在维护。
20.Link和@import的区别
- link 属于 html 标签,而@import 是 css 提供的
- 页面被加载时,link 会同时被加载,而@import 引用的 css 会等到页面加载结束后加载。
- link 是 html 标签,因此没有兼容性,而@import 只有 IE5 以上才能识别。
- link 方式样式的权重高于@import 的。
21.CSS动画的使用
- Animation:动画名称 动画时间 动画曲线 何时开始
@keyframes 名字 { } - transition:过渡动画
22.CSS中的伪类有哪些?
- 链接伪类:link visited hover active
- 结构伪类:first-child last-child nth-child(n) nth-last-child(n)
N: even odd n 2n等 - 目标伪类::target { }
23.Position的属性值以及区别
- 固定定位 fixed:元素的位置相对于浏览器窗口是固定位置,即使窗口是滚动的它也不会移动。 Fixed 定位使元素的位置与文档流无关,因此不占据空间。 Fixed 定位的元素和其他元素重叠。
- 相对定位 relative:如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。 在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。
- 绝对定位 absolute: 绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于。 absolute 定位使元素的位置与文档流无关,因此不占据空间。 absolute 定位的元素和其他元素重叠。
- 粘性定位 sticky: 元素先按照普通文档流定位,然后相对于该元素在流中的 flow root(BFC)和 containing block(最近的块级祖先元素)定位。而后,元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。
- 默认定位 Static: 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
- inherit: 规定应该从父元素继承 position 属性的值
24.JS中箭头函数和普通函数的区别
- 箭头函数中没有this
- 箭头函数中不可以使用arguments
- 箭头函数不能new,没有自己的prototype
- 箭头函数不可使用yield,不能用作Generator函数异步编程
25.ES6新特性
- let var const
- 数组扩展:includes
- 函数扩展:箭头函数和rest参数
- 字符串扩展:repeat(number)平铺函数,一个字符输出number次
- 数据类型:symbol,声明独一无二的值
- 数据结构:
- Set:类似数组,但是元素是唯一的,不允许重复的
- Map:类似对象,之前对象的键只能是字符串,map类型的对象对键没有要求
- class的概念引入=
- promise
26.cookies和session的区别,都是会话技术
- cookie数据存放在客户的浏览器上,session数据放在服务器上。
- cookie不是很安全,别人可以分析存放在本地的COOKIE并进行COOKIE欺骗
考虑到安全应当使用session。 - session会在一定时间内保存在服务器上。当访问增多,会比较占用你服务器的性能,考虑到减轻服务器性能方面,应当使用COOKIE。
- 单个cookie保存的数据不能超过4K,很多浏览器都限制一个站点最多保存20个cookie
27.如何保存用户的信息,下次不用登陆
- localStorage
- sessionStorage
- Cookies
- 对比

25万+

被折叠的 条评论
为什么被折叠?



