这就开始

vm对象封装了对视图的所有操作，包括数据读写、事件绑定、DOM更新（不包括AJAX） vm的构造函数是Vue，按照ES6的说法，vm所属的类是Vue

const vm = new VUE(Options) //创建实例

数据：data、 props、 propsData、 computed、methods、 Watch

DOM: el、 template、 render、 renderError

生命周期钩子: beforeCreate、 created、beforeMount、 mounted、 beforeUpdate、updated、activated、 deactivated、 beforeDestroy、 destroyed、errorCaptured

资源: directives、 filters、 components

组合: parent, mixins、 extends、 provide、 inject

el - 挂载点

只在用new创建实例时生效

html（上） JS（下）

<div id="app">   最终不会被显示的内容区域    </div>  
--------------------------------------------------------------------
new Vue({ 
  el: '#app',     //将Vue就挂载到#app
          })
--------------------------------------------------------------------
new Vue().$mount('#app')  //若使用$mount() 来代替

data - 内部数据

点击加一Demo

new Vue(   {  {data:{n:0}},     // 别忘了()里加{}即-->new Vue({开始写})
template:`
<div class="test">
       {{n}}  <button @click="add"> 点击加一 </button>
</div>
`,
methods:{ add(){this.n+=1} }
   }  ).$mount('#id')

支持使用对象但-->优先使用函数

当data写在.Vue文件中必须为函数 （组件的定义只接受function）

为了复用--->每个组件可以有一份data的拷贝，防止不同组件修改数据时相互覆盖
因为在某些情况下，当发生对象的！引用！（传址-只有一个内部数据）-->引发BUG

data:  {n：0} 也可以写成
data: function(){ return {n：0}}
ES6缩写---> 去掉   冒号   和   function
data(){ return {n：0}}

Vue 将会递归将 data 的属性转换为 getter/setter，从而让 data 的属性能够响应数据变化

methods

事件处理函数或普通函数
每次渲染都会执行

new Vue{ { ....,
methods:{  fn1,fn2 },
....})

methods将被混入到 Vue 实例中，通过 VM 实例访问，this自动绑定为该实例

components Vue的组件详解

使用中注意大小写
组件引入（推荐）
js直接写

// 定义一个名为 BTC 的新组件
Vue.component('BTC', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是BTC。我们可以在一个通过new Vue创建的 Vue 根实例中，把这个组件作为自定义元素来使用

<div id="test">
  <BTC></BTC>
</div>

new Vue({ el: 'test' })

因为组件是可复用的 Vue 实例，所以它们与new Vue接收相同的选项，例如data、computed、watch、methods以及生命周期钩子等。仅有的例外是像el这样根实例特有的选项。

也可以直接写在实例的compontent里

compoents:{
组件1:{组件1的实现},
组件2:{组件2的实现}
}

优先实现模块化(.Vue)

props

接收外部的数据--->给该实例/组件实例 message ="n" --->传的字符串

:message ="n"--->传this.n数据

:fn="add"--->传 this.add函数

Vue的构造选项-个人笔记（持续更新）