1、模板写在挂载点中
<div>
<!-- @click 单击事件 -->
<p id="app" @click="handleClick">{{msg}}</p>
</div>
<script>
/* new 一个Vue的实例 */
var vm = new Vue({
/* 挂载点 */
el: "#app",
data: {
msg: "hello world"
},
methods: {
handleClick() {
vm.msg = "change"
}
}
})
</script>
Tips:
- 实例只会渲染挂载点
- 挂载点里的内容为模板
2、模板写在实例中
<script>
var vm = new Vue({
/* 挂载点 */
el: "#app",
data: {
msg: "hello world"
},
/* 挂载点中的内容就是模板 */
template: "<p @click='handleClick'>{{msg}}</p>",
methods: {
handleClick() {
alert(1);
}
}
})
</script>