模板template三种写法
一. Vue完整版，写在HTML中
<div id=xxx>
{{n}}
<button @click="add">+1</button>
</div>
new Vue({
el: '#xxx',
data: {n: 0},
methods:{add(){this.n += 1}}
})
二. Vue完整版，写在选项里
<div id=xxx></div>
new Vue({
template: `
<div>
{{n}}
<button @click="add">+1</button>
</div>`,
data: {n: 0},
methods:{add(){ this.n += 1}}
}).$mount('#app')
// 注意一个细节：div#app会被替换
三. Vue非完整版，配合xxx.vue文件
<template>
<div>
{{n}}
<button @click="add">+1</button>
</div>
</template>
<script>
export default{
// data必须为函数，如果不是函数就会出现一个data被多个组件共用。
data(){return {n: 0}},
methods:{add(){this.n += 1}}
}
</script>
<style>这里写 CSS</style>
</script>
import Xxx from './xxx.vue'
// Xxx 是一个options对象
new Vue({
render: h => h(Xxx)
}).$mount('#app')
注意：template中的代码不是HTML，而是XML。
区别：XML是自闭和标签
// HTML
<input name="username">
<div></div>
// XML
<input name="username" />
<div />
模板里有哪些语法
模板就是用来表示HTML的一段字符串
指令与修饰符
指令(Directive)同义词：命令、指示。
//表示阻止事件冒泡/传播
@click.stop="add"
//表示阻止默认动作click
@click.prevent="add"
.sync修饰符
“:” 是指令 “v-bind”的缩写
“@”是指令“v-on”的缩写；
“.”是修饰符。
重点4个修饰符
- @click.stop="xxx"
- @click.prevent="xxx"
- @keypress.enter="xxx"
- :money.sync="total"
作用：当子组件需要改变外部数据props的值时，使用$emit向父组件发送更新，再由父组件接受更新响应事件修改数据。
new Vue({})
参考文章
