1. 使用vue实例，options入门属性使用vue实例原型：对象.proto === 其构造函数.prototy

1. 原型：

对象.proto === 其构造函数.prototype 【如 var a = new Object，a.proto 和 Object.prototype指向同一内存，内存中有他们的共有属性】

任何函数.proto === Fuction.prototype

Object.proto === null

const vm = new Vue(options) => vm.proto === Vue.prototype

尤雨溪将Vue实例命名为vm
vm对象封装了对视图层的酥所有操作，包括数据读写、事件绑定、DOM更新
vm的构造函数是Vue，按ES6，vm所属的类是Vue
options是new Vue的参数，一般称之为选项或构造选项

2. options里有什么

数据：data、props、propsData、computed、methods。match
DOM：el、template、render、renderError
生命周期钩子：beforCreate、created、beforeMount、mounted、beforeUpdate、updated、activated、deactiveted、beforeDestroy、destroyed、errorCaptured
资源：directives、filters、components
组合：parent、mixins、extends、provide、inject
其他

PS： 方法method和函数function区别：方法依附于对象，函数相反。如：obj.sayJi()就是方法，sayHi()是函数

入门属性：

el - 挂载点，可用$mount代替

// main.js
import Vue from 'vue'

console.log(window.Vue)

Vue.config.productionTip = false

import Demo from './Demo.vue'

new Vue({
    el: '#frenk',   // index.html必须与之一致
    render: h => h(Demo)
})

// index.html
<body>
    <div id = "frank"></div>
</body>

$mount

new Vue({
    render: h => h(Demo),
}).$mount('frank')

data（有bug） - 内部数据：支持对象和函数或普通方法

对象写法

new Vue({
    data: {
        n: 0
    },
    template: `
        <div class="red">
            {{n}}
            <button @click="add">+1</button>
        </div>
    `,
    methods: {
        add(){
            this.n += 1
        }
    }
}）.$mount('#frank')

函数写法（尽量用这种，因为组件写法只接受function）

data: function(){    // :function可省略
    return {    
        n: 0
    },
}

methods - 方法（代替filter）

上面的函数操作可用methods代替，由函数filgter()主动调用；methods执行几次就渲染几次

components Vue组件，三种方式引入，推荐第一种

第一种：创建vue文件【注意大小写：文件名可小写（Windows10分不清大小写的文件名），组件名大写】

// main.js
import Demo from './Demo.vue'
const vm = new Vue({
    components: {
        Frank: Demo    
    }
    template: `
        <div class"red">
            <Frank/>
        </div>
    `
}).$mount('#frank')

// Demo.vue
<template>
    <div>Demo</div>
</template>

// 这样写太啰嗦了，直接写成一个不就行：

import Demo from './Demo.vue'
const vm = new Vew({
    components: {Demo}    // 其实是Demo：Demo，ES6简写
    template ： `
        <div class"red">
            <Demo/>
        </div>
    `
}).$mount('#frank')

第二种：创一个Vue.component实例

// main.js
Vue.component('Demo2',{
    template: `
        <div>demo222</div>
    `
})
const vm = new Vue({
    template: `
        <div class"red">
            <Demo2/>
        </div> 
    `
}).$mount('#frank')

第三种：结合以上两种

const vm = new Vue({
    component: {
        Frank: {
            template: `
                <div>demo333</div>
            `
        }
    }
    template: `
        <div>
            <Frank/>
        </div>
    `
}).$mount('#frank')