一、 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')
