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

Vue入门到精通：核心语法—模板语法

news 2024/12/16 18:38:30

在这里插入图片描述

Vue入门到精通：核心语法—模板语法

Vue.js因其简单、易用和高效的特点，自推出以来一直受到广泛关注。Vue.js的核心概念和技术包括模板语法、计算属性、事件监听、动态样式绑定、条件渲染指令（如v-if）、列表渲染指令（如v-for）、事件处理机制、表单数据收集方法、Vue实例的生命周期管理以及过渡效果与动画实现等。这些内容构成了日常开发中不可或缺的基础知识体系。

目前Vue提供了两种主要的编程模式：选项式API (Options API) 和组合式API (Composition API)。这里主要基于选项式API进行学习，但也会适当提及组合式API的相关特性。

一、模板语法

随着前端技术的不断演进，用户界面的交互复杂度日益增加，这直接导致了对字符拼接、循环遍历以及DOM节点操作等技术需求的激增。特别是在处理大量数据和频繁的用户交互时，如何优化用户体验和提升性能成为了一个亟待解决的问题。Vue.js 引入了一种基于HTML的模板语法，它允许开发者以声明式的方式将应用或组件实例的数据绑定到DOM上，从而简化了开发过程并提高了代码的可维护性。

在Vue的模板中，除了标准的HTML结构外，还融入了两种特有的语法：插值（Interpolation）和指令（Directives）。插值语法的主要功能是向HTML标签体中动态插入数据值，使得数据的展示更加直观和灵活。而指令语法则用于操作其所在的HTML标签，例如设置动态属性值、绑定事件监听器、控制元素的显示与隐藏等。这些特性极大地增强了模板的表达能力和灵活性。

在底层实现上，Vue会将模板编译成高度优化的JavaScript代码。这一过程涉及到虚拟DOM的创建和差异比较算法的应用，确保只有在实际需要更新的部分才会被重新渲染，从而最小化了性能开销。结合Vue的响应式系统，当应用的状态数据发生变化时，Vue能够智能地识别哪些DOM节点需要更新，并执行相应的更新操作。这种机制不仅提升了应用的性能，也使得开发者能够专注于业务逻辑的实现，而无需过多关注性能优化的细节。

1.插值语法

在Vue.js中，插值语法是一种强大的工具，它允许开发者将动态数据直接嵌入到HTML模板中。这种语法的核心在于其简洁而直观的表达方式，使得数据的展示变得既灵活又高效。

插值语法的结构非常简单，它通过双大括号{{ }}来包裹一个JavaScript表达式，从而实现数据的动态绑定。例如，{{ message }} 表示将data对象中的message属性的值插入到这个位置。这种方式不仅仅限于常量和变量，还可以是更复杂的表达式，如变量对象的方法调用或三目运算符等。

值得注意的是，插值语法的使用有一定的限制。它只能用于标签体的内部文本或作为标签体的一部分，而不能直接用作HTML标签的属性值。这意味着，如果想要将数据绑定到元素的属性上，需要使用Vue的指令语法（v-bind）来实现。

此外，插值语法中引用的数据来源于Vue实例的data对象。下面是一个简单的Vue使用实例以及运行效果。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>插值表达式</title></head><body><div id="app"><p>{{123}}</p><p>{{message}}</p><p>{{message.toUpperCase()}}</p><p>{{score<60 ? '考试未及格' : '考试及格'}}</p></div><script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.47/vue.global.js"></script><script>const { createApp } = VuecreateApp({data() {return {message: 'Welcome to learning Vue!',score: 59,}},}).mount('#app')</script></body>
</html>

运行结果：

在这里插入图片描述

2.指令语法

在Vue.js中，指令是一种特殊的标签属性，它们以“v-”作为前缀，用于扩展HTML元素的功能。这些自定义属性的值通常是一个JavaScript表达式，允许开发者动态地控制DOM元素的行为和外观。Vue框架内置了一系列功能强大的指令，每个指令都设计用来执行特定的任务，从而简化开发过程并增强用户体验。

例如，v-bind指令用于绑定HTML属性值到Vue实例的数据，使得数据变化时能够实时反映到视图上。通过这个指令，开发者可以轻松实现动态的样式设置或属性赋值，而无需手动更新DOM。另一个常用的指令是v-on，它允许为元素添加事件监听器，以便在用户交互时触发特定的方法或函数，这对于处理表单输入、按钮点击等行为非常有用。

此外，v-if和v-show指令则提供了条件渲染的能力。v-if会根据表达式的真假来完全移除或添加DOM元素，适用于那些需要根据条件显示或隐藏整个元素的场景；而v-show则是通过CSS的display属性来控制元素的可见性，适合仅改变元素显示状态的情况。这两种指令虽然都可以控制元素的显示与隐藏，但它们的底层实现机制不同，因此在性能和应用场景上也有所区别。

无论是哪种类型的指令，其操作的目标始终是包含该指令的HTML标签本身。这意味着指令的作用范围仅限于它们所在的元素，不会对其他部分产生影响。这种设计既保持了代码的清晰性，也提高了可维护性，因为每个指令的职责都非常明确。

下面以v-bind与v-on为例来演示指令语法的使用以及其运行效果展示。

语法：

● v-bind：属性名=“JavaScript表达式”。

● v-on：事件名=“方法名表达式”。

代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>指令语法</title></head><body><div id="app"><a v-bind:href="url">去学习Vue技术</a><br /><button v-on:click="confirm">确认</button></div><script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.47/vue.global.min.js"></script><script>const { createApp } = VuecreateApp({data() {return {url: 'https://www.runoob.com/',}},// methods中配置的方法，模板中可以直接调用methods: {confirm() {if (window.confirm('是否进入学习？')) {window.location.href = 'https://www.runoob.com/'}},},}).mount('#app')</script></body>
</html>

代码解析：

（1）HTML结构：

<!DOCTYPE html>：声明文档类型为HTML5。
<html lang="en">：设置文档的语言为英语。
<head>：包含文档的元数据，如字符编码、兼容性设置和视口配置。
<title>：设置网页标题为“指令语法”。
<body>：包含网页的主体内容。

（2）Vue.js部分：

<div id="app">：这是Vue应用的挂载点。
<a v-bind:href="url">去学习Vue技术</a>：使用v-bind指令将url数据属性的值绑定到href属性上。当url的值改变时，链接也会相应更新。
<button v-on:click="confirm">确认</button>：使用v-on指令监听按钮的点击事件，并在点击时调用confirm方法。

（3）JavaScript部分：

<script src="https://unpkg.com/vue@next"></script>：引入Vue.js库。
createApp({ ... })：创建一个Vue应用实例。
data()：返回一个对象，其中包含应用的数据属性。在这个例子中，只有一个url属性。
methods：定义应用的方法。在这个例子中，有一个confirm方法，用于处理按钮点击事件。
mount('#app')：将Vue应用挂载到id为app的元素上。

弹窗中“确定”按钮后跳转至指定网站。其实Vue允许将“v-bind：属性名”简化为“：属性名”，“v-on：事件名”简化为“＠事件名”的形式。

下面是运行效果：

在这里插入图片描述

3.data和methods配置项

在创建Vue应用对象时，需要提供一个配置对象，其中包含两个核心配置项：data和methods。接下来，我们将详细探讨这两个配置项的功能和用法。

data配置项。它的值必须是一个函数，该函数返回一个对象，这个对象包含了若干个可变的属性，通常被称为data对象。这些属性在模板中可以被动态地读取和显示。通过这种方式，开发者可以轻松地将数据与视图进行绑定，实现数据的双向绑定。

methods配置项。它是一个包含多个方法的对象。在这些方法中，可以通过this.xxx来访问或修改data对象中的属性。当这些属性被修改后，页面会自动更新，以反映最新的数据状态。

data函数和methods方法中的this关键字，本质上是一个代理（Proxy）对象。这个代理对象负责代理data对象中所有属性的读写操作。因此，用户可以通过this来读取或更新data对象中的属性。同样地，在methods对象中定义的所有方法也会被添加到这个代理对象中，使得在方法中也可以通过this来更新data属性，从而触发页面的自动更新。

关于模板中的表达式读取变量或函数，这些操作本质上都是从代理对象上进行的查找。

下面通过一段代码对data函数和methods对象进行具体演示。

代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>data属性与methods方法</title></head><body><div id="app"><h2>count: {{count}}</h2><button @click="updateCount">更新</button></div><script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.47/vue.global.min.js"></script><script>const { createApp } = Vueconst app = createApp({// data函数返回data对象， data对象中的所有属性在代理对象上都会有对应的名称的属性data() {console.log(this)return {count: 0,}},// methods中的所有方法，都会成为代理对象的方法methods: {updateCount() {this.count += 1},},})// console.log(app)const vm = app.mount('#app')// 通过代理对象vm读取定义在data对象中的count属性console.log(vm.count)// 2秒后通过代理对象vm直接更新data中的count属性，界面会自动更新setTimeout(() => {vm.count += 2}, 2000)// 4秒后通过代理对象vm调用methods中定义的方法来更新count，界面会自动更新setTimeout(() => {vm.updateCount()}, 4000)</script></body>
</html>