模板 template 三种写法

一、 Vue 完整版，写在HTML里

//写在html内：
    <div id="xxx">
        {{n}}
        <button @click="'add">
            +1
        </button>
    </div>
//Vue内容：
new Vue({
    el:'#xxx',
    data:{n:0},  //data可以改成函数
    methods:{add(){}}
})

二、Vue完整版，写在选项里

//写在html内：
    <div id="app">
    </div>
//Vue内容：
new Vue({
    template:`
       <div>
        {{n}}
        <button @click="'add">
            +1
        </button>
    </div>`,
    data:{n:0},  //data可以改成函数
    methods:{add(){ this.n +=1 }}
}).$mount('#app')
//div #app 会被替换掉，就是你会发现没有一个div的id叫app

三、Vue 非完整版，配合 xxx.vue 文件

<template> //这里是XML
    <div>
        {{n}}
        <button @click="add">
            +1
        </button>
    </div>
</template>

<script>
export default {
    data(){return {n:0}},
    //data必须为函数
    methods:{add(){this.n += 1}}
}
</script>
<style>这儿写 CSS </style>

然后再另一个地方写：

import Xxx from './xxx.vue'
// Xxx 是一个 options 对象 （Xxx就是script里的对象）
new Vue({
    reder: h=> h(Xxx)
}).$mount('#app')