vue模板的三种写法

1. 完整版1

//写在html
<div id="app">
  {{n}}
  <button @click="add">+1</button>
</div>
//vue
new Vue({
   el:'#app',
   data:{n:0},
   methods:{add(){
      //内容
   }
})
  

2. 完整版2

//写在选项
<div id="app">
</div>

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

3. 非完整版，配合.vue文件

//.vue
<template>
  <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>

//main.js
import Xxx from './xxx.vue'
new Vue({
  render:h=>(Xxx)
}).$mount('#app')