前端框架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变更的双向绑定效果。