2018-05-VUE学习笔记

主要使用：vue 官方文档

basis

1. 声明式渲染
   特点：响应式（reactive）,在控制台改变参数的值，会同时更新在页面上,唯一例外是使用Object.freeze(),阻止响应追踪
2. 条件与循环
   指令：v-if,v-for
3. 处理用户输入
   指令：v-on（事件监听器） , 如：v-on:click="oneMethod"
4. 组件化应用构建
   对此概念理解不深

尽管这只是一个刻意设计的例子，但是我们已经设法将应用分割成了两个更小的单元。子单元通过 prop 接口与父单元进行了良好的解耦。我们现在可以进一步改进 <todo-item> 组件，提供更为复杂的模板和逻辑，而不会影响到父单元。

#########   官方文档示例代码-HTML
<div id="app-7">
  <ol>
    <!--
      现在我们为每个 todo-item 提供 todo 对象
      todo 对象是变量，即其内容可以是动态的。
      我们也需要为每个组件提供一个“key”，稍后再
      作详细解释。
    -->
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id">
    </todo-item>
  </ol>
</div>



#########   示例代码-JS
Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { id: 0, text: '蔬菜' },
      { id: 1, text: '奶酪' },
      { id: 2, text: '随便其它什么人吃的东西' }
    ]
  }
})

5. 数据与方法
   vue示例创建后，会暴露出数据属性，实例属性，方法。

6. 实例生命周期钩子
   钩子：created,mounted,updated,destroyed
   作用：在不同阶段添加自己的代码

7. 生命周期图示

   
   Vue Lifecycle

template syntax

watch out

1. 深拷贝： vue中，若多个组件引用了同一对象作为数据，当其中一个组件改动对象数据时，其他对象也会同步改动。有双向的绑定的需要最好，但需要各组件的对象数据之间相互独立时，解决办法如下：

 computed: {  
     data: function () {  
         var obj={};  
         obj=JSON.parse(JSON.stringify(this.templateData)); //this.templateData是父组件传递的对象  
         return obj  
    }  
 }

• 深拷贝与浅拷贝的异同（JS为例）：
  shallow copy:仅指向被复制的内存地址，拷贝的值为引用，改变一个的值，会影响另一个。
  deep copy:值拷贝，开辟新的内存地址存放复制的值，各自独立。在js中，数组和对象的复制如果使用=号来进行复制，那只是浅拷贝。Javascript中基本数据类型变量的相互赋值是使用深拷贝执行的。

转：深拷贝方法对比 : javascript 数组以及对象的深拷贝（复制数组或复制对象）的方法