1.HTML5有哪些新特性？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？
1）用于绘画 canvas 元素。(canvas 元素用于在网页上绘制图形，画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。)
2） 用于媒介回放的 video 和 audio 元素。
4）语意化更好的内容元素，比如 article、footer、header、nav、section3）
5）表单控件<calendar> <date> <time> <email> <url> <search>
html5 也新增以下表单元素：
<datalist>：元素规定输入域的选项列表，使用 <input> 元素的 list 属性与 <datalist> 元素的 id 绑定。
<keygen>：提供一种验证用户的可靠方法，标签规定用于表单的密钥对生成器字段。
<output>：用于不同类型的输出，比如计算或脚本输出。
HTML5 新增的表单属性：
placehoder 属性：简短的提示在用户输入值前会显示在输入域上。即我们常见的输入框默认提示，在用户输入后消失。
required 属性：是一个 boolean 属性。要求填写的输入域不能为空
pattern 属性：描述了一个正则表达式用于验证<input> 元素的值。
min 和 max 属性：设置元素最小值与最大值。
step 属性：为输入域规定合法的数字间隔。
height 和 width 属性：用于 image 类型的 <input> 标签的图像高度和宽度。
autofocus 属性：是一个 boolean 属性。规定在页面加载时，域自动地获得焦点。
multiple 属性：是一个 boolean 属性。规定<input> 元素中可选择多个值。
6）本地离线存储 （HTML5的离线储存）
localStorage 长期存储数据，浏览器关闭后数据不丢失；能维持在多个会话范围内
sessionStorage 的数据在浏览器关闭后自动删除。客户端数据存储，只能维持在当前会话范围内。
- HTML5 Geolocation（地理定位）用于定位用户的位置。
- html5拖放
兼容：
当在页面中使用HTML5新标签时，可能会得到三种不同的结果：
1)结果1：新标签被当作错误处理并被忽略，在DOM构建时会当作这个标签不存在。
2)结果2：新标签被当作错误处理，并在DOM构建时，这个新标签会被构造成行内元素。
3)结果3：新标签被识别为HTML5标签，然后用DOM节点对其进行替换。
不能识别HTML5新标签而不能使用，解决办法有两种：
1)方法1：实现标签被识别
通过document.createElement（tagName）方法即可让浏览器识别新标签，浏览器支持新标签后，还可以为新标签添加CSS样式。
2)方法2：JavaScript解决方案
a)使用html5shim：
在<head>中调用以下代码：
当然也可以直接把这个文件下载到自己的网站上，但这个文件必须在head标签中调用。
b)使用kill IE6
在</body>之前调用以下代码：
区分HTML和HTML5：
1)DOCTYPE声明
2)新增的元素
2.css3中的transform有哪些属性？分别用来实现什么效果？
transform的属性：
单位：deg
1)translate位移,基于 X 和 Y 坐标重新定位元素，当使用一个参数时表示 X 轴和 Y 轴的参数相 同，效果类似 position:relative 。
2)scale 缩放：可以让任一元素变大、变小。它使用一个或者两个正数和负数以及小数作为参数，当使用一个参数时表示 X 轴和 Y 轴的缩放相同。
3)rotate 旋转：通过传递一个度数值来转动一个对象。
4)skew 倾斜：参数是度数，当使用一个参数时表示 X 轴和 Y 轴的参数相同。
5)matrix 矩阵变换：基于 X 和 Y 坐标重新定位元素，它使用 6 个参数
rotate(<angle>) ：通过指定的角度参数对原元素指定一个 2D rotation （2D 旋转），需先有transform-origin属性的定义。transform-origin定义的是旋转的基点，其中angle是指旋转角度，如果设 置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。如：transform:rotate(30deg):
3.localStorage、sessionStorage、cookie有什么区别？
共同点：都是保存在浏览器端，且同源的。
区别：
1.cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递；cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。
2.而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
3.数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
4.作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。
1、什么是同源策略？你都知道哪些解决跨域的方法？
同源策略是一种约定，他是浏览器最核心也是最基本的功能，如果缺少同源策略，则浏览器的正常的功能可能会受到影响，可能说web是构建在同源策略基础之上，
浏览器针对同源策略的一种实现。
所谓同源就是:域名、协议、端口相同。
同源策略分为两种：
1）Dom同源策略：禁止对不同的源页面Dom进行操作，这里主要是iframe跨域 的情况，不同域名的iframe是限制互相访问的。
2）xmlhttpRequest同源策略：禁止使用XHR对象向不同源的服务器地址发起 HTTP请求。
解决跨域的方法：
1）proxy代理跨域
2）通过cors后台设置允许跨域的请求台 Access-Control-Origin:"*"
3）Jsonp跨域：
因为script标签不受浏览器同源策略的影响，允许跨域引用资源，所以
可以动态的创建script标签，然后利用src属性进行跨域。
优点：使用简便无兼容性问题（目前最流行的跨域方法）
缺点：兄接受GET请求
如果其他域不安全的话，很可能会在响应中夹带一些恶意的代码
确定JSONP请求是否失败并不容容易，HTML给Script标签新增一个 onerror事件处理程序，但是存在兼容问题。
2、列举JavaScript的基本数据类型和引用数据类型
基本数据类型：number null underfined boolean string
引用数据来类型：object function array
js基本数据类型的变量存放的是基本数据类型.数据的实际值
而引用数据类型的变量保存在对它的引用，即指针
3、Vue2.0的生命周期有哪些？分别解释其意思
创建、挂载、更新、销毁
beforeCreate：实例组件new Vue()创建出来之后会初始化事件和生命周期，然后就会执行beforecreate此时数据还没有挂载，无法访问到数据的真是Dom。
created：挂载数据绑定事件，然后执行created函数，这是可以使用数据，
也可以更改数据，此时更改数据不会触发updated函数，不会触发其他钩子函数，一般可以在处理初始数据的获取。
beforeMount：实例或组件对应的模板，编译为虚拟dom放在render函数中准备渲染执行，此时虚拟dom已创建完成，马上要渲染，在这里可以更改数据，不会触发update，一般做初始数据的获取。
mounted：开始render渲染真实dom执行Mounted函数，此时组件已出现在页面中，数据、真是dom已处理好、事件已挂载好可以在这里获取真实dom。
beforeUpdate：组件或实例的数据更改后，立即执行beforeupdate，然后vue的虚拟dom机制会重新构建dom与上一次的虚拟dom树进行diff算法进行对比后重新渲染
update：数据已更新完成，dom也重新render完成可操作更新后的的虚拟dom。
beforeDestory：调用￥destory方法后执行beforeDestory，一般在这里做善后工作，如：清除定时器、清除非指定绑定的事件...
destory：组件的数据绑定监口后...去掉后只剩dom空壳，这时执行destory。
4、详述组件通信
5、详述导航守卫
vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航
全局守卫：
beforeEach=>全局前置守卫 router.beforeEach((to,from,next)={})注册
当一个导航触发时，全局前置守卫已按照创建顺序调用，守卫是异步解析执行，此时导航在所有的守卫resolve完之前一直处于等待中
to：route即将要进入的目标路由对象
from：route当前导航正要离开的路由
next：进入管道中的下一个钩子,next(false)中断当前的导航
afterEach:全局后置钩子 不会接受next函数，也不会改变导航本身
路由独享守卫：beforeEnter
组件内的守卫：beforeRouteEnter 在渲染该组件的对应路由被confirm之前调用，不可以获取组件实例this，因为守卫之前执行前组件实例刚还没有创建。
beforeRouteUpdate 在当前路由改变，但是该组件被复用时调用，可访问组件实例this。
beforeRouteLeave 导航离开组件的对应路由时调用，可访问组件实例this
6、v-show和v-if有什么区别？及使用场景
共同点 ：都是动态显示DOM元素
不同点：
v-if:
v-if 是动态的向DOM树内添加或删除DOM元素；
v-if切换一个局部编译/卸载的过程，切换时合适销毁和重建内部事件监听和子组件；
v-if是惰性的，初始条件=假，什么也不做。只有在条件第一次变=真，才开始局部编译；
v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；
v-if有更高的切换消耗；
使用场景：v-if适合运营条件不大可能改变；
v-show:
v-show有更高的初始渲染消耗；
v-show只是简单的基于css切换；
v-show是通过设置DOM元素的display属性控制显隐；
使用场景：v-show适合频繁切换。
7、v-for和v-if的优先级
v-for比v-if具有有更高的优先级
当vue处理指令时，v-for比v-if具有更高的优先级
每次都要表里这个数组会影响速度，尤其是当渲染一小部分
我们可以将便利的数组替换为计算属性，让其放回过滤后的列表。
第三天
1、Vue常用的指令
v-text 主要用来更新textContent，可以等同于JS的text属性。
<span v-text="msg"></span>
等价于
<span>{{msg}}</span>
v-html 双大括号的方式会将数据解释为纯文本，而非HTML。为了输出真正的HTML，可以用v-html指令。它等同于JS的innerHtml属性。
这个div的内容将会替换成属性值rawHtml，直接作为HTML进行渲染。
v-text、{{}}、v-html的区别：
1、插值表达式存在闪烁的问题；
2、v-text和v-html是全部替换，{{}}是可以进行部分替换；
3、v-html可以解析HTML标签，v-text和{{}}不可以；
v-if 可以实现条件渲染，Vue会根据表达式的值的真假条件来渲染元素。
v-else 是搭配v-if使用的，它必须紧跟在v-if或者v-else-if后面，否则不起作用。
v-else-if充当v-if的else-if块，可以链式的使用多次。可以更加方便的实现switch语句。
v-show 也是用于根据条件展示元素。和v-if不同的是，如果v-if的值是false，则这个元素被销毁，不在dom中。但是v-show的元素会始终被渲染并保存在dom中，它只是简单的切换css的dispaly属性。
v-show、v-if的区别：
v-if有更高的切换开销
v-show有更高的初始渲染开销。
因此，如果要非常频繁的切换，则使用v-show较好；如果在运行时条件不太可能改变，则v-if较好
v-for 用v-for指令根据遍历数组来进行渲染
当v-for和v-if同处于一个节点时，v-for的优先级比v-if更高。这意味着v-if将运行在每个v-for循环中
v-bind 用来动态的绑定一个或者多个属性。没有参数时，可以绑定到一个包含键值对的对象。常用于动态绑定class和style。以及href等。
简写为一个冒号【 ：】
v-model 这个指令用于在表单上创建双向数据绑定。
v-model会忽略所有表单元素的value、checked、selected特性的初始值。因为它选择Vue实例数据做为具体的值。
v-on 主要用来监听dom事件，以便执行一些代码块。表达式可以是一个方法名。
简写为：【 @ 】
2、Vue常用修饰符
stop 阻止事件继续传播
prevent 事件不再重载页面
capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理
self 只当在 event.target 是当前元素自身时触发处理函数
once 事件将只会触发一次
passive 告诉浏览器你不想阻止事件的默认行为
使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用v-on:click.prevent.self会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。
3、v-on可以监听多个方法吗？
可以
<button v-on='{click:show,mouseleave:hide}'>点击</button>
4、Vue中key值的作用
用于管理可复用的元素。因为Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做使 Vue 编译变得非常快
Vue会尽可能的复用当前页面上所有的元素，如果元素没有独立的key值的话，如果我们只修改了元素的属性，那Vue会重复使用页面上的元素，只是给它修改一个属性
在diff算法中，Vue使用 key 值来判断元素是否发生更改，以达到重复使用页面上所有可复用元素，特别是在列表渲染中，Vue通过key值来判断元素是否需要更新，如果元素只是更换位置的话，就不需要重新渲染，这也是为什么我们在列表渲染的时候为什么始终不建议使用元素的索引值来作为 key 值，因为索引值始终会发生改变，会增加Vue的渲染成本
5、Vue组件中的data为什么必须是函数
两个实例引用同一个对象，其中一个改变的时候，另一个也发生改变。
每个vue组件都是一个vue实例，通过new Vue()实例化，引用同一个对象，如果data直接时一个组
件的数据，其他组件相同数据就会改变。
而data是函数的话，每个vue组件的data都因为函数有了自己的作用域，互不干扰。
vue的全局组件会被引用渲染，js中引用对象的而复制不是真是的"复制"，而是在栈中复制了指针。
当组件被多出引用时，如果引用类型数据(这里指的是data)只被复制了指针，会导致多处组件只用 了同一个"数据源"，会导致一处数据改变，是所有的组件数据都改变，所以用函数返回一个新的数 据，避免数组在多出引用的情况发生。
