vue

## Vue 实例

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data,
 computed:{
}//计算属性


})

vm.$data === data // => true
vm.$el === document.getElementById('example') // => true

// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {
  // 这个回调将在 `vm.a` 改变后调用
})

Vue.extend( options )

// 创建构造器
var Profile = Vue.extend({
  template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
  data: function () {
    return {
      firstName: 'Walter',
      lastName: 'White',
      alias: 'Heisenberg'
    }
  }
})
// 创建 Profile 实例，并挂载到一个元素上。
new Profile().$mount('#mount-point')

slot文档给的解释是插槽。刚开始看到这个名词也不是特别的理解。然后文档上写着说Angular的transclusion概念差不多。

wiki上有这样一句话解释:

transclusion在计算机科学中指的是讲一个文档或者一个文档的某部分在另一个文档中引用
所以你再去看文档和给个示例，那么应该有点感觉了。

它主要的作用就是父组件中自定义的内容插入到子组件所提供的匿名/具名插槽当中。

所以你可以在父组件中定义好额外的模板内容，

<div class="parent">
    <child>
        <div>This child slot</div>   //需要插入到子组件的模板内容
    </child>
</div>

child组件:

<div class="child">
    <slot>This init child slot</slot>   //父组件插入的位置, 如果父组件中不提供需要插入的内容,那么就会显示子组件slot中默认的内容
</div>