一、创建应用
应用实例： 通过CreateApp函数创建,传入CreateApp的对象实际是一个组件，每个应用都需要有一个根组件，有且只有一个
import { createApp } from 'vue'
const app = createApp({ /* 根组件选项 */ })
挂载应用： 应用实例必须调用.mount()方法才可以渲染出来，接受一个容器参数(例如div)，可以是一个实际DOM元素或一个CSS选择器字符串：
<div id="app"></div>
app.mount('#app')
应用根组件的内容会被渲染在容器元素里面。容器元素自己不会被、视为应用的一部分
.mount() 方法应该始终在整个应用配置和资源注册完成后被调用。返回值为 根组件实例 不是 应用实例
在根组件中没有设置template选项时，Vue将自动使用容器的innerHTML作为模板
应用配置
应用实例会暴露一个.config对象允许设置一些应用级的选项，例如定义一个应用级的错误处理器，将捕获所有由子组件上抛出而未被处理的错误：
console.error('抛出异常',[{status: '400'}]); //子组件抛出
//main.ts
const app = createApp(App)
app.mount('#app');
app.config.errorHandler = (err, vm, info) => {
// handle error
console.log(err);
}
console.log(app.config);
还可以注册应用范围内可用的资源，如注册一个组件：
app.component('TodoDeleteButton', TodoDeleteButton)
此时TodoDeleteButton在应用的任务和地方都是可用的。
确保在挂载应用实例之前完成所有应用配置！
应用实例并不只限于一个。createApp API 允许你在同一个页面中创建多个共存的 Vue 应用，而且每个应用都拥有自己的用于配置和全局资源的作用域。
一个应用实例 只有一个 根组件
如果你正在使用 Vue 来增强服务端渲染 HTML，并且只想要 Vue 去控制一个大型页面中特殊的一小部分，应避免将一个单独的 Vue 应用实例挂载到整个页面上，而是应该创建多个小的应用实例，将它们分别挂载到所需的元素上去。
模板语法
Attribute绑定
v-bind： 双大括号不能在HTML attributes中使用 ，想要响应式的绑定一个attribute，可以使用v-bind指令：
<div v-bind:id="dynamicId"></div>
v-bind 指令指示 Vue 将元素的 id attribute 与组件的 dynamicId 属性保持一致。如果绑定的值是 null 或者 undefined，那么该 attribute 将会从渲染的元素上移除。
简写： <div :id="dynamicId"></div>
绑定多个值
可以通过不带参数的v-bind，将它们绑定到单个元素上：
const objectOfAttrs = {
id: "container",
class: "wrapper",
};
<div v-bind="objectOfAttrs">
{{ objectOfAttrs.class }}
</div>
使用JavaScript表达式： Vue所有的数据绑定都支持完整的Javascript表达式：
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div :id="`list-${id}`"></div>
调用函数：
//script
let date: string = "变量Date";
function toTitleDate(str: string): string {
return "输出toTitleDate：" + str;
}
function formData(str: string): string {
return "Mustache语法：" + str;
}
//Template
<span :title="toTitleDate(date)">
{{ formData(date) }}
</span>
绑定在表达式中的方法在组件每次更新时都会被重新调用，因此不应该产生任何副作用，例如改变数据或触发异步操作。
指令Directive
指令： 带有v-前缀的特殊attribute。
参数Arguments 一些指令会需要一个参数，在指令后面通过一个冒号隔开做标识。 栗子：
<a v-bind:href="url"> ... </a>
<!-- 简写 -->
<a :href="url"> ... </a>
此处href就是一个参数，它会告诉v-bind指令将表达式url的值绑定到元素的hrefattribute上。简写时，参数前的一切会被缩略为:符号。
v-on指令：
<a v-on:click="doSomething"> ... </a>
<!-- 简写 -->
<a @click="doSomething"> ... </a>
动态参数
同样的在指令参数上也可以使用一个Javascript表达式，需要包含在一对方括号内：
//Script
let attributeName:string | null = 'h' + 'ref';
let url:string | null = 'https://www.baidu.com/';
//Template
<a :[attributeName]="url">跳转百度</a>
<!-- 注意，参数表达式有一些约束， 参见下面“动态参数值的限制”与“动态参数语法的限制”章节的解释 -->
<a v-bind:[attributeName]="url"> ... </a>
<!-- 简写 -->
<a :[attributeName]="url"> ... </a>
也可以将一个函数绑定到动态的事件名称上：
let eventName:string | null = 'click';
let doSomething = function onbutton(str:string){
console.log('click button' + str);
}
<div @[eventName]="doSomething('123')">log输出</div>
在此示例中，当 eventName 的值是 "focus" 时，v-on:[eventName] 就等价于 v-on:focus。
动态参数的限制
动态参数中表达式的值必须是一个字符串或null(string | null)。为null时意为显示移除该绑定。
动态参数语法的限制 动态参数表达式因为某些字符，而有一些语法限制，比如空格和引号，在HTML attribute 名称中都是不合法的。
<!-- 这会触发一个编译器警告 -->
<a :['foo' + bar]="value"> ... </a>
- 如果是复杂的表达式推荐使用计算属性。
- 在使用DOM内嵌模板中转换为
:[someattr],如果组件拥有的someAttr而不是someattr，这段代码不会工作。单文件组件内的模板不受此限制。
修饰符Modifiers
修饰符是以点开头的特殊后缀，例如 .prevent 修饰符会告知 v-on 指令对触发的事件调用 event.preventDefault()(取消默认事件)：
<form @submit.prevent="onSubmit">...</form>
