vue3选项api
应用实例
CreateApp
顾名思义，CreateApp 作为 vue 的启动函数，返回一个应用实例
使用Vue.createApp()创建一个新的 应用实例
其中，createApp中的参数为一个对象
const app = Vue.createApp({})挂载应用
mount
应用实例必须在调用了 .mount() 方法后才会渲染出来。该方法接收一个“容器”参数，可以是一个实际的 DOM 元素或是一个 CSS 选择器字符串：
<div id="app"></div>当然，你可以链式操作
Vue.createApp({}).mount('#app');应用根组件的内容将会被渲染在容器元素里面。容器元素自己将不会被视为应用的一部分。
.mount() 方法应该始终在整个应用配置和资源注册完成后被调用。同时请注意，不同于其他资源注册方法，它的返回值是根组件实例而非应用实例。
应用和组件
const app = Vue.createApp({
data() {
return {
title: 'kevin'
}
},
});
app.component('tom',{
data() {
return {
name: 'tom'
}
},
template: `<h2>{{name}}</h2>`
})
app.mount('#app');其中tom是根组件的子组件
<div id="app">
<h1>{{title}}</h1>
<tom/>
</div>当根组件没有设置 template 选项时，Vue 将自动使用容器的 innerHTML 作为模板。
vue指令与data属性
v-text是vue的一个指令（类似于html标签属性），与vue的模板语法{{}}作用相似
<h1>{{title}}</h1>
<h1 v-text="title"></h1>另外双大括号将会将数据插值为纯文本，而不是 HTML。若想插入 HTML，你需要使用 v-html指令 ：
<p>Using text interpolation: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>这里看到的 v-html attribute 被称为一个指令。指令由 v- 作为前缀，表明
它们是一些由 Vue 提供的特殊 attribuite（属性），它们将为渲染的 DOM 应用特殊的响应式行为。
安全警告
在网站上动态渲染任意 HTML 是非常危险的，因为这非常容易造成 XSS 漏洞。请仅在内容安全可信时再使用 v-html，并且永远不要使用用户提供的 HTML 内容（除非过滤掉了危险内容）。
Attribute 绑定
双大括号不能在 HTML attributes 中使用。相应的，应该使用 v-bind 指令：
<h1 v-bind:tt="title"></h1>v-bind 指令指示 Vue 将元素的 id attribute 与组件的 dynamicId（动态id） property 保持一致。如果绑定的值是 null 或者 undefined，那么该 attribute 将会从渲染的元素上移除。
简写
简写语法：
<h1 :tt="title"></h1>
<!-- title: 'kevin', data对象返回值中的title属性为'kevin'-->在浏览器中可以看到节点为：\<h1 tt="kevin">\</h1>
开头为 : 的 attribute 可能和一般的 HTML attribute 看起来不太一样，但它的确是合法的 attribute 名称字符，并且所有支持 Vue 的浏览器都能正确解析它。此外，他们不会出现在最终渲染的标签中。简写语法是可选的。
动态参数
指令参数上也可以使用一个 JavaScript 表达式
使用中括号[]来绑定动态参数
<h1 :[title]="value"></h1>
<!--
title: 'kevin',
value: 'a value',
-->\<h1 kevin="a value">\</h1>
动态参数值的限制
动态参数期望结果为一个字符串，或者是 null。特殊值 null 意为显式移除该绑定。任何其他非字符串的值都将触发一个警告。
动态参数语法的限制
动态参数表达式因为某些字符的缘故有一些语法限制，比如空格和引号，在 HTML attribute 名称中都是不合法的。
动态绑定多个值
如果你有像这样的一个包含多个 attribute 的 JavaScript 对象：
data() {
return {
objectOfAttrs: {
id: 'container',
class: 'wrapper'
}
}
}通过不带参数的 v-bind，你可以将它们绑定到单个元素上：
<div v-bind="objectOfAttrs"></div>修饰符
修饰符是以点开头的特殊后缀，表明指令需要以一些特殊的方式被绑定。例如 .prevent 修饰符会告知 v-on 指令对触发的事件调用 event.preventDefault()：
<form @submit.prevent="onSubmit">...</form>模板语法可以写表达式
模板语法可以写单个表达式
如：
<h3>{{n===1?value:title}}</h3>事件处理
监听事件
你可以使用 v-on 指令 (简写为 @) 来监听 DOM 事件和运行 JavaScript 代码。用法：v-on:click="methodName" 或 @click="handler"。
事件处理器的值可以是：
- 内联事件处理器：事件被触发时执行的内联 JavaScript 语句 (与
onclick类似)。 - 方法事件处理器：一个组件的属性名、或对某个方法的访问。
内联事件处理器
内联事件处理器通常用于简单场景，例如：
data() {
return {
count: 0
}
}
<button @click="count++">Add 1</button>
<p>Count is: {{ count }}</p>方法事件处理器
随着事件处理器的逻辑变得愈发复杂，内联代码方式变得不够灵活。因此 v-on 也可以接受一个方法名或对某个方法的调用。
举个例子：
const app = Vue.createApp({
data() {
return {
title: 'kevin',
value: 'a value',
n: 1
};
},
methods: {
up(){
n = this.n++;
}
}
});
<button @click="up">up</button>计算属性
推荐使用计算属性来描述依赖响应式状态的复杂逻辑。使用方法与data类似
侦听器
在选项式 API 中，我们可以使用 watch 选项在每次响应式 property 发生变化时触发一个函数。
