Vue笔记_03配置项_data与methods

data

• data 值的类型为一个函数，返回值中的数据在模版中均可直接使用；
• 只要将数据在data中定义,该数据就是响应式的，原因是data中的数据进行了双向数据绑定；
• 语法

    data(){
      return {
        // 数据定义...
      }
    }
  

为什么data是一个函数

如果data是一个对象，就会造成所有的实例化对象共享一份data数据，造成数据混乱；
data为一个函数，每一次调用函数，就会重新生成一个新的data对象,类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。

不想将数据做成响应式应该怎样处理

​ 当我们将数据定义在data函数中，当数据发生改变的时候，vue会通过get、set方法监听到，若是页面中使用了-会重新渲染页面；

​ 若是我们没有将数据定义在data函数里面，使用方法相同(仍然可以通过this访问到)，但是当数据发生变化时，即使页面使用了也不会发生任何变化-原因是没有将数据进行双向绑定；

因此当我们定义 静态数据的时候 可以不将数据定义在data函数里面,定义在created函数中即可，那么数据就不会是响应式的！

data(){
  return{
    aaa:'111' // 响应式数据
  }
}
created(){
  this.bbb='静态数据' //非响应式数据
}

有时发现数据没有实现双向绑定，应该如何解决

在我们操作嵌套数据时，发现数据改变了而视图没有重新渲染(还是原来的数据),原因以及解决办法->传送门

$nextTick函数

当data中的数据发生改变时，若是视图中应用到了，Vue就要进行更新，Dom更新是异步执行的！如果你想基于更新后的 DOM 状态来做点什么需要使用Vue.nextTick(callback)或实例化对象.$nextTick方法,这个方法的参数是一个回调函数，在dom数据更新完成之后被调用.

 <script src='./vue.js'></script>
   <div id="app">
   {{msg}}
   </div>
    <script>
        let vue = new Vue({
        el: '#app',
        data: {
          #[1]一开始数据是lala
            msg:'lala',
        },
        })
        # [2]更改数据
        vue.msg='456';
		# [3]更改数据之后打印dom元素的innerHTML,结果为lala
        ### 这就说明了vue对dom数据的更新是异步的！
        console.log(vue.$el.innerHTML);//lala
        #[4] 若想更改数据后立即对dom元素进行操作，要通过nextTick方法
       vue.$nextTick(function(){
           # 参数是一个回调函数，等待vue对dom数据更新完毕之后再执行
        console.log(vue.$el.innerHTML);//456
       })
    </script>

methods

语法

methods:{
  方法名(){
    // 函数体
  }
}

vue方法中的this指向

vue会将data对象与methods对象中的成员 平铺到 vue实例中，所以methods中的方法相当于vue实例化对象调用的，this指向vue实例化对象；

vue事件传参

vue中每一个事件方法都有一个默认参数 ， 就是事件对象；

如果主动给事件传参，则传递的参数 会 覆盖默认参数
如果希望同时传入事件对象 + 自定义参数，则可以使用

v-on:事件名=“方法名($event,自定义参数)”