参考官网：Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)
目录
一、应用与组件：
1、根组件：
我们传入 createApp 的对象实际上是一个组件，每个应用都需要一个“根组件”，其他组件将作为其子组件。
import { createApp } from 'vue'
// 从一个单文件组件中导入根组件
import App from './App.vue'
const app = createApp(App)传递给 createApp 的选项用于配置根组件，挂载应用时，该组件被用作渲染的起点。
应用实例必须在调用了 .mount() 方法后才会渲染出来。该方法接收一个“容器”参数，可以是一个实际的 DOM 元素或是一个 CSS 选择器字符串：
如果想把一个Vue应用挂载到 <div id="app"><div>，应该传入 #app：
const RootComponent = {
/*选项*/
}
const app = Vue.createApp(RootComponent)
const vm = app.mount("#app")
二、语法（举例说明）：
1、文本插值：“Mustache”语法、v-once指令
最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法 (即双大括号)。双大括号标签会被替换为相应组件实例中 msg 属性的值。同时每次 msg 属性更改时它也会同步更新。
<span>Message: {{ msg }}</span>使用v-once指令，也能一次性地插值，当数据改变时，插值处的内容不会更新。但注意这会影响到该节点上的其他数据绑定。
<span v-once>这个将不会改变: {{ msg }}</span>举个例子：
<script>
//声明式渲染，可以提高开发效率
export default{ //导出对象
data(){ //data会默认进行解析
return{
num:0,
uname:"张三"
}
}
}
</script>
<template>
<!-- 组件实例的所有property，无论如何定义，都可以在模板中访问 -->
<div>
<p>{{num}}</p>
<p>{{uname}}</p>
<!-- v-once ：当数据改变时，插值处的内容不会更新 -->
<p v-once>{{uname}}</p>
</div>
</template>
添加一个按钮，可以更直观方便的看到变化：
<script>
//声明式渲染，可以提高开发效率
export default{ //导出对象
data(){ //data会默认进行解析
return{
num:0,
uname:"张三"
}
},
methods:{
//给vue定义方法
changeUname:function(){
// this指向vue实例
this.uname='李四'
}
}
}
</script>
<template>
<!-- 组件实例的所有property，无论如何定义，都可以在模板中访问 -->
<div>
<p>{{num}}</p>
<p>{{uname}}</p>
<!-- v-once ：当数据改变时，插值处的内容不会更新 -->
<p v-once>{{uname}}</p>
<!-- 写一个点击事件，后面接上函数：changeUname -->
<button @click="changeUname">点击改变名字</button>
</div>
</template>
2、原始HTML：v-html指令
插入 HTML，你需要使用 v-html 指令：
<p>Using text interpolation: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>span 的内容将会被替换为 rawHtml 属性的值，插值为纯 HTML——数据绑定将会被忽略。注意，你不能使用 v-html 来拼接组合模板，因为 Vue 不是一个基于字符串的模板引擎。在使用 Vue 时，应当使用组件作为 UI 重用和组合的基本单元。
举个例子：
<script>
//声明式渲染，可以提高开发效率
export default{ //导出对象
data(){ //data会默认进行解析
return{
msg:"<h2>标题</h2>"
}
}
}
</script>
<template>
<!-- 组件实例的所有property，无论如何定义，都可以在模板中访问 -->
<div>
<p>{{msg}}</p>
<!-- v-html让内容以html的形式显示 -->
<p v-html="msg"></p>
</div>
</template>
3、Attribute 绑定：
（1）v-bind指令
<div v-bind:id="dynamicId"></div>v-bind 指令指示 Vue 将元素的 id attribute 与组件的 dynamicId 属性保持一致。如果绑定的值是 null 或者 undefined，那么该 attribute 将会从渲染的元素上移除。
v-bind指令可以简写：
<div :id="dynamicId"></div>开头为 : 的 attribute 可能和一般的 HTML attribute 看起来不太一样，但它的确是合法的 attribute 名称字符，并且所有支持 Vue 的浏览器都能正确解析它。此外，他们不会出现在最终渲染的 DOM 中。
举个例子：
<script>
//声明式渲染，可以提高开发效率
export default{ //导出对象
data(){ //data会默认进行解析
return{
id:"d1",
url:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Fb%2F54531d55eddad_130_170.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664870970&t=bb78738a5402dbe14f744e203baf6b75"
}
},
methods:{
//给vue定义方法
changeColor:function(){
this.id="d2"
},
},
};
</script>
<template>
<div>
<!-- v-bind 动态地绑定属性的内容 -->
<p v-bind:id="id">v-bind绑定</p>
<img v-bind:src="url" alt="">
<button @click="changeColor">改变颜色</button>
</div>
</template>
<style>
#d1{
color: red;
}
#d2{
color:aqua;
}
</style>
（2）布尔型 Attribute
布尔型 attribute 依据 true / false 值来决定 attribute 是否应该存在于该元素上。disabled 就是最常见的例子之一。v-bind 在这种场景下的行为略有不同：
<button :disabled="isButtonDisabled">Button</button>当 isButtonDisabled 为真值或一个空字符串 (即 <button disabled="">) 时，元素会包含这个 disabled attribute。而当其为其他假值时 attribute 将被忽略。
（3）动态绑定多个值
如果你有像这样的一个包含多个 attribute 的 JavaScript 对象：
data() {
return {
objectOfAttrs: {
id: 'container',
class: 'wrapper'
}
}
}
通过不带参数的 v-bind，你可以将它们绑定到单个元素上：
<div v-bind="objectOfAttrs"></div>4、使用 JavaScript 表达式
Vue 实际上在所有的数据绑定中都支持完整的 JavaScript 表达式：
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div :id="`list-${id}`"></div>
这些表达式都会被作为 JavaScript ，以组件为作用域解析执行。
在 Vue 模板内，JavaScript 表达式可以被使用在如下场景上：
- 在文本插值中 (双大括号)
- 在任何 Vue 指令 (以
v-开头的特殊 attribute) attribute 的值中
仅支持表达式：
每个绑定仅支持单一表达式，也就是一段能够被求值的 JavaScript 代码。一个简单的判断方法是：是否可以合法地写在 return 后面。
因此，下面的例子都是无效的：
<!-- 这是一个语句，而非表达式 -->
{{ var a = 1 }}
<!-- 条件控制也不支持，请使用三元表达式 -->
{{ if (ok) { return message } }}
调用函数：
可以在绑定的表达式中使用一个组件暴露的方法：
<span :title="toTitleDate(date)">
{{ formatDate(date) }}
</span>
5、指令
（1）指令Directives
指令（Directives）是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式（v-for 和 v-on 例外）。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。
（2）参数Arguments
某些指令能够接受一个“参数”，在指令名后通过一个冒号隔开做标识。例如用 v-bind 指令来响应式地更新一个 HTML attribute：
<a v-bind:href="url"> ... </a>
<!-- 简写 -->
<a :href="url"> ... </a>
这里 href 就是一个参数，告知 v-bind 指令将表达式 url 的值绑定到元素的 href attribute 上。
另一个例子是 v-on 指令，它将监听 DOM 事件：
<a v-on:click="doSomething"> ... </a>
<!-- 简写 -->
<a @click="doSomething"> ... </a>
注意：语法糖：就是对应的简写
（3）动态参数
同样在指令参数上也可以使用一个 JavaScript 表达式，需要包含在一对方括号内：
<!--注意，参数表达式有一些约束，参见下面“动态参数值的限制”与“动态参数语法的限制”两节-->
<a v-bind:[attributeName]="url"> ... </a>
这里的 attributeName 会作为一个 JavaScript 表达式被动态执行，计算得到的值会被用作最终的参数。举例来说，如果你的组件实例有一个数据属性 data property attributeName，其值为 "href"，那么这个绑定就等价于 v-bind:href。
同样的，你可以使用动态参数为一个动态的事件名绑定处理函数：
<a v-on:[eventName]="doSomething"> ... </a>
在此示例中，当 eventName 的值是 "focus" 时，v-on:[eventName] 就等价于 v-on:focus。
举个例子：
data(){ //data会默认进行解析
return{
id:"d1",
attributeName:'id',
mouseEvent:'click'
}<!-- 动态参数 -->
<!-- 动态属性 -->
<p v-bind:[attributeName]="id">v-bind绑定</p>
<button @click="attributeName='class'">改变属性</button>
<!-- 动态事件 -->
<button @[mouseEvent]="attributeName='class'">改变属性</button>
<!-- 鼠标移上事件 -->
<!-- 注意：操作：点击‘改变事件’的按钮，然后鼠标移动到另外的按钮上，即可触发移到的按钮 -->
<button @click="mouseEvent='mouseover'">改变事件</button>#d1{
color: red;
}
.d1{
font-size: 50px;
}分别点击三个按钮，即可看到变化：
（4）动态参数值的限制
动态参数中表达式的值应当是一个字符串，或者是 null。特殊值 null 意为显式移除该绑定。其他非字符串的值会触发警告。
（5）动态参数语法的限制
动态参数表达式因为某些字符的缘故有一些语法限制，比如空格和引号，在 HTML attribute 名称中都是不合法的。例如下面的示例：
<!-- 这会触发一个编译器警告 -->
<a :['foo' + bar]="value"> ... </a>
如果你需要传入一个复杂的动态参数，我们推荐使用计算属性替换复杂的表达式，也是 Vue 最基础的概念之一，我们很快就会讲到。
当使用 DOM 内嵌模板 (直接写在 HTML 文件里的模板) 时，我们需要避免在名称中使用大写字母，因为浏览器会强制将其转换为小写：
<a :[someAttr]="value"> ... </a>
上面的例子将会在 DOM 内嵌模板中被转换为 :[someattr]。如果你的组件拥有 “someAttr” 属性而非 “someattr”，这段代码将不会工作。单文件组件内的模板不受此限制。
（6）修饰符 Modifiers
修饰符是以点开头的特殊后缀，表明指令需要以一些特殊的方式被绑定。例如 .prevent 修饰符会告知 v-on 指令对触发的事件调用 event.preventDefault()：
<form @submit.prevent="onSubmit">...</form>最后，在这里你可以直观地看到完整的指令语法：
更多内容，请看下一节。