阅读 24

Vue template三种写法

完整版

  1. 写在 HTML 里
<div id="app">
    {{n}}
<button @click="add">+1</button>
</div>
new Vue({
    el: '#app',
    data:{n:0}, 
    methods:{\
    add(){
        this.n+=1
        }
    }
}
复制代码
  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')
复制代码
文章分类
前端
文章标签