当前位置：首页 > web >正文

快速入门Vue3——语法初识

web 2025/8/29 23:19:40

写在前面

一、编程从HelloWorld开始

1.1、显示HelloWorld

1.2、变量和函数

二、案例实践

2.1、字符串反转（v-on）

2.2、显示与隐藏（v-if）

2.3、TodoList（v-for&v-model）

三、初识组件

写在前面

今天的内容也是比较简单的，我们通过写一些简单的小案例来感受一下Vue的语法，通过这几个小的代码片段，对Vue的语法有个初步的感受，给后续的学习做个铺垫吧！

一、编程从HelloWorld开始

1.1、显示HelloWorld

首先我们在电脑上创建一个grammar的文件夹，然后使用VSCode打开，在文件夹下创建一个helloworld.html的文件，然后我们来编写这样一段代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>HelloWorld</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script></head><body><div id="root"></div></body><script>Vue.createApp({template: '<div>Hello World</div>'}).mount('#root')</script>
</html>

我们找到helloworld.html文件，右键在浏览器中打开，看下运行效果：

然后我们对上面的代码做个简单的说明吧：

Vue实例创建：使用Vue.createApp()创建Vue实例，表示开始使用Vue框架。
挂载目标元素：通过.mount('#root')指定Vue实例作用的DOM元素（如id="root"的div）。
模板渲染原理：template内容会替换挂载目标元素内的原有内容（如显示"hello world"）。
作用域限制：Vue实例仅对指定的挂载元素生效（如#root生效）。

1.2、变量和函数

先来看代码：

<script>Vue.createApp({data() {return {count: 1,}},mounted() {console.log('我是mounted')},template: '<div>{{count}}</div>',}).mount('#root')</script>

运行效果：

对上面这段代码大语法做个说明：

双大括号语法：表示Vue模板中的JS表达式，如{{count}}会解析为变量
data函数：返回组件数据对象，定义模板中可用的变量
模板渲染流程：先找到挂载点(root)，再将template内容渲染到DOM
变量绑定原理：模板中的变量会查找data返回对象中的对应属性值
mounted函数：Vue生命周期钩子，在组件挂载完成后执行
基础代码结构：包含template模板、data数据函数和生命周期回调

二、案例实践

2.1、字符串反转（v-on）

<script>Vue.createApp({data() {return {content: '字符串反转',}},methods:{btnClick(){this.content = this.content.split('').reverse().join('')}},template:`<div><span>{{content}}</span><button v-on:click="btnClick">确定</button></div>`}).mount('#root');</script>

代码解读：

按钮创建：使用HTML的button标签创建按钮，并设置内容为“确定”。
事件绑定：在Vue中使用v-on:click指令绑定点击事件，这里需要学会v-on这个指令。
方法定义：在Vue实例的methods对象中定义处理点击事件的函数。
数据驱动：通过改变数据（如content）来驱动视图更新，而非直接操作DOM。View面向数据编程，数据变化自动更新页面。
字符串反转：在方法中实现字符串反转逻辑，使用split('')打散字符串，reverse()反转数组，join('')重新聚合。
面向数据编程：强调从操作DOM转向操作数据，Vue会自动更新视图。

2.2、显示与隐藏（v-if）

<script>Vue.createApp({data() {return {isShow: true,}},methods: {btnClick() {this.isShow = !this.isShow},},template: `<div><span v-if="isShow">显示隐藏数据</span><button v-on:click="btnClick">显示/隐藏</button></div>`,}).mount('#root')</script>

实现效果：

代码解读：

v-if指令：控制HTML元素的显示与隐藏，基于布尔值条件
数据驱动：通过修改数据(isShow变量)控制视图变化，而非直接操作DOM
状态切换：使用this.isShow=!this.isShow实现显示/隐藏的布尔值取反
初始状态设置：定义isShow:true使元素默认显示
指令作用对象：v-if作用于包裹内容的span标签，决定其存在与否
响应式原理：视图自动响应数据变化(isShow值改变触发DOM更新)

2.3、TodoList（v-for&v-model）

<script>Vue.createApp({data() {return {inputValue: '',list: [],}},methods: {btnClick() {this.list.push(this.inputValue)this.inputValue = ''},},template: `<div><input v-model="inputValue"/><button v-on:click="btnClick">增加</button><ul><li v-for="(item) of list">{{item}}</li></ul></div>`,}).mount('#root')</script>

实现效果：

代码解读：

整体流程：

①、初始化数据：将list设置为空数组，页面无展示内容。

②、添加按钮：通过button绑定click事件，触发btnClick方法。

③、数据操作：使用this.list.push(data)向数组添加数据，页面自动更新。

循环展示：使用v-for指令实现自动循环展示，语法为v-for="item in list"，通过{{item}}绑定每一项内容。
指令作用：v-for指令用于循环遍历数组或对象，将每一项数据绑定到模板中。
语法解析：v-for="item in list"表示遍历list数组，当前项赋值给item变量。
动态更新：数据变化时，页面自动同步更新。
索引功能：可通过v-for="(item, index) in list"获取当前项的下标index。
v-model：通过v-model指令实现输入框与数据的双向绑定，语法为v-model="inputValue"。
数据同步：输入框内容变化时，inputValue同步更新；反之亦然。

三、初识组件

先上代码，将<li>标签中的内容拆分成组件，替换之前的内容，实现相同的效果，如下所示：

<script>const app = Vue.createApp({data() {return {inputValue: '',list: [],}},methods: {btnClick() {this.list.push(this.inputValue)this.inputValue = ''},},template: `<div><input v-model="inputValue"/><button v-on:click="btnClick">增加</button><ul><todo-item v-for="(item,index) of list" v-bind:content="item" v-bind:index="index"/></ul></div>`,})app.component('todo-item', {props: ['content', 'index'],template: `<li>{{index}}---{{content}}</li>`,})app.mount('#root')</script>

实现效果：

在进行代码解读之前，先来介绍一个前文中没有说过的指令，上面代码中也用到了，就是v-bind：

标签属性绑定数据需使用v-bind指令，传统插值表达式（双大括号语法）仅适用于标签内容区域
示例：<button title="{{inputValue}}">无法正确绑定数据，需改为<button v-bind:title="inputValue">
核心区别：
- 插值表达式作用于标签内容区域
- v-bind指令作用于标签属性绑定

接着来说一下组件的概念：组件本质是页面功能模块的封装，具有以下特征：

粒度可控：从完整页面到单个DOM标签均可作为组件
工程价值：解决大型项目代码维护成本问题
最小单位：理论上单个HTML标签即为最小粒度组件

因此对页面中可以提炼出组件的代码进行组件拆分，拆分依据：

复杂度阈值：当列表项包含超过3层嵌套结构（示例中div>span>index+横线分隔符）
功能独立性：具备完整展示逻辑的UI单元（如待办事项列表项）
维护成本：同一文件内代码量超过可维护范围时需拆解

组件注册的标准流程：

创建Vue实例：const app = Vue.createApp()
注册组件：app.component('todo-item', { template: '<div>Hello World</div>' })
挂载实例：app.mount('#root')
关键注意：组件必须在实例挂载前完成注册

组件的数据来源：

数据层级	定义方式	作用范围	典型应用
组件内部数据	data()函数返回	当前组件实例	静态展示内容
父级传递数据	props属性接收	子组件内部	动态业务数据