你用的vue-cli版本
用的vue2,脚手架用的3
vue生命周期
- 总共分为8个阶段创建前/后,载入前/后,更新前/后,销毁前/后。
- 创建前/后: 在beforeCreate阶段,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结构依然存在
vue双向绑定
- vue.js 是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调
import和require的区别
路由的标签是什么
- router-link 与 router-view
路由之间跳转传参
<router-link :to="{name:'home', params: {id:1}}"></router-link>
vue如何处理跨域
- cors(跨域资源共享https://panjiachen.github.io/vue-element-admin-site/zh/guide/advanced/cors.html)
- nginx反向代理 proxy
vue怎么处理低版本浏览器
- Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。使用Vuex和axios时需要浏览器支持:Promise,而IE并不支持Promise。
方法一、babel-polyfill 模拟ES2015+
要用 babel-polyfill 来将 ES6 的语法转成ES5,模拟整个 ES2015+ 环境。可以使用Promise 和WeakMap,方法Array.from,Object.assign ,Array.prototype.includes。
npm install --save babel-polyfill
require(“babel-polyfill”);
import “babel-polyfill”;
方法二、es6-promise 支持 Promise
npm install es6-promise
require(‘es6-promise’).polyfill();
Tip:虽然这些polyfill 满足了一些需求,但无形中增加了项目的大小。
方法三、低版本浏览器提示
兼容低版本浏览器本身就是一件很痛苦的事情,同时IE浏览器已经基本成为过去时了,如果再为了兼容这些浏览器做过多的工作的话,实在是一种浪费。
提示用户升级浏览器也是一个不错方法。推荐网站:快乐浏览。
快乐浏览:提供常用的浏览器下载,包括谷歌、火狐、360浏览器等。在VUE项目中的public\index.html文件里添加如下Js代码:
提示升级浏览器
(function(w){
if(!("WebSocket"in w&&2===w.WebSocket.CLOSING)){
var d=document.createElement("div");d.className="browsehappy";d.innerHTML='<div style="width:100%;height:100px;font-size:20px;line-height:100px;text-align:center;background-color:#E90D24;color:#fff;margin-bottom:40px;">\u4f60\u7684\u6d4f\u89c8\u5668\u5b9e\u5728<strong>\u592a\u592a\u65e7\u4e86</strong>\uff0c\u592a\u592a\u65e7\u4e86 <a target="_blank" href="http://browsehappy.osfipin.com/" style="background-color:#31b0d5;border-color: #269abc;text-decoration: none;padding: 6px 12px;background-image: none;border: 1px solid transparent;border-radius: 4px;color:#FFEB3B;">\u7acb\u5373\u5347\u7ea7</a></div>';var f=function(){
var s=document.getElementsByTagName("body")[0];if("undefined"==typeof(s)){
setTimeout(f,10)}else{
s.insertBefore(d,s.firstChild)}};f()}}(window));
post与get区别
1.url可见性:
get,参数url可见
post,url参数不可见
**get把请求的数据放在url上,即HTTP协议头上,其格式为:以?分割URL和传输数据,参数之间以&相连;post把数据放在HTTP的包体内(requrest body)
2.传输数据的大小:
get一般传输数据大小不超过2k-4k
post请求传输数据的大小根据php.ini 配置文件设定,也可以无限大
**get提交的数据最大是2k(原则上url长度无限制,那么get提交的数据也没有限制咯?限制实际上取决于浏览器,浏览器通常都会限制url长度在2K个字节,即使(大多数)服务器最多处理64K大小的url,也没有卵用);
post理论上没有限制。实际上IIS4中最大量为80KB,IIS5中为100KB
3.数据传输上:
get,通过拼接url进行传递参数
post,通过body体传输参数
**GET产生一个TCP数据包,浏览器会把http header和data一并发送出去,服务器响应200(返回数据);
POST产生两个TCP数据包,浏览器先发送header,服务器响应100 continue,浏览器再发送data,服务器响应200 ok(返回数据)
4.后退页面的反应:
get请求页面后退时,不产生影响
post请求页面后退时,会重新提交请求
**GET在浏览器回退时是无影响的,POST会再次提交请求
5.缓存性:
get请求是可以缓存的
post请求不可以缓存
**GET请求会被浏览器主动cache,而POST不会,除非手动设置
6.安全性:
都不安全,原则上post肯定要比get安全,毕竟传输参数时url不可见,但也挡不住部分人闲的没事在那抓包玩,浏览器还会缓存get请求的数据。安全性个人觉得是没多大区别的,防君子不防小人就是这个道理。对传递的参数进行加密,其实都一样
7.GET请求只能进行url编码,而POST支持多种编码方式
8.GET请求参数会被完整保留在浏览器历史记录里,而POST中的参数不会被保留
9.GET只接受ASCII字符的参数的数据类型,而POST没有限制
div拖拽实现
- onMousemove, onMouseup, onMousedown( 具体代码.)
vue如何处理跨域
- nginx反向代理接口跨域
- 通过nginx配置一个代理服务器(域名与domain1相同,端口不同)做跳板机,反向代理访问domain2接口,并且可以顺便修改cookie中domain信息,方便当前域cookie写入,实现跨域登录。
vue组件间如何通信
父组件与子组件传值
父组件通过标签上面定义传值
子组件通过props方法接受数据
子组件向父组件传递数据
子组件通过$emit方法传递参数
文件上传功能
- 1.创建一个上传文件的标签
- 2.改动事件
- 3.上传formData =》具体步骤
代码规范
1、 需要声明(DOCTYPE) 2、需要定义语言编码
<meta http-equiv=“Content-Type” content=“text/html; charset=gb2312” />
3、JavaScript定义必须要用<script language="javascript" type="text/javascript">
来开头定义
4、CSS定义必须要用<style type=“text/css”>
开头来定义 5、所有标签的元素和属性名字都必须使用小写
6、所有属性值必须用引号括起来(" " / ’ ')双引号或单引号 7、把所有特殊符号用编码表示。空格为
、小于号(<)<、大于号(>)>、和号(&)& 等 8、所有属性必须有属性值9、所有的标记都必须有相应的结束标记
10、所有的标记都必须合理嵌套
11、图片添加有意义的alt属性。图片加载失败时可以用alt属性表明图片内容。同理添加文字链接的title属性,帮助显示不完整的内容显示完整。
12、在form表单中增加label,以增加用户友好度
axios请求
- Axios 是一个基于 promise 的 HTTP 库,支持promise所有的API,可以拦截请求和响应并且转换请求数据和响应数据,对响应回来的内容自动转换成 JSON类型的数据 示例
created mounted区别
- Created:在dom渲染之前调用,通常把初始化数据放在里面调用比如ajax数据等等。
- Mounted:在dom渲染之后调用,比如咱们要获取document.getElementById,$(“#id”),ref等等需要dom操作放在这里,比如初始化的轮番图效果swiper需要获取dom就放在这里使用
methods(方法):
只要进行调用就会执行,不管依赖的值有没有改变。无缓存。
computed watch区别
-
computed(计算属性):
监听其所有依赖的变化,如果有变化会执行,没有变化不执行。有缓存,不用每次重新算。不支持异步。
详解=》在vue的 模板内({ {}})是可以写一些简单的js表达式的 ,很便利。但是如果在页面中使用大量或是复杂的表达式去处理数据,对页面的维护会有很大的影响。这个时候就需要用到computed 计算属性来处理复杂的逻辑运算。
1.优点:
在数据未发生变化时,优先读取缓存。computed 计算属性只有在相关的数据发生变化时才会改变要计算的属性,当相关数据没有变化是,它会读取缓存。而不必想 motheds方法 和 watch 方法是否每次都去执行函数。
2.setter 和 getter方法:(注意在vue中书写时用set 和 get)
setter 方法在设置值是触发。
getter 方法在获取值时触发。 -
watch(侦听属性):
观察某一个变量,发生变化会执行。支持异步。Vue 实例将会在实例化时调用 $watch(),遍历 watch 对象的每一个属性。
一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象。
小结:
1.主动调用的方法写在methods里,依据某些变量的更新进行某种操作用computed或者watch。
2.computed和watch:如果要异步,只能用watch。如果是计算某个值推荐用computed,比如购物车全选单选功能,购物车计算总价小计功能。
异步转化同步
mounted: function() {
(async function(){
console.log(1)
var a = await that.testFunc1()
console.log(a)
console.log(3)
})();
},
methods: {
testFunc1: function() {
return new Promise((resolve, reject)=>{
this.testFunc2("","",res=>{
resolve(res);
});
});
},
testFunc2: function(url,params,callback) {
setTimeout(()=>{
callback(2);
},1000);
}
}
// 打印结果:1,2,3
父子组件通信
vuex
vuex是vue框架中状态管理。在main.js引入store,注入。新建一个目录store,…… export 。场景有:单页应用中,组件之间的状态。音乐播放、登录状态、加入购物车
- vuex有五种哪属性,分别是 State、 Getter、Mutation 、Action、 Module
vuex的State特性
A、Vuex就是一个仓库,仓库里面放了很多对象。其中state就是数据源存放地,对应于一般Vue对象里面的data
B、state里面存放的数据是响应式的,Vue组件从store中读取数据,若是store中的数据发生改变,依赖这个数据的组件也会发生更新
C、它通过mapState把全局的 state 和 getters 映射到当前组件的 computed 计算属性中
vuex的Getter特性 A、getters 可以对State进行计算操作,它就是Store的计算属性 B、
虽然在组件内也可以做计算属性,但是getters 可以在多组件之间复用 C、 如果一个状态只在一个组件内使用,是可以不用getters
vuex的Mutation特性 Action 类似于 mutation,不同在于:Action 提交的是
mutation,而不是直接变更状态;Action 可以包含任意异步操作。 (3)不用Vuex会带来什么问题?
可维护性会下降,想修改数据要维护三个地方; 可读性会下降,因为一个组件里的数据,根本就看不出来是从哪来的;
增加耦合,大量的上传派发,会让耦合性大大增加,本来Vue用Component就是为了减少耦合,现在这么用,和组件化的初衷相背
。
git解决代码冲突
- 情景一:在当前分支上,直接修改冲突代码—>add—>commit。
- 情景二:在本地当前分支上,修改冲突代码—>add—>commit—>push