面试题

自我介绍:
我是来面试公司web前段开发的
你好，我叫xxx，来自xxxx
在此期间就职过两家公司，中科yi倚天和光合公司 都有过1年多的工作经验，
在我河南郑州的光和公司我们做项目主要用到的技术栈 就是
html,css，javaScript原生，
,jQuery，bootstrap第三方ui框架来开发项目

在中科倚天公司 做项目主要用到 技术 Vue全家桶Vue-Cli、Vue、Vue-Router、Axios、Vuex，Vant-UI ， Element-UI，Webpack 等。
做过，电商项目，移动端的项目 ，PC端等行业的项目。
负责过 匠心小镇app项目
一家民宿项目 觅食蜂app、项目，微信小程序入艺，，好物匠后台管理系统，
使用Git进行项目版本控制协助开发
以上是我的自我介绍 谢谢 你还有什么要问的吗？

匠心小镇 移动端

这个匠心小镇是一款家庭的生活用品
项目里面功能的实现？

搜索功能的实现

在搜索这块我是调了一个后台搜索的接口，通过v-model双向数据绑定
把页面中用户在input框中输入的值作为参数传递给接口，
可以实现字母搜索或着拼音搜索
然后接口会返回我通过关键字（或者拼音字母）作为参数而指定的一些数据返回给用户，
最后把这些数据进行排版渲染到页面上即可

二级分类切换

二级分类切换我就是使用第三方的vant-ui 的Sidebar侧边栏实现切换
，通过数据接口将对应的title渲染出来，绑定了点击事件通过id传参，每次点击的时候对应id下的内容显示

收藏的功能

首先要得到当前收藏数据id 请求收藏的接口 返回数据 让收藏图标变成已收藏
取消收藏，就在取消收藏的接口上拼接上当前收藏的数据 请求取消收藏的接口 返回数据 让收藏图标变成取消收藏
然后在我的页面 收藏里面渲染收藏的数据
收藏 直接请求收藏接口 返回数据，渲染页面
取消收藏 传当前数据的id 请求取消收藏的接口，判断data里面的data如果是1 就取消收藏

瀑布流布局的原理实现

瀑布流又称瀑布流式布局，视觉表现为参差不齐的多栏布局
后面的元素依次添加到其后，等宽不等
高，根据图片原比例缩放直至宽度达到我们的要求，依次按照规则放入指定位置。
当第一排排满足够多的等宽图片时之后
放置的图片会往下面排放。

到底加载 在外面加一个大盒子 不设置高 提示里面的元素撑起了的

实现 ：我用的是css3的特性以及弹性盒子布局 实现的

购物车功能 的 加减 全选 总价 删除

这里功能都是调取后端接口来实现的
全选的实现：先双向数据绑定flag
通过 change点击事件
在return里面定义一个flag 为false 在定义一个空数组
通过all 这个方法 把arr的方法添加到str里面他为true方法他就全选了 取消呢就是把str这个数组为空
//全选
all(){
// alert(this.flag)
if(this.flag){
for(var i in this.arr){
this.aa.push(this.arr[i].id)
}
}else{
this.aa=[]
}
}
},

总价的实现：

后台会返回数据，用到了计算属性，具体定义一个变量为零，循环遍历被选中的数组，变量加等于商品数量乘以商品单价，最后返回变量就是总价
computed:{
// 总价
// count(){
// var sum =0 ;
// for(var i in this.arr){
// sum+=this.arr[i].number*this.arr[i].price
// }
// return sum
// }

删除的实现

首先后台会返回接口，然后调用后台返回的接口，通过delete属性进行删除；如果后台没有返回数据接口的话，就通过Splice实现的删除。
del(key){
this.arr.splice(key,1)
},

加减 的实现

首先在vuex里面定义一个状态count,
然后在异步操作里面调用加减的接口，在同步操作里面让count++,和count–,在执行count–的时候会判断count不能为0，或者为0的时候进行删除

add(key){
this.arr[key].number ++
},
jan(key){
if(this.arr[key].number>1){
this.arr[key].number –

        }else{
         alert("请不能少于1哦！")
        }
       
    },

封装 的实现 思路

我封装过弹出框 星星评分 taost轻提示
封装
点击botton 按钮 确定和取消 他弹出的内容那块的框 在封装的组件 写好多种样式 在子组件中用$emit()暴露（派发）事件，父组件中用绑定的事件去监听 然后挂载上传递的数据 在子组件 props 来接受这个数据

Get和post的区别 ？

get参数通过url传递，post放在 body中。

get请求在url中传递的参数是有长度限制的，而post没有。

get比post更不安全，因为参数直接暴露在url中，所以不能用来传递敏感信息。

get请求只能进行url编码，而post支持多种编码方式

get请求参数会被完整保留在浏览历史记录里，而post中的参数不会被保留。

GET和POST本质上就是TCP链接，并无差别。但是由于HTTP的规定和浏览器/服务器的限制，导致他们在应用过程中体现出一些不同。

GET产生一个TCP数据包；POST产生两个TCP数据包。

对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）；

而对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据）。

state 的存储和localstorage 存储的区别？

1.最重要的区别：vuex存储在内存，localstorage则以文件的方式存储在本地
2.应用场景：vuex用于组件之间的传值，localstorage则主要用于不同页面之间的传值。
3.永久性：当刷新页面时vuex存储的值会丢失，localstorage不会。

、使用vant来实现上拉刷新，下拉加载功能模块；

思路：这个地方我是使用了vant-ui里面的PullRefresh- 下拉刷新和Loading 加载，把接口里面的数据使用拓展运算符进行拼接，拼接的时候使用Loading 加载

Animate。Css的使用

animate里面包含了许多常用的css动画，我们要使用的它的话需要把它加到自己的页面中，接着就可以在需要动画的元素标签上直接调用里面的动画，然后调节动画次数延迟等达到自己需要的效果就可以了。
完成路由拦截，app的登录，注册以及验证码功能；
思路：路由拦截我们使用的是全局的路由拦截，如果点击到了需要登录之后才能进入的页面之后，如果数据里面没有存储到token，那么就会重定向到登录页面，以及登录获取token

公司项目开发流程

1第一呢我们是公司呢是开一个需求讨论会
然后大家对这个项目的这个功能 进行一个分析和
和确定一下项目的一个周期 大家认领一下任 务
2 产品经理 用一些蓝湖 的之类的软件进行原型图的设计
3 就是公司我们的 UI 设计师 把效果图设计出来
4 ul效果图设计好给我 和后台数据
给我 我拿到效果图 就要高度还原页面
把特效和业务逻辑给实现
5 后端 封装接口
6项目 就是提测模块然后如果有bug就要打回
给我然后进行修改 最后测试没有问题
7 部署
8 发布上线
前端简称 ：FE
后端 ：BE
QA ：测试

进公司主要问的 兼容 优化 封装 你开发遇到的 问题怎么解决的

1vue浏览器兼容问题？

• 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。
  2优化 ？

1. 加载方面

1、路由懒加载

加载的资源过多，页面会出现白屏的情况，不利于用户体验。被访问的时候才加载对应的组件，这样就更加高效了。
路由懒加载：

. 缓存方面
利用keep-alive结合导航守卫实现页面缓存
性能考虑避免多次重复渲染降低性能。keep-alive组件。
项目实践
1.更改App.vue

3 防抖和节流 防抖 在固定的时间内没有触发事件，会在固定时间结束后触发，如果固定时间内触发事件了，会在延长固定时间再触发 节流： 无论在固定时间内是否有事件触发，都会按照固定时间规律触发

图片懒加载–使用vue-lazyload插件

插件下载：https://github.com/hilongjw/vue-lazyload
1
使用步骤：其实这个插件做简单使用的话是很简单的，按下边的实例即可。

（1） 安装插件：

npm install vue-lazyload --save-dev
（2） main.js引入插件(需要将error.png、loading.png放到static/img目录下)

import VueLazyLoad from ‘vue-lazyload’
Vue.use(VueLazyLoad,{
error:’./static/img/error.png’, // 图片加载失败时显示的图片
loading:’./static/img/loading.png’ // 图片加载中显示的图片
})

（3） vue文件中将需要懒加载的图片绑定v-bind:src 修改为v-lazy

1 # 第三方插件的按需引入 我们在项目中经常会需要引入第三方插件，如果我们直接引入整个插件，会导致项目的体积太大，我们可以借助 babel-plugin-component ，然后可以只引入需要的组件，以达到减小项目体积的目的。以下为项目中引入 element-ui 组件库为例：

（1）首先，安装 babel-plugin-component ：

npm install babel-plugin-component -D
1
（2）然后，将 .babelrc 修改为：

{
“presets”: [[“es2015”, { “modules”: false }]],
总结
优化是可以解决部分性能问题，实际开发细节很多，总之按着规范写代码，团队的编码风格尽量统一，处理细节上多加思考，大部分性能问题都能迎刃而解。
3封装说几条？
4你开发遇到的 问题怎么解决的？
Hr经常问的问题？

什么是前端 ？

它的工作领域是浏览器主要的是把美工的图合成完成的网页 呈现在用户面前，需要实现网页的交互效果。

上家公司离职的原因

因为我们是外包公司 要排我去上海去做一个项目 哪个项目时间停长的
然后呢 我的大部分这朋友 都在北京这里 所以我就离职了

近期规划和未来的？

我近期的职业规划是把咱们公司的项目做好另外把我的这个技术呢得以提升
充实我的技术多学一些组件插件 多学一款到两款框架这是我近期的
对于 中长期的这个规划呢我打算呢将来我在研究一门后台语言 比如java php python这些呢 我研究一门挣去呢研究明白以后呢 为 咱们公司更好的去服务
这个呢就是我的 近期和长期的一个规划

3.如果我们录用你入职之后你如何开展工作

1.如果公司录用我我会带着我以前的技术和经验把这些东西带到我们的项目中让咱们的项目呢更好更人性化
2.我会快速的掌握咱们公司现在所写的项目包括他的路由是怎么架构的，包括他里面接口的请求是怎么来处理的
3.你如何提高咱们工作中的效率
做项目前有一个充分的规划以及筹备
规划 和项目经理要详细的了解工作需求把每一个细节点都要理解到位，这个是为了避免后期的翻工
筹备：我在开发项目之前我就把我以前用到的常用的功能模块都打包好
比如是分页的组件上拉刷新下拉加载的

Javascript数据类型

基本类型+引用类型=数据类型
Es6之前 6种
Es6之后 7种
Number数值型 String 字符串 Boolean 布尔型 Null 空 Undefined 未定义 Symbol 符合型 是ES6新增
引用类型 只有一种 object 对象 function ，array 都是继承与object
可以使用instanceof 检测一下

1.Vue 的双向数据绑定原理

数据绑定简单来说，就是当数据发生变化时，相应的视图会进行更新，当视图更新时，数据也会跟着变化。
是通过数据劫持以及结合发布者-订阅者来实现的，数据劫持是利用ES5的Object.defineProperty(obj, key, val)来劫持各个属性的的setter以及getter，在数据变动时发布消息给订阅者，从而触发相应的回调来更新视图。

输入的值为：{{text}}
text: ‘hello world’

懒加载

.1什么是懒加载?
介绍？： 懒加载的主要目的是作为服务器前端的优化，缓解服务器前端压力，一次性请求次数减少或延迟请求。

原理：懒加载又称延迟加载。当访问一个页面的时候，需要先把img元素或者其他元素的背景图先用一张默认的图片代替（占位图），这样子
浏览器渲染页面的时候就只需请求一次。当图片出现在浏览器可视区域的时候，才设置图片的真实路径，把图片显示出来。
3 懒加载具体实现原理
页面中的img元素之所以会发送http请求的原因是设置了src属性，否则浏览器就不会发送请求去下载这个图片。首先在页面中把所有
的图片用一张占位图进行占位，并且在元素下设置data-src自定义属性，存放图片的真实路径，当需要用到的时候取出该真实路径动
态添加给src。

2.Vue的虚拟DOM的原理?

1.用JavaScript模拟DOM树，并渲染这个DOM树
2.比较新老DOM树，得到比较的差异对象
3.把差异对象应用到渲染的DOM树

3.Pomise 的原理？

Promise 是异步编程的一种解决方案
Promise对象是一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态

5.闭包的原理

函数嵌套函数 内部的函数 可以 访问外部函数的变量
就形成了一个闭包
优点：可以隔离作用域，不造成全局污染
缺点：由于闭包长期驻留内存，则长期这样会导致内存泄露
如何解决内存泄露：将暴露全外部的闭包变量设置为null
适用场景：封装组件，for循环和定时器结合使用，for循环和dom事件结合，可以在性能优化的过程中，节流防抖函数的使用，导航栏获取下标的使用

v-if和v-show的区别

v-if和v-show都可以显示和隐藏一个元素，但有本质区别
v-if是惰性的，只是值为false 就不会加载对应元素，为true才会动态加载对应元素，

v-show：是无论为true和false都会加载对应html代码，但为false时用display：none隐藏不在页面显示，但为true是页面上用display：block显示其效果，
使用场景：切换频繁的场合用v-show,切换不频繁的场合用v-if

Call，apply ，bind的区别？

call，apply，bind 主要作用都是改变this指向的，但使用上有区别。
call和apply的主要区别啊在传递参数上不同，call后面传递的参数是以逗号的形式分开的。apply传递的参数是数组形式，
bond返回的是一个函数形式。如果要执行，则后面要再加一个小括号，
例如：bind（obj，参数1，参数2，）（） bind只能以逗号形式，不能是数组形式，

6.兄弟通讯

组件通信：
父传子
1、在父组件上的子组件标签上绑定一个属性，将要传输的变量挂载到这个属性上
：属性名=“要传输的变量”

	2、在子组件上通过props来接受这个数据，接受的数据可以直接使用
		接受格式 props:["属性名"]
	
			
子传父：
	1、在父组件上定义一个方法，在父组件的子组件标签上绑定一个自定义事件，挂载刚才定义的方法

	2、在子组件上定义一个方法，来通过this.$emit("自定义事件",要传输的数据)来调用这个方法，通过参数的形式传递数据	

兄弟：
1、如果有共同的父组件，我们就可以采用先子传父，然后在父传子
2、bus总线传值（采用的是事件派发和事件监听的方式）
	1、在src目录中新建一个bus.js,在这个文件中要导出一个空的vue实例
	2、在传输数据的组件中引入bus.js,通过Bus.$emit("事件名",要传输的数据)来派发事件
	3、在接受数据的组件中引入bus.js,通过bus.$on("自定义事件"，（res）=>{
	res就是要接受的数据
})来监听事件

1.原型

每个函数对象下都有一个prototype属性。这个属性就是原型

原型链

原型链是JS特有的一种继承机制
原型链会涉及到___proto___,prototype
对象的__proto__指向构造函数的prototype
构造函数prototype的__proto__指向Object.prototype
Object.prototype的__proto__指向null
原型链的顶端就是null
应用场景：继承

async/await

Async 和 await 是一种同步的写法，但还是异步的操作，两个内容还是必须
同时去写才会生效不然的话也是不会好使，而且 await 的话有一个不错的作用就
是可以等到你的数据加载过来以后才会去运行下边的 js 内容，而且 await 接收的
对象必须还是个 promise 对象，所以这个 async await 我的主要应用是在数据的接收，和异步问题的
处理，主要是还是解决不同执行时机下的异步问题！

路由导航守卫有几种，如何实现s

Vue路由钩子是在路由跳转过程中拦截当前路由和要跳转的路由的信息

全局守卫 组件内部守卫 组件独享守卫
beforeEach beforeRouteEnter beforeEnter
(1)beforeRouteEnter（路由之前调用）
(2)beforeRouteUpdate（复用时调用）
(3)beforeRouteLeave（离开路由时调用）
每个守卫方法接受三个参数：
to 到哪里去
from 从哪来
next(true)继续往下走 (false)终止条状 next(path)跳转到目标路径

使用场景：判断用户没有登录 路由导航守卫可以让我们对用户要跳转的路由做一次检查，符合条件后放行，不符合条件则强制用户跳转登录页面。

Vuex

vuex
是vue提供给我们的一个状态管理工具，可以集中的存储和管理组件中数据
好处：
可以方便实现组件之间的数据通信
弊端：
占用资源太多，不是万不得已的情况下不推荐使用
state：存储状态（变量）
getters： state 的计算属性。
mutations ： 修 改 状 态 ，
actions：异步操作
modules：模块，为了开发大型项目，方便状态管理而使用的。
plugins ：是一个插件 是为了数据持久化

vuex的运行机制：

在vue的组件中通过dispatch来调用actions中的方法，actions中通过commit来调用mutactions中的方法，在mutactions可以直接操作state中的数据，state中的数据只要发生改变就会立即响应给组件

使用方法：
1、下载 vuex
cnpm install vuex -s

2、配置
a.在src目录中新建一个store目录，在store目录中新建一个index.js
1、引入vuex和vue
3、vue、use(vuex)
4、新建仓库并且导出
export default new Vuex.Store({
//存储和管理数据就行
})
b.在main.js中，引入store模块，并且挂载到vue的实例上
c、在组件中读取或者操作数据就行

在组件内部读取state中的数据
this.$store.state.键

操作state中的数据

在组件中使用mutations中的方法
this.$store.commit("方法名",参数)、
state中的数据只能由mutations中的方法来操作
在组件中使用getter中的数据

this.$store.getters.名
actions:异步的操作vuex中数据
在组件中调用action中的方法，action中mutations中方法，mutations操作state中的数据
vuex的actions和mutations的区别
mutations是对状态的直接修改，是一个同步修改状态的函数
actions是对状态的批量修改，通常是异步操作，包含一组mutations，在异步操作的前后，失败，成功等处修改组件状态
也可以是同步操作，但是需要执行多次mutations

vue常用修饰符

.stop 阻止事件冒泡
.prevent 阻止事件默认行为
.capture 触发事件捕获
.self 事件在该元素本身触发回调
.once 只执行一次
.delete (捕获 “删除” 和 “退格” 键)
.up 鼠标抬起
.down 鼠标按下
.left 向左
.right 向右
@keyup/
@keydown.修饰符=“方法名

10sessionStoragelocalStorage cookie的区别

什么事本地存储？
本地存储是H5新增的API，用来在本地存储数据，在不影响服务器性能的情况下来在本地存储大量的数据

	本地存储分为localStorage和sessionStorage
	localStorage和sessionStorage有着一样的API，但是localStorage可以实现数据永久存储，sessionStorage浏览器关闭数据消失
设置数据
	localStorage.setItem("key")
	读取数据
	localStorage.getItem("key")
	//清除当前数据
	localStorage.removeItem("key")		

	cookie每次请求服务器都会携带cookie请求头，如果

数据存储的多会影响服务器的性能

11let、const

1.const 和 let是在块级作用域上使用的方法，const声明的时候必须要赋值。
2.let和const声明的变量不会挂载window上：
3.let和const不存在变量提升

12.es6中有哪些拓展

1. 新增了块级作用域(let,const)
2. 提供了定义类的语法糖(class)
3. 新增了一种基本数据类型(Symbol)
4. 新增了变量的解构赋值
5. 函数参数允许设置默认值，引入了 res 参数，新增了箭头函数
6. 对象和数组新增了扩展运算符

13.es6中数组方法有哪些拓展

	Push                       向数组的末尾添加数据元素

Unshift 向数组的前头添加数据元素
Pop 数组末尾删除一个数据元素
Shift 删除并返回第一个元素
indexOf 查找第一个出现的下标
lastIndexOf 查找最后一个痴线的下标
Splice 删除元素，并向数组添加新元素
Slice 截取数组中部分形成新数组
Join 把数组转换为字符串
Split 把字符串转换为数组
Concat 连接两个或多个数组
Sort 排序
Reverse 颠倒数组中的元素

14.Ajax是什么?以及如何创建Ajax?

异步javascript和XML，是指一种创建交互式网页应用
的网页开发技术。通过后台与服务器进行少量数据交换
，AJAX可以使用网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
1、创建XMLHttpRequest对象,也就是创建一个异步调用对象.
2、创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
3、设置响应HTTP请求状态变化的函数.
4、发送HTTP请求.
5、获取异步调用返回的数据.
6、使用JavaScript和DOM实现局部刷新

15.HTTP状态吗都有哪些?

200 – 请求成功
301 – 资源(网页等)被永久转移到其它URL
404 – 请求的资源(网页等)不存在
500 – 内部服务器错误

16.计算属性和watch的区别

methods是没有缓存性，只要调用就会执行
computed具有缓存性，依赖于关联的属性，属性的值发生改变才会执行
watch没有缓存性，也是依赖于监听的属性，只要属性值发生改变就会执行

17.从输入URL到页面加载完成期间经历了什么？

1.DNS 解析
2.TCP连接
3.发送HTTP请求
4.服务器处理请求并返回需要的数据
5.浏览器解析渲染页面

6.连接结束

19生命周期函数：

1、beforeCreate()在这个生命周期函数上只有一些实例本身的事件，在这个钩子上自定义的一系列东西都是不可用的 undefined

2、created()在这个生命周期函数上自定义的属性和事件都是可以用的了，也就是说它最早可以操作data中数据的函数了
zhangshan

3、beforeMount()在这个生命周期钩子中已经在内存中编译好dom树，但是还没有渲染到页面上 此时指令已经被解析
null

4、mounted()已经将内存中的dom树渲染到页面上，最早操作dom元素

ssssss

运行阶段（会被执行0次到n次 0次 data没有改变）
5、beforeUpdate() 内存中的数据已经改了 页面没有改
还是zhangshan
6、updated() 页面和内存已经同步了
lisy
7、beforeDestroy() 当对象或者组件被销毁的时候调用，这个钩子上data和其他的事件还是可以用 清楚定时器 释放内存
8、destroyed() 当组件已经被销毁完毕的时候被调用 什么都用不了了

h5和css3的新特性

Css3新特性
1.颜色：新增RGBA，HSLA模式
2. 文字阴影（text-shadow、）
3.边框： 圆角（border-radius）边框阴影： box-shadow
4. 盒子模型：box-sizing
5.背景：background-size 设置背景图片的尺寸 background-origin 设置背景图片的原点
6.渐变：linear-gradient、radial-gradient
7. 过渡：transition，可实现动画
8. 自定义动画
9. 在CSS3中唯一引入的伪元素是 ：：selection.
10. 媒体查询，多栏布局

H5新特性

1. 拖拽释放(Drag and drop) API
2. 语义化标签（header,nav,footer,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

promise如何使用

promise是一个构造函数，所以可以 new 出一个Promise的实例
在Promise上有两个函数 resolve(成功之后的回调函数)和 reject(失败后的回调函数)
在Promise构造函数的prototype属性上，有一个 .then() 方法。所以只要是Promise构造函数创建的实例，都可以访问到 .then()方法

什么是跨域 解释jsonp的原理,?

二、什么是跨域
当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

、 跨域解决方法
【1】设置document.domain解决无法读取非同源网页的 Cookie问题
因为浏览器是通过document.domain属性来检查两个页面是否同源，因此只要 通过 设置相同的document.domain，两个页面就可以共享Cookie

jsonp并不是一种数据格式，而json是一种数据格式，jsonp是用来解决跨域获取数据的一种解决方案，具体是通过动态创建script标签，然后通过标签的src属性获取js文件中的js脚本，该脚本的内容是一个函数调用，参数就是服务器返回的数据，为了处理这些返回的数据，需要事先在页面定义好回调函数，本质上使用的并不是ajax技术。
vue路由传参数如何实现

ps:主要通过 query 和 params 来实现

query 传参：通过this.$router.push()传递url地址并且拼接?this.$route.query.id 来接收
优点：通用性比较好，刷新数据不会丢失

params 传参：通过 this.$router.push()传递url地址并且拼this.$route.params.id
来接收
优点：传递数据量在，优雅
缺点：刷新数据会丢失

vue自定义指令如何使用

vue中除了内置的指令（v-show,v-model）还允许我们自定义指令
// 全局自定义指令封装
Vue.directive(“block”,{ }

局部自定义指令
directives:{ } 钩子参数：
bind: 只调用一次，指令第一次绑定到元素时调用，
inserted: 被绑定元素插入父节点时调用
update: 被绑定元素所在的模板更新时调用
componentUpdated: 被绑定元素所在模板完成一次更新 周期时调用。

unbind: 只调用一次， 指令与元素解绑时调用。

vue中key的作用

key的作用是为了在diff算法执行时更快的找到对应的节点，提高diff速度
key具有唯一性
vue中循环需加 :key=“唯一标识” ，唯一标识可以使item里面id index 等，因为vue组件高度复用增加key可以标识组件的唯一性，为了更好地区别各个组件key的作用主要是为了高效的更新虚拟DOM

1、keep-alive的作用

keep-alive：主要用于保留组件状态或避免重新渲染。
比如： 有一个列表页面和一个 详情页面，那么用户就会经常执行打开详情=>返回列表=>打开详情这样的话 列表 和 详情 都是一个频率很高的页面，那么就可以对列表组件使用进行缓存，这样用户每次返回列表的时候，都能从缓存中快速渲染，而不是重新渲染。
include - 字符串或正则表达，只有匹配的组件会被缓存
exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存

vue路由有几种模式
路由分为Hash路由和History路由
Hash路由的特点根据hash值的切换显示不同的内容
hash ：虽然出现URL中，但不会被包含在HTTP请求中，对后端完全没有影响，因此改变hash不会重新加载页面。
History：利用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法。需要特定浏览器支持

vue提供给我们的常用的内置指令

v-text 给元素绑定变量
v-html 给元素绑定变量 可以解析html
v-bind:属性=“变量”  给标签绑定动态的属性  简写 ：属	性=“变量”
v-for 循环遍历数组或者对象 <标签 v-for="(item,key) in 	变量"></标签>
v-on:事件名="方法"  简写 @事件名=“方法”
v-show 控制元素或者组件的显示和隐藏
v-if  控制元素或者组件的显示和删除

v-show和v-if的区别：
当条件为真的情况下，都是显示元素，当条件为假的时候v-show是给元素添加	display:none,v-if是直接删除元素
v-show有更高的渲染成本  v-if有更高的切换成本 所以频繁的切换需要v-show

v-model绑定表单元素实现数据的双向绑定
v-clock 解决差值表达式的闪烁问题
	
给标签添加属性 然后添加样式
[v-clock]{
	display:none
}

Js的增删改查

DOM方法：
(1)获取（访问）元素
getElementById()
返回对拥有指定 ID 的第一个对象的引用
getElementsByName()
：返回带有指定名称的对象的集合。
getElementsByTagName()： 返回带有指定标签名的对象的集合
getElementsByClassName
： 返回文档中所有指定类名的元素
(2)创建标签方法
document.createElement() //创建一个元素节点
document.createTextNode() //创建一个文本节点
parentNode.appendChild(newChild) //newChild 被添加到孩子列表中的末端。
-------------------下面预习---------------------
(1)插入节点：insertBefore()
(2)删除节点：removeChild()
(3)替换节点：replaceChild()
1.js运行机制
js作为浏览器脚本语言，它的主要用途是与用户互动，以及操作DOM，因此js是单线程，也避免了同时操作同一个DOM的矛盾问题；

选择器
Js选择器总结

一、原生JS选择器#

JS选择器常用的有getElementById()、getElementsByName()、getElementsByTagName()、getElementsByClassName()、querySelector()、querySelectorAll()
A： getElementById(ID): 返回对指定ID的第一个对象的引用，如果在文档中查找一个特定的元素，最有效的方法是getElementById()
B: getElementsByName(name): 返回文档中name属性为name值的元素，因为name属性值不是唯一的，所以查询到的结果有可能返回的是一个数组，而不是一个元素。
C: getElementsByTagName(tagname): 返回文档中指定标签的元素
D: getElementsByClassName():返回文档中所有指定类名的元素
E: querySelector():返回文档中匹配指定css选择器的第一个元素
F: querySelectorAll():返回文档中匹配指定css选择器的第一个元素

二、jQuery选择器#

内容
基本选择器有ID选择器、类选择器、标签选择器、通用选择器，事件的添加方法如下：
$(#wei).事件名(function() { }); id
Jqery选择器
基本选择器有ID选择器、类选择器、标签选择器、通用选择器，

微信小程序 的

生命周期函数

onLoad: 页面加载
一个页面只会调用一次，可以在 onLoad 中获取打开当前页面所调用的 query 参数。
onShow: 页面显示
每次打开页面都会调用一次。
onReady: 页面初次渲染完成
一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。
对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。详见生命周期
onHide: 页面隐藏
当navigateTo或底部tab切换时调用。
onUnload: 页面卸载
当redirectTo或navigateBack的时候调用。
微信小程序的常用命令

wx:for=""//for:循环指令，同volist 同wx:key一起使用
wx:if=""//同其他if使用
wx-show
bindtap=“aa”//点击事件：
//跳转传参，跳转到aaa目录下的aaa.wxml