Vue之template

template三种写法

1. 完整版，写在html里

<div id=xxx>
  {{n}}
  <button @click="add">+1</button>
</div>

new Vue({
  el: '#xxx',
  data: {n:0}, // data可以改成函数
  methods:{add(){}}
})

2. 完整版写在options里

<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')
// 挂载到div#app, div的原内容会被替代

3. 非完整版，配合xxx.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>

在另一个地方引入vue文件，并render

import Xxx from './xxx.vue'
// Xxx是一个options对象
new Vue({
  render: h => h(Xxx)
}).$mount('#app')

注意：