Hi，我是Aben，连夜更新第三集，欢迎Star---》源代码仓库
在vue3的官网中对template进行这样的论述：
在vue中 进行模板构建分为两种模式：1、使用script标签；2、使用template标签
1、使用script标签：通过设定type为"x-template“，将id与实例中的template设定为同一名称。其原理在vue官网中说明为：如果字符串以 # 开始，则它将被用作 querySelector，并使用匹配元素的 innerHTML 作为模板字符串。但是这种技巧在实际项目中并不合适，我们常常使用第二种办法。
<body>
<div id="app"></div>
<!-- 模板start -->
<script type="x-template" id="why">
<div>
<h2>{{message}}</h2>
<h2>{{counter}}</h2>
<button @click='increment'>+1</button>
<button @click='decrement'>-1</button>
</div>
</script>
<!-- 模板end -->
<script src="../js/vue.js"></script>
<script>
/* document.querySelector("#why"); */
Vue.createApp({
template: "#why",
data: function() {
return {
message: "Hello World",
counter: 100
}
},
methods: {
increment() {
console.log("点击了+1");
this.counter++;
},
decrement() {
console.log("点击了-1");
this.counter--;
}
}
}).mount('#app');
</script>
</body>
2、使用template标签
template标签可以被vue进行载入，但是最终其是被挂载在实例上，如以下代码通过template是只显示一次，而如果将template改为div，就会出现两次结果，而且第二次的message与counter还不会被绑定数值（如下图2-1效果所示），另一方面在vue2是规定只允许有一个根节点，而在vue3中对根节点并没有数目上的限制。
<body>
<div id="app"></div>
<template id="why">
<div>
<h2>{{message}}</h2>
<h2>{{counter}}</h2>
<button @click='increment'>+1</button>
<button @click='decrement'>-1</button>
<button @click='btnClick'>按钮</button>
<button @click='btn2Click'>按钮2</button>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
Vue.createApp({
template: '#why',
data: function() {
return {
message: "Hello World",
counter: 100
}
},
// 定义各种各样的方法
methods: {
increment() {
console.log("点击了+1");
this.counter++;
},
decrement() {
console.log("点击了-1");
this.counter--;
},
btnClick: () => {
console.log(this);
/* 箭头函数this指向window */
},
btn2Click: function() {
console.log(this);
/* 普通函数指向Proxy*/
}
}
}).mount('#app');
</script>
</body>
（图2-1）
另一方面，相信大家也会注意到vue中this指向问题，当我写下为箭头函数时this指向的是window而普通函数时this（button2）指向是Proxy，为什么会这样呢？我们下期来了解关于箭头函数与普通函数的知识，也会同大家一起聊聊this指向的问题。
可以把脑子的文字转述出来对于我来说极其不容易，再加上今天已经更新了3篇文章了，另一方面也是以为本人才疏学浅，所以可能会有所纰漏，欢迎大家指正。下期再见！
