一、 Vue 完整版，寫在HTML里

//寫在html內(nèi)：
    <div id="xxx">
        {{n}}
        <button @click="'add">
            +1
        </button>
    </div>
//Vue內(nèi)容：
new Vue({
    el:'#xxx',
    data:{n:0},  //data可以改成函數(shù)
    methods:{add(){}}
})

二、Vue完整版，寫在選項(xiàng)里

//寫在html內(nèi)：
    <div id="app">
    </div>
//Vue內(nèi)容：
new Vue({
    template:`
       <div>
        {{n}}
        <button @click="'add">
            +1
        </button>
    </div>`,
    data:{n:0},  //data可以改成函數(shù)
    methods:{add(){ this.n +=1 }}
}).$mount('#app')
//div #app 會(huì)被替換掉，就是你會(huì)發(fā)現(xiàn)沒有一個(gè)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必須為函數(shù)
    methods:{add(){this.n += 1}}
}
</script>
<style>這兒寫 CSS </style>

然后再另一個(gè)地方寫：

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