为了快速了解Vue的一些语法以及各种使用, 我们这边直接通过npm create vue来创建一个Vue项目, 然后从目录结构包括代码解析对于Vue作一个全局的了解

添加图片注释，不超过 140 字（可选）

从图片中我们可以看到, 这是一个简单的Vue项目的基本架构, 那么我们可以从项目的入口文件开始解读, 从而清晰的查看Vue的整个脉络结构

添加图片注释，不超过 140 字（可选）

在入口文件中, 我们可以看到如上的代码, 我们抛开基本的import引入, 逐条去理解下面的三条代码

const app = createApp(App)
App其实就是一个Vue组件, 被作为参数传入了createApp方法中
createApp 创建一个应用实例, 第一个参数是根组件, 第二个参数可以选, 是传给根组件的props
综合上面的解释可以理解, 这句代码的意思就是以App这个组件为根元素, 创建一个Vue应用的实例

app.use(router)
我们首先看use方法, 他的作用是安装一个插件, 第一个参数是插件本身, 第二个可选参数是传递给插件的选项
那么其实这边的作用就是在Vue的应用实例上安装一个router插件, router顾名思义也就是Vue的路由, 等于说我们针对于路由相关的配置可以去router文件夹里面查看

app.mount('#app')
显而易见这边#app是一个类名, 那么我们在全局搜索一下, 其实是可以看到在index.html文件中其实是有一个id为app的div标签
app.mount作用是将应用实例挂载在容器元素中, 对于每个应用实例mount只能调用一次

了解问Vue的一些基础挂载之后, 我们可以直接从组件中了解关于Vue组件的语法, 这边会直接照着文档在Vue组件中进行编写解释我们首先了解一下一个vue组件的基本构成(删除了部分CSS代码)

添加图片注释，不超过 140 字（可选）

这边可以看到一个Vue组件是由三个部分组成的, script, template, style 这里有三个需要解释的点

script setup 属性:
官方的解释是: 在单位件组件中使用组合式api的编译时语法糖, 我们可以直接去看一下他的功能或者和普通script的区别
正常的script标签只会在组件被首次引入时执行一次, setup会在每次组件实例被创建时执行
在其中声明的顶层绑定可以直接在模版中使用, 这里其实可以看一下模版语法的概念, 如下代码所示, 这边的模版语法其实就包括{{msg}} , 这个其实也是Vue中数据绑定相关的概念 , 除了文本的绑定, 还有类似于Attribute属性等的绑定, 后面会详细讲到, 包括代码内容内的@click是属于事件监听的语法糖, 下文会统一去讲述
可以引入组件
其他的方法更多涉及到详细的API, 这边就不作详细解释了, 总而言之加了setup其实就类似于从一个简单的html script标签转化成了Vue组件化使用的script标签, 可以于Vue template中的内容实现引用, 在官方文档的解释中也会有更好的性能

style scoped 属性: 当带有scoped时, css只影响当前元素, 可以理解为样式隔离
template: 内置的特殊元素, 可以理解为react中的<>, 在DOM中不渲染元素, 并且可以在上面添加v-if进行展示与否的判断

语法详解篇模版语法那么假设我们已经是一个有开发经验的打工人, 其实不需要对这一块做太多的基础性解释, 我们只要继续去看Vue的语法上有哪些内容可以实现哪些功能, 避免在使用时通过一些复杂手段实现一些已有的api能力, 在学习这些语法后我们再去通过Vue的一些原理或者和其他框架的区别来进行深入了解. 我们这边先总结下语法部分, 这边会根据文档顺序用简单的代码实例和截图来总结

文本插值, 也就是数据绑定, msg可以理解为一个script里面申明的变量

Message: {{ msg }}

通过 v-html 进行html的原始插入(包括样式应用), 可以对标与react中的dangerousHtml(忘了是不是这么拼写)

Using v-html directive:

Attribute绑定: v-bind(:) 用于标签属性的动态绑定, 可通过对象形式绑定多个值


const objectOfAttrs = {
  id: 'container',
  class: 'wrapper'
}

js表达式, 可以放表达式, 调用函数, 但不能使用语句声明比如变量定义

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}

动态参数: 使用[]包裹

...

指令与修饰符, 以v-开头的是vue的内置指令, 例如v-bind ,修饰符是跟在指令后面的 . 调用方法, 类似于.prevent调用event.preventDefault()

...

常见指令:
v-text:


{{msg}}

v-html: 内容作为普通html插入

v-show: 通过display属性来控制元素显示隐藏

v-if / v-else / v-else-if: 条件性渲染元素或代码片段

v-for: for循环类似效果

v-on(@): 事件监听绑定

v-bind(:): 绑定attribute, 绑定props等

v-model: 在表单项上创建双向绑定

v-memo: 传入依赖缓存模版子树, 如果数组中的值结果相同则跳过渲染, 类似于React useMemo

v-cloak: 隐藏未完成编译的dom模版

在Vue的使用过程中, 会根据风格区分为两种不同的写法: 组合式API, 选项式API, 后续内容以选项式API进行

响应式状态

ref()

通过ref()函数来声明状态, ref接收参数, 并将其包裹在带有.value属性的ref对象中返回.

import { ref } from 'vue'

const count = ref(0)

console.log(count) // { value: 0 }
console.log(count.value) // 0

count.value++
console.log(count.value) // 1

模版中使用ref时不需要使用.value访问, 会有自动解包过程

瑞岁编程网

React开发快速上手Vue_react开发教程

响应式状态

ref()