vue 只渲染元素和组件一次. 任何数据都不会被自动传递到组件里，因为组件有自己独立的作用域。为了把迭代数据传递到组件里

从父作用域将数据传到子组件

  // todo-item 组件现在接受一个
  // "prop"，类似于一个自定义特性。
  // 这个 prop 名为 todo。
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})
<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>

阻止修改现有的属性

Object.freeze(obj)

ref

ref 如果是放在组建上获取的是组建的实列并不是dom元素

这个回调将在 `vm.a` 改变后调用

vm.$watch('a', function (newValue, oldValue) {

})

只渲染元素和组件一次.

This will never change: {{msg}}

计算属性的 getter

" class="hljs ">  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
 computed: {
 
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }

将触发状态更新

Vue.set(vm.items, indexOfItem, newValue)
vm.$set(vm.items, indexOfItem, newValue)
vm.items.splice(indexOfItem, 1, newValue)
vm.$set(vm.userProfile, 'age', 27)
多个属性
vm.userProfile = Object.assign({}, vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})

任何数据都不会被自动传递到组件里，因为组件有自己独立的作用域。为了把迭代数据传递到组件里，我们要用 props ：

 <li
      is="todo-item"
      v-for="(todo, index) in todos"
      v-bind:key="todo.id"
      v-bind:title="todo.title"
      v-on:remove="todos.splice(index, 1)"
    ></li>

Vue.component('todo-item', {
  template: '\
    <li>\
      {{ title }}\
      <button v-on:click="$emit(\'remove\')">Remove</button>\
    </li>\
  ',
  props: ['title']
})

生命周期

------beforeCreate创建前状态------
 el     : undefined
 data   : undefined
 message: undefined
 ------created创建完毕状态------
 el     : undefined
 data   : [object Object]
 message: Vue的生命周期
 ------beforeMount挂载前状态------
 el     : [object HTMLDivElement]
 <div id="app">…</div>
 data   : [object Object]
 message: Vue的生命周期
 ------mounted 挂载结束状态------
 el     : [object HTMLDivElement]
 <div id="app">…</div>
 data   : [object Object]
 message: Vue的生命周期

弹性盒子模型上下左右剧中

.flex-container {
           display: -webkit-flex;
           display: flex;
           justify-content:space-around; /*左右剧中*/
           align-items:center; /*上下剧中*/
           flex-wrap: wrap-reverse;/*换行*/
           width: auto;
           height: 250px;
       }