前端框架Vue(6)——Vue 介绍和相关操作

*本博客会持续更新

1、VueJS 浏览器的兼容性

前端框架Vue(6)——Vue 介绍和相关操作_第1张图片



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

你可能感兴趣的:(前端框架Vue系列,前端框架,Vue,初体验)