VUE3 语法教程
vue3 起步
刚开始学习 Vue，我们不推荐使用 vue-cli 命令行工具来创建项目，更简单的方式是直接在页面引入 vue.global.js 文件来测试学习。
Vue3 中的应用是通过使用 createApp 函数来创建的，语法格式如下：
const app = Vue.createApp({ /* 选项 */ })
传递给 createApp 的选项用于配置根组件。在使用 mount() 挂载应用时，该组件被用作渲染的起点。
一个简单的实例：
Vue.createApp(HelloVueApp).mount(‘#hello-vue’)
createApp 的参数是根组件（HelloVueApp），在挂载应用时，该组件是渲染的起点。
一个应用需要被挂载到一个 DOM 元素中，以上代码使用 mount(‘#hello-vue’) 将 Vue 应用 HelloVueApp 挂载到
中。接下来我们从 Hello Vue!! 的代码开始学起。
Vue 3.0 实例
Vue 测试实例 - 菜鸟教程(runoob.com)
{{ message }}
以上实例中，我们先在 HTML 页面中引入 Vue 的 JS 文件：
HTML 页面中有一个 div 元素:
{{ message }}
mount(‘#hello-vue’) 将 Vue 应用 HelloVueApp 挂载到
中。{{ }} 用于输出对象属性和函数返回值。
{{ message }} 对应应用中 message 的值。
data 选项
data 选项是一个函数。Vue 在创建新组件实例的过程中调用此函数。它应该返回一个对象，然后 Vue 会通过响应性系统将其包裹起来，并以 $data 的形式存储在组件实例中。
Vue 测试实例 - 菜鸟教程(runoob.com)
以上实例属性仅在实例首次创建时被添加，所以你需要确保它们都在 data 函数返回的对象中。
方法
我们可以在组件中添加方法，使用 methods 选项，该选项包含了所需方法的对象。
以下实例我们添加了 methods 选项，选项中包含了 increment() 方法：
Vue 测试实例 - 菜鸟教程(runoob.com)
Vue3 指令
Vue 指令（Directives）是 Vue.js 的一项核心功能，它们可以在 HTML 模板中以 v- 开头的特殊属性形式使用，用于将响应式数据绑定到 DOM 元素上或在 DOM 元素上进行一些操作。
Vue 指令是带有前缀 v- 的特殊 HTML 属性，它赋予 HTML 标签额外的功能。
与传统的 JavaScript 方法相比，使用 Vue 创建响应式页面要容易得多，并且需要的代码更少。
以下是几个常用的 Vue 指令：
| 指令 | 描述 |
|---|---|
| v-bind | 用于将 Vue 实例的数据绑定到 HTML 元素的属性上。 |
| v-if | 用于根据表达式的值来条件性地渲染元素或组件。 |
| v-show | v-show 是 Vue.js 提供的一种指令，用于根据表达式的值来条件性地显示或隐藏元素。 |
| v-for | 用于根据数组或对象的属性值来循环渲染元素或组件。 |
| v-on | 用于在 HTML 元素上绑定事件监听器，使其能够触发 Vue 实例中的方法或函数。 |
| v-model | 用于在表单控件和 Vue 实例的数据之间创建双向数据绑定。 |
除了这些常用的指令，Vue 还提供了一些其他的指令，如 v-text、v-html 等，以及自定义指令，让开发者能够更加灵活地操作 DOM 元素。
Vue3 模板语法
Vue 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
Vue 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。
插值
- 文本
数据绑定最常见的形式就是使用 {{…}}（双大括号）的文本插值：
文本插值
{{ message }}
{{…}} 标签的内容将会被替代为对应组件实例中 message 属性的值，如果 message 属性的值发生了改变，{{…}} 标签内容也会更新。
如果不想改变标签的内容，可以通过使用 v-once 指令执行一次性地插值，当数据改变时，插值处的内容不会更新。
这个将不会改变: {{ message }}
用户输入
在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定：
双向数据绑定
{{ message }}
v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。
按钮的事件我们可以使用 v-on 监听事件，并对用户的输入进行响应。
以下实例在用户点击按钮后对字符串进行反转操作：
字符串反转
Vue 测试实例 - 菜鸟教程(runoob.com)
{{ message }}
缩写
- v-bind 缩写
Vue.js 为两个最为常用的指令提供了特别的缩写：
- v-on 缩写
Vue3 组件
组件（Component）是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素，封装可重用的代码。
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：
每个 Vue 应用都是通过用 createApp 函数创建的，传递给 createApp 的选项用于配置根组件。当我们挂载应用时，该组件被用作渲染的起点。
一个应用需要被挂载到一个 DOM 元素中。
以下实例我们将 Vue 应用挂载到
，应该传入 #app：const RootComponent = { /* 选项 */ }
const app = Vue.createApp(RootComponent)
const vm = app.mount('#app')
注册一个全局组件语法格式如下：
const app = Vue.createApp({...})
app.component('my-component-name', {
/* ... */
})
my-component-name 为组件名，/* … */ 部分为配置选项。注册后，我们可以使用以下方式来调用组件：
一个简单的 Vue 组件的实例：
全局组件实例
注册一个简单的全局组件 runoob，并使用它：
接下来我们再注册一个 button-counter 组件，在每次点击后，计数器会加 1:
// 创建一个Vue 应用
const app = Vue.createApp({})
// 定义一个名为 button-counter 的新全局组件
app.component('button-counter', {
data() {
return {
count: 0
}
},
template: `
`
})
app.mount('#app')
注意：template 中 ` 是反引号，不是单单引号 '。
组件的复用
你可以将组件进行任意次数的复用：
全局组件
以上的实例中我们的组件都只是通过 component 全局注册的。
全局注册的组件可以在随后创建的 app 实例模板中使用，也包括根实例组件树中的所有子组件的模板中。
全局组件实例
注册一个简单的全局组件 runoob，并使用它：
局部组件
全局注册往往是不够理想的。比如，如果你使用一个像 webpack 这样的构建系统，全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。
在这些情况下，你可以通过一个普通的 JavaScript 对象来定义组件：
const ComponentA = {
/* ... */
}
const ComponentB = {
/* ... */
}
const ComponentC = {
/* ... */
}
然后在 components 选项中定义你想要使用的组件：
const app = Vue.createApp({
components: {
'component-a': ComponentA,
'component-b': ComponentB
}
})
对于 components 对象中的每个属性来说，其属性名就是自定义元素的名字（component-a、component-b），其属性值就是这个组件的选项对象（ComponentA、ComponentB）。
我们也可以在实例选项中注册局部组件，这样组件只能在这个实例中使用：
局部组件实例
注册一个简单的局部组件 runoobA，并使用它：
Prop
prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。
父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 “prop”：
Prop 实例
一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop。
动态 Prop
类似于用 v-bind 绑定 HTML 特性到一个表达式，也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件：
Prop 实例
Prop 验证
组件可以为 props 指定验证要求。
为了定制 prop 的验证方式，你可以为 props 中的值提供一个带有验证需求的对象，而不是一个字符串数组。例如：
Vue.component('my-component', {
props: {
// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
propA: Number,
// 多个可能的类型
propB: [String, Number],
// 必填的字符串
propC: {
type: String,
required: true
},
// 带有默认值的数字
propD: {
type: Number,
default: 100
},
// 带有默认值的对象
propE: {
type: Object,
// 对象或数组默认值必须从一个工厂函数获取
default: function () {
return { message: 'hello' }
}
},
// 自定义验证函数
propF: {
validator: function (value) {
// 这个值必须匹配下列字符串中的一个
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}
})
当 prop 验证失败的时候，(开发环境构建版本的) Vue 将会产生一个控制台的警告。
type 可以是下面原生构造器：
- String
- Number
- Boolean
- Array
- Object
- Date
- Function
- Symbol
type 也可以是一个自定义构造器，使用 instanceof 检测。
Vue3 计算属性
计算属性关键词: computed。
计算属性在处理一些复杂逻辑时是很有用的。
可以看下以下反转字符串的例子：
{{ message.split('').reverse().join('') }}
实例 1 中模板变的很复杂起来，也不容易看懂理解。
接下来我们看看使用了计算属性的实例：
Vue 测试实例 - 菜鸟教程(runoob.com)
原始字符串: {{ message }}
计算后反转字符串: {{ reversedMessage }}
实例 2 中声明了一个计算属性 reversedMessage 。
提供的函数将用作属性 vm.reversedMessage 的 getter 。
vm.reversedMessage 依赖于 vm.message，在 vm.message 发生改变时，vm.reversedMessage 也会更新。
computed vs methods
我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。
methods: {
reversedMessage2: function () {
return this.message.split('').reverse().join('')
}
}
可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。
computed setter
computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：
const app = {
data() {
return {
name: 'Google',
url: 'http://www.google.com'
}
},
computed: {
site: {
// getter
get: function () {
return this.name + ' ' + this.url
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.name = names[0]
this.url = names[names.length - 1]
}
}
}
}
vm = Vue.createApp(app).mount('#app')
document.write('name: ' + vm.name);
document.write('
');
document.write('url: ' + vm.url);
document.write('
------ 更新数据 ------
');
// 调用 setter， vm.name 和 vm.url 也会被对应更新
vm.site = '菜鸟教程 https://www.runoob.com';
document.write('name: ' + vm.name);
document.write('
');
document.write('url: ' + vm.url);
从实例运行结果看在运行 vm.site = ‘菜鸟教程 http://www.runoob.com’; 时，setter 会被调用， vm.name 和 vm.url 也会被对应更新。
Vue3 监听属性
本章节，我们将为大家介绍 Vue3 监听属性 watch，我们可以通过 watch 来响应数据的变化。
以下实例通过使用 watch 实现计数器：
计数器: {{ counter }}
以下实例进行千米与米之间的换算：
千米 :
米 :
点击 “尝试一下” 按钮查看在线实例
以上代码中我们创建了两个输入框，data 属性中， kilometers 和 meters 初始值都为 0。watch 对象创建了 data 对象的两个监控方法： kilometers 和 meters。
当我们再输入框输入数据时，watch 会实时监听数据变化并改变自身的值。
异步加载中使用 watch
异步数据的加载 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。
以下实例我们使用 axios 库，后面会具体介绍。
Vue3 样式绑定
Vue.js class
class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。
v-bind 在处理 class 和 style 时， 表达式除了可以使用字符串之外，还可以是对象或数组。
v-bind:class 可以简写为 :class。
class 属性绑定
我们可以为 v-bind:class 设置一个对象，从而动态的切换 class:
实例 1
实例中将 isActive 设置为 true 显示了一个绿色的 div 块，如果设置为 false 则不显示：
以上实例 div class 渲染结果为：
我们也可以在对象中传入更多属性用来动态切换多个 class 。
此外，:class 指令也可以与普通的 class 属性共存。
实例 2
text-danger 类背景颜色覆盖了 active 类的背景色：
以上实例 div class 渲染结果为：
当 isActive 或者 hasError 变化时，class 属性值也将相应地更新。例如，如果 active 的值为 true，class 列表将变为 “static active text-danger”。
我们也可以直接绑定数据里的一个对象：
实例 3
text-danger 类背景颜色覆盖了 active 类的背景色：
实例 3 与 实例 2 的渲染结果是一样的。
此外，我们也可以在这里绑定一个返回对象的计算属性。这是一个常用且强大的模式：
实例 4
data() {
return {
isActive: true,
error: null
}
},
computed: {
classObject() {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
}
数组语法
我们可以把一个数组传给 v-bind:class ，实例如下：
实例 5
以上实例 div class 渲染结果为：
我们还可以使用三元表达式来切换列表中的 class ：
实例 6
errorClass 是始终存在的，isActive 为 true 时添加 activeClass 类：
以上实例 div class 渲染结果为：
Vue.js style(内联样式)
我们可以在 v-bind:style 直接设置样式，可以简写为 :style：
实例 7
菜鸟教程
以上实例 div style 渲染结果为：
菜鸟教程
也可以直接绑定到一个样式对象，让模板更清晰：
实例 8
菜鸟教程
v-bind:style 可以使用数组将多个样式对象应用到一个元素上：
实例 9
菜鸟教程
注意：当 v-bind:style 使用需要特定前缀的 CSS 属性时，如 transform ，Vue.js 会自动侦测并添加相应的前缀。
多重值
可以为 style 绑定中的 property 提供一个包含多个值的数组，常用于提供多个带前缀的值，例如：
这样写只会渲染数组中最后一个被浏览器支持的值。在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 display: flex。
组件上使用 class 属性
当你在带有单个根元素的自定义组件上使用 class 属性时，这些 class 将被添加到该元素中。此元素上的现有 class 将不会被覆盖。
实例 10
以上实例 div class 渲染结果为：
I like runoob!
对于带数据绑定 class 也同样适用：
当 isActive 为 true 时，HTML 将被渲染成为：
Hi
如果你的组件有多个根元素，你需要定义哪些部分将接收这个类。可以使用 $attrs 组件属性执行此操作：
实例 11
注意：template 中 ` 是反引号，不是单引号 '。
以上实例 div class 渲染结果为：
I like runoob!
这是一个子组件
