vue的响应规则 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <ul>
      <li v-for="(value, key) in msg">{{key}} - {{value}}</li>
    </ul>
  </div>
  <script src="../vue.js"></script>
  <script>
    /* 
      在Vue中的一些情况里
      对象新增属性是没有响应式
      我们需要使用Vue.set方法给对象添加新的属性才会有响应式效果

      Vue.set(对象, '新增属性名', '属性值')
      Vue.delete(对象, '要删除的属性名')

      this.$set(对象, '新增属性名', '属性值')
      this.$delete(对象, '要删除的属性名')

      ... 扩展运算符

      var arr = [1,2,3,4]
      var arr2 = [7,8,9]
      // arr2.push(arr)  [7,8,9,[1,2,3,4]]
      arr2.concat(arr) [7,8,9,1,2,3,4]

      const arr3 = [...arr2, ...arr]

      var obj = {a: 1}
      var obj2 = {b: 2}

      {a: 1, b: 2}

     */
    const app = new Vue({
      el: "#app",
      data: {
        msg: {
          a: 1, 
          b: 2,
          c: 3,
          d: 4
        }
      }
    })
  
  </script>
</body>
</html>

 

posted @ 2018-12-29 12:16  宝2333  阅读(308)  评论(0)    收藏  举报