vue单页面
vue不会请求多个html页面，只有一个index.html，里面的内容都是由js操作dom改变的。所以我们看到不会有页面tab的转跳，都是在同一个tab页发生的。
使用vue的两种方式
- 使用vue来控制html页面的某个部分，而其他部分不受vue控制
- 页面上的一切，每个元素都被vue渲染和控制。(单页面应用)
// 其实就是在全局挂在了一个Vue的类(也就是一个函数)
Vue.createApp({
// data可以是一个普通对象，也可以是一个方法
// 推荐函数的写法，在组件中，因为可能在多处调用同一组件，所以为了不让多处的组件共享同一data对象，通过创建data函数，
// 每次创建一个新的组件实例后，能够调用data函数，从而返回一个全新副本。
// data: function() {} 可写成下方es6对象中方法的简写
data() {
// 返回视图所需数据的对象
return {
goals: [],
enteredValue: "",
};
},
methods: {
addGoal() {
goal = this.enteredValue;
if (goal == "") return;
this.goals.push(goal);
this.enteredValue = "";
},
},
}).mount("#app");
// 让vue知道页面的哪个部分将由vue控制 #app
// 将app这个vue实例，挂载到了#app上，所以在控制台选中这个元素存储，我们可以访问到他的__vue_app__属性，在vue2上，就是__vue__
v-on的两种写法
- v-on:click = add
- v-on:click = add()
这两种写法都是可行的，但需要传参的时候，需要使用第二种写法，比如add(10)。
我们知道js在事件处理中会有一个内置的Event对象，当我们使用第一种写法的时候，vue默认将参数设置为event，可以在add方法中直接接收。但是若使用第二种写法，则会覆盖这个参数。
所以vue为我们提供了特殊变量$event把它传入方法，比如add($event,10)
v-model语法糖
v-model是v-bind:value和v-on:input的简便用法，它会利用名为 value 的 prop 和名为 input 的事件，用在表单控件或者组件上创建双向绑定。下面两句是等价的：
<input v-model="name" />
<input v-bind:value="name" v-on:input="name = $event.target.value" />
