小整vue1.0

14、关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种：
event.clientX/Y  获取到的是触发点相对浏览器可视区域左上角距离，不随页面滚动而改变。
event.pageX/Y  获取到的是触发点相对文档区域左上角距离，会随着页面滚动而改变。
event.offsetX/Y 获取到的是触发点相对被触发dom的左上角距离，不过左上角基准点在不同浏览器中有区别，
其中在IE中以内容去左上角为基准点不包括边框，如果触发点在边框上会返回负值，而chrome中以边框左上角为基准点。
兼容性：IE所有版本、chrome、Safari均完美支持，Firefox不支持。
event.layerX/Y  获取到的是触发点相对被触发dom左上角的距离，数值与offsetX/Y相同，这个变量就是firefox用来替代
offsetX/Y的，基准点为边框左上角，但是有个条件就是，被触发的dom需要设置为position:relative或者position:absolute,
否则会返回相对html文档区域左上角的距离。
event.screenX/Y 获取到的是触发点相对显示器屏幕左上角的距离，不随页面滚动而改变。

 

1、什么是双向数据绑定？
双向数据绑定：通过 Vue 模板语法，把 Vue 中 data 里面的数据绑定到页面中；如果我们修改这个数据，页面中绑定这个数据的地方的值都会跟着自动更新。

2、双向数据绑定的原理：
vue 利用的 Object.defineProperty 这个方法遍历 data 中所有的属性，给每个属性增加了一个 setter 和 getter 方法，当数据发生变化的时候，会触发 setter 方法，当获取数据时，会触发 getter 方法；Object.defineProperty 在 IE8 及以下不兼容，所以 vue 只能在 IE9 以上使用；

3、指令是什么
在Vue中，以v-开头的行内属性；Vue赋予了这些属性一些特殊功能；
常用的指令：
v-model 把表单元素的value和data中的某个属性绑定在一起；
v-text把数据绑定到DOM元素中，且具有响应式，会把之前的覆盖掉，v-text不识别标签。
v-html可以识别标签。
v-if当属性值是true，则显示当前元素，如果为false则当前元素不显示，但是会显示v-else中的内容。
v-show当属性值是true，显示元素，为false隐藏元素
v-if是控制的DOM元素，如果为false页面中没有这个元素，而v-show是设置元素的display
v-bind：用于绑定动态属性，并且可以简写成一个:,v-bind后，这个属性就可以使用data中该属性的值。

v-for用于列表渲染，根据给定的值生成多个相同元素：

4、vue中的事件绑定
vue使用v-on绑定事件，无需获取DOM，直接在模板中绑定。
vue的事件函数写在methods属性中。
（1）如果在绑定时，fn不带小括号，那么函数会默认接收一个事件对象作为参数
（2）如果绑定时带有小括号，那么默认不接收事件对象
（3）如果既要事件对象，又要传递参数，需要在小括号中写一个$event用来标识事件对象，后面才是真正的参数。
v-on:事件名 事件函数
v-on可以简写成@

常见的事件修饰符
事件修饰符
.prevent阻止元素的默认行为
.stop阻止事件冒泡
.capture事件在捕获阶段触发
.once 事件只执行一次
.self只有触发自身的事件才会触发
键盘事件修饰符
.enter回车
.esc退出
.delete退格
.space空格
.tab tab键
.left左
.right右
.up上
.down下

5、过滤器是什么
过滤器：用来处理数据，但是并不会改变原来的数据的一种处理方式。
全局过滤器：Vue.filter(过滤器名字，函数f)
局部过滤器：filters

6、在Vue中使用ajax请求数据，一般放到created钩子函数中。

7、every()方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。
   every()方法使用指定函数检测数组中的所有元素。
   如果数组中检测到有一个元素不满足，则整个表达式返回false，且剩余的元素不会再进行检测。
   如果所有元素都满足条件，则返回true。
   注意：every()不会对空数组进行检测。
   every()不会改变原始数组。

8、filter()方法创建一个新的数组，新数组中的元素是通过检测指定数组中符合条件的所有元素。
   filter() 不会对空数组进行检测。
   filter()不会改变原始数组。

10、计算属性computed 和侦听器watch
计算属性，类似于过滤器，用于处理某个或者几个属性的复杂展示逻辑，但是并不会改变源数据。
计算属性默认和普通数据一样，直接在HTML中使用即可。
computed中的属性都有一个get和set方法，当获取这个属性时，会执行get方法，属性值是get方法的返回值；当设置computed中的属性时，会触发set方法。

computed中的属性都会被vm所代理，最终都要放到vm上；
computed中的属性和data中的属性不能同名，也不能和methods中的属性同名。
computed计算属性还可以是一个函数，相当于只设置get的情况，函数的返回值就是计算属性的值，但是不能设置。
如果一个属性依赖于其他属性计算而来，那么这个属性最好用computed.

计算属性不能用在异步处理程序中，如定时器、ajax等。

11、watch:侦听器属性，用于监听某个属性改变，如果发生改变就会触发对应的函数。
在工作中能使用computed尽量使用computed 而不要使用watch。

computed 计算属性
（1）页面加载时就求值；支持缓存，如果依赖的数据发生改变，才会重新计算；
（2）不支持异步
（3）如果一个属性是由其他属性计算而来，这个属性依赖其他属性，依赖发生变化时自动求取最新的计算结果；

watch计算属性
（1）页面加载时不求值，依赖值发生改变时才求值；
（2）watch支持异步
（3）watch只能监听一个属性的变化，如果有属性依赖这个结果，那么需要手动去重新计算这个结果。

12、v-bind:绑定动态属性，v-bind可以简写成:
v-bind:class动态绑定类名，属性值有以下常用情况：
如果是对象，对象的属性名是class名，属性值为true时类名有效，为false时不生效；
如果是三元运算符，三元运算符表达式的返回结果是生效的class
:class和原有的class并不会冲突，如果不同，最终会合并，如果相同会覆盖原有的；

13、v-bind:style用来绑定元素的动态样式。
v-bind:style属性值是一个对象或者数组，如果是对象，里面可以存储具体样式；数组中可以放多个样式对象；
自定义指令可以给元素增加一些特殊的功能
14、关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种：
event.clientX/Y  获取到的是触发点相对浏览器可视区域左上角距离，不随页面滚动而改变。
event.pageX/Y  获取到的是触发点相对文档区域左上角距离，会随着页面滚动而改变。
event.offsetX/Y 获取到的是触发点相对被触发dom的左上角距离，不过左上角基准点在不同浏览器中有区别，
其中在IE中以内容去左上角为基准点不包括边框，如果触发点在边框上会返回负值，而chrome中以边框左上角为基准点。
兼容性：IE所有版本、chrome、Safari均完美支持，Firefox不支持。
event.layerX/Y  获取到的是触发点相对被触发dom左上角的距离，数值与offsetX/Y相同，这个变量就是firefox用来替代
offsetX/Y的，基准点为边框左上角，但是有个条件就是，被触发的dom需要设置为position:relative或者position:absolute,
否则会返回相对html文档区域左上角的距离。
event.screenX/Y 获取到的是触发点相对显示器屏幕左上角的距离，不随页面滚动而改变。