前端框架Vue（6）——Vue 介绍和相关操作

*本博客会持续更新

1、VueJS 浏览器的兼容性

---

2、如何获得当前点击的元素（整体）

methods: {            showDeleteIcon:function($event){                console.log(event.currentTarget);            }        }

---

3、如何获得当前点击的元素（个体）

showDeleteIcon:function($event){                console.log(event.target);            }

---

4、获取dom元素样式

<template>  <div style="display: block;" ref="abc">    <!-- ... -->  </div></template><script>export default {  mounted () {    console.log(this.$refs.abc.style.cssText)  }}</script>

---

5、在for渲染的list中如何在数组对象中新增一项

addNewList:function(){                this.items.push({                    "name":"案件新增"                })            }

---

6、如何引入jQuery

npm install jquery --save

alias: {      'vue$': 'vue/dist/vue.esm.js',      // 如果使用NPM安装的jQuery      'jquery': 'jquery'     }

 // 增加一个plugins  plugins: [      new webpack.ProvidePlugin({          $: "jquery",          jQuery: "jquery"      })   ],

import $ from 'jquery'

---

7、为什么 vue 不支持 IE9 以下。

  VueJS 则使用 ES5 提供的 Object.defineProperty() 方法，监控对数据的操作，从而可以自动触发数据同步。并且，由于是在不同的数据上触发同步，可以精确的将变更发送给绑定的视图，而不是对所有的数据都执行一次检测。

  数据与视图的绑定与同步，最终体现在对数据的读写处理过程中，也就是 Object.defineProperty() 定义的数据 set、get 函数中。

  ES5 提供的 Object.defineProperty()，这也是为什么 vue 不支持 IE9 以下。

---

8、vue 双向数据绑定

  MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。