Vue template三种写法

2021-03-14 76 阅读1分钟

完整版

写在 HTML 里

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

写在选项里

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

PS:这种写法，div#app 会被替换

非完整版

Demo.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>

App.vue

<div id="app">
</div>

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