1. el
el提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。可不传el，而是用vm.$mount() 进行挂载。
html文件
<body>
<div id="app"></div>
</body>
js
new Vue({
el: '#app', //传入选择器
})
或
new Vue({}).$mount('#app')
2. data
data为Vue 实例的数据对象。data的值可为函数或者对象。
new Vue({
data: {
n:1
}
})
//或
new Vue({
data: function(
return{
n:1
}
)
})
其中，组件的data只能定义为一个函数。
当一个组件被定义，data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供 data 函数，每次创建一个新实例后，我们能够调用 data 函数，从而返回初始数 据的一个全新副本数据对象。
3. methods
methods中的内容为Vue实例的方法。
new Vue({
data(){
return{
n: 1
}
},
template:`
<div>
{{n}}
<button @click='add'>+1</button>
</div>
`
methods:{
add(){
this.n += 1
}
}
})
以上代码，实现点击+1按钮，调用methods中的add方法，实现data中的n自增。其中add中的this指向Vue实例。
Trap
- add()不能直接作为options对象的方法，而必须放在methods中。
- 注意，不应该使用箭头函数来定义 method 函数 (例如 plus: () => this.a++)。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined。
4. components
包含 Vue 实例可用组件的哈希表。
三种声明方式：
- 引用外部组件，使用components声明，取名为Demo，在template中使用
<Demo />引用。
new Vue({
components:{
Demo: DemoComponent
},
template:`
<div>
<Demo />
</div>
`,
})
- 使用
Vue.components中进行全局声明，值为该组件的options对象，在template中使用<Demo />引用。
Vue.component({
Demo: `<div>123</div>`
})
new Vue({
template:`
<div>
<Demo />
</div>
`,
})
- 直接在components中声明，值为该组件的options对象，在template中使用
<Demo />引用。
new Vue({
components:{
Demo: `<div>123</div>`
},
template:`
<div>
<Demo />
</div>
`,
})
5. 生命周期钩子
所有的生命周期钩子自动绑定 this 上下文到实例中，因此你可以访问数据，对 property 和方法进行运算。
- created - 实例出现在内存当中
- mounted - 实例出现在页面当中
- updated - 实例更新了
- destroyed - 实例从页面和内存当中消亡
6. props
内部属性和外部属性的区别在于，外部的属性是由外部来来进行传值的，内部属性当然就是依靠内部自己传值的。
props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义验证和设置默认值。
Demo.vue
//省略template与style
<script>
export default {
props: ['message'，'fn']
}
</script>
在main.js中引入
import Demo from '...'
new Vue({
components:{
Demo
},
methods:{
add()
},
template:`
<div>
<Demo message='信息' /> //传字符串
<Demo :message='true' /> //注意冒号，引号中为JS代码，布尔
<Demo :fn='add' /> //传方法
</div>
`
})
