Javaweb学习之Vue模板语法（三）

学习资料

前情回顾

本期介绍（vue模板语法）

文本插值

Vue的Attribute绑定

使用JavaScript表达式

综合实例代码：

学习资料

Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)

前情回顾

项目的创建大家可以看这篇文章

Vue学习之项目的创建-CSDN博客

本期介绍（vue模板语法）

首先，找到我们编写代码的地方

找到自己项目的src文件夹，打开之后点击component文件夹，里面有一个HelloWorld.vue文件。在前期回顾中打开的网页界面内容就是这个文件做出来的。这里，我们可以了解一下.vue是什么。

.vue文件是Vue.js框架中使用的一种文件格式，它允许开发者以单文件组件（Single-File Components，简称SFCs）的形式组合HTML、CSS和JavaScript代码。这种格式的目的是将组件的模板、逻辑和样式封装在同一个文件中，有助于组织和管理代码结构，尤其是在构建大型、复杂的单页应用（SPA）时。

一个典型的.vue文件包含三个主要部分：

模板（Template）：模板部分定义了组件的结构和布局，使用HTML语法编写，并可以包含Vue的模板语法和指令来渲染数据和控制组件的行为。它描述了组件的外观和用户界面。
脚本（Script）：脚本部分是组件的逻辑代码，使用JavaScript语法编写。它包含了组件的行为和交互逻辑，可以定义数据、方法和生命周期钩子等。在脚本部分，你可以使用Vue的API来定义组件的属性、数据、方法和生命周期钩子函数。
样式（Style）：样式部分定义了组件的样式和外观，使用CSS语法编写。你可以通过样式部分为组件添加样式、布局和动画效果。Vue.js支持CSS预处理器，如Sass、Less等，允许你使用更高级的语法来编写样式。

通过将模板、脚本和样式组合在一个.vue文件中，可以将组件的相关代码封装在一起，使得组件的开发、维护和复用更加方便。在Vue.js项目中，.vue文件是创建Vue组件的主要方式。

此外，Vue.js使用构建工具（如Webpack）和加载器（如vue-loader）来处理.vue文件。这些工具会解析.vue文件，分别提取模板、脚本和样式部分，并进行相应的处理，如将模板编译成JavaScript渲染函数、处理脚本中的ES6语法、将样式应用到组件中等。

总的来说，.vue文件是Vue.js框架中用于定义Vue组件的一种特殊文件格式，它将组件的模板、逻辑和样式封装在一起，提高了代码的可维护性和复用性。

由于我们是初步学习vue，可以先将用不到的HelloWorld.vue内容删掉。删成这样就行了，这样的结构十分清晰。

<template><div class="hello"></div>
</template><script>
export default {name: 'HelloWorld'}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>

文本插值

Vue.js 中的文本插值是 Vue 模板语法的一个基本特性，它允许你在模板中嵌入表达式，这些表达式的结果会被渲染到 DOM 中。文本插值通过双大括号 {{ }} 语法实现。当 Vue 实例的数据发生变化时，插值表达式中的内容会自动更新以反映数据的变化。

假设你有一个 Vue 实例，它的 data 对象中有一个属性 message：

new Vue({  el: '#app',  data: {  message: 'Hello Vue!'  }  
})

你可以在 HTML 模板中使用双大括号 {{ }} 来绑定这个 message 属性：

<div id="app">  <!-- 文本插值 -->  <p>{{ message }}</p>  
</div>

在这个例子中，<p> 标签内的内容将会是 "Hello Vue!"。如果 message 属性的值在 Vue 实例的生命周期内发生了变化，那么 <p> 标签内的内容也会自动更新以反映新的值。

但以下几点值得注意：

HTML 转义：Vue 会自动将插值表达式的内容进行 HTML 转义，以防止 XSS 攻击。这意味着如果你尝试在插值表达式中插入 HTML 标签，这些标签会被当作纯文本处理，而不是被解析为 HTML 元素。
性能考虑：虽然文本插值很方便，但在某些情况下（特别是在大型列表中），频繁的 DOM 更新可能会导致性能问题。在这种情况下，你可能需要考虑使用 Vue 的 v-for 指令配合 key 属性来优化渲染性能。
非响应式数据：如果你尝试在插值表达式中访问的数据不是 Vue 实例的响应式数据（例如，直接访问一个非响应式的 JavaScript 对象的属性），那么 Vue 将无法追踪这个数据的变化，并且不会更新 DOM。
表达式：插值表达式中可以包含简单的 JavaScript 表达式，如算术运算、字符串连接等。但是，请注意不要在插值表达式中执行复杂的逻辑或调用副作用函数（这些应该在 Vue 的方法或计算属性中处理）。
替代方案：对于更复杂的模板逻辑，你可以使用 Vue 的指令（如 v-if、v-for、v-bind 等）或组件系统来构建你的视图。

Vue的Attribute绑定

Vue 中的 Attribute 绑定主要通过 v-bind 指令来实现。v-bind 指令用于响应式地更新 HTML 属性。当你需要把一个 JavaScript 表达式的结果绑定到某个 HTML 标签的属性上时，v-bind 就非常有用了。

基本用法

<a v-bind:href="url">链接</a>

在这个例子中，v-bind:href 表示 href 属性将会绑定到 Vue 实例的 url 属性上。当 url 的值变化时，<a> 标签的 href 属性也会相应地更新。

缩写语法

v-bind 指令有一个简写的形式，就是直接使用冒号（:）。所以上面的例子也可以写成：

<a :href="url">链接</a>

这种简写形式在 Vue 社区中非常常见，因为它既简洁又易于阅读。

绑定到布尔属性

对于布尔类型的属性，比如 disabled、checked、selected 等，当表达式的值为 true 时，属性会被添加到元素上；而当表达式的值为 false 时，属性则不会被添加。

<button :disabled="isButtonDisabled">按钮</button>

在这个例子中，如果 isButtonDisabled 的值为 true，则按钮会被禁用；如果为 false，则按钮保持启用状态。

绑定到类（class）和样式（style）

虽然 v-bind 可以用于任何属性，但它在处理类和样式时特别有用，因为 Vue 提供了额外的语法糖来简化这些常见用例。

绑定类（class）：
```
<div :class="{ active: isActive }">我是{{ isActive ? '激活的' : '未激活的' }}</div>
```
这里，:class 绑定了一个对象，对象的键是类名，值是布尔表达式。
绑定样式（style）：
```
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }">样式示例</div>
```
在这个例子中，:style 绑定了一个对象，对象的属性是 CSS 属性名，值是 JavaScript 表达式，可以是字符串、数字等。

绑定到自定义属性

v-bind 也可以用于绑定自定义的 HTML5 数据属性（data-*）。

<div :data-user-id="userId">用户信息</div>

在这个例子中，data-user-id 属性将会绑定到 Vue 实例的 userId 属性上。

总的来说，v-bind 是 Vue 中一个非常重要的指令，它使得在 Vue 模板中动态绑定 HTML 属性变得简单而直观。

使用JavaScript表达式

在Vue中，JavaScript表达式可以在模板中直接使用，主要通过插值表达式（双大括号{{ }}）或v-bind、v-model等指令来实现。这些表达式可以是简单的变量访问，也可以是更复杂的表达式，如算术运算、条件表达式、三元运算符等。但是，需要注意的是，在模板中使用的JavaScript表达式应该保持简单和快速，因为模板是Vue的响应式系统的一部分，复杂或计算量大的表达式可能会影响性能。

在 Vue 模板内，JavaScript 表达式可以被使用在如下场景上：

在文本插值中 (双大括号)
在任何 Vue 指令 (以 v- 开头的特殊 attribute) attribute 的值中

综合实例代码：

<template>  <div class="hello">  <!-- 标题 -->  <h3>学习Vue：模板语法</h3>  <!-- 使用插值表达式显示message变量的值 -->  <p>{{message}}</p>  <!-- 尝试直接显示HTML标签（这不会按HTML解析，只是作为普通文本显示） -->  <div>{{rawHtml}}</div>  <!-- 使用v-html指令来输出rawHtml变量的值，并作为HTML解析 -->  <div v-html="rawHtml"></div>  <!-- 使用v-bind指令（简写为:）来动态绑定元素的id属性到dynamicId变量的值 -->  <div v-bind:id="dynamicId"></div>  <!-- 使用JavaScript表达式计算结果并显示 -->  <p>{{num+10}}</p>  <!-- 使用三元运算符根据flag的值显示不同的文本 -->  <p>{{ flag? "真":"假"}}</p>  </div>  
</template>  <script>  
export default {  // 组件名称  name: 'HelloWorld',  // 组件的data函数返回一个对象，包含组件的响应式数据  data(){  return {  // 一个简单的字符串消息  message:"学习vue",  // 一个包含HTML标签的字符串，用于演示v-html指令  rawHtml:"<a href='https://blog.csdn.net/2301_80841939?type=lately'>标签</a>",  // 一个用于动态绑定id的数值  dynamicId:1001,  // 一个数字，用于演示JavaScript表达式的计算  num:10,  // 一个布尔值，用于演示三元运算符的使用  flag:true  }  }  
}  
</script>  <!-- 注意：这里没有包含<style>标签，因为它主要关注模板和脚本部分。  在实际项目中，可能会在<style>标签中添加CSS样式来美化组件。 -->

这串代码使用了Vue.js框架的几个核心知识点，具体如下：

组件（Component）：
- Vue.js鼓励使用组件化的开发模式，即将UI分割成可复用的独立部分。在这个例子中，<template>部分定义了一个名为HelloWorld的Vue组件的模板。
模板语法（Template Syntax）：
- 插值表达式（Interpolations）：使用双花括号{{ }}来输出变量的值。例如，{{message}}会输出data函数中定义的message变量的值。
- 指令（Directives）：带有v-前缀的特殊属性，用于在模板中添加响应式行为。在这个例子中，使用了v-html和v-bind（简写为:）两个指令。
  - v-html：用于输出原始HTML。在这个例子中，v-html="rawHtml"会将rawHtml变量的HTML字符串渲染为真实的HTML元素。
  - v-bind：用于响应式地更新HTML属性。在这个例子中，v-bind:id="dynamicId"会根据dynamicId变量的值动态设置元素的id属性。
条件渲染（Conditional Rendering）：
- 虽然这个例子中没有直接使用v-if、v-else-if、v-else等条件渲染指令，但它展示了如何在模板中使用JavaScript表达式（如三元运算符）来根据条件渲染不同的内容。例如，{{ flag? "真":"假"}}会根据flag变量的值显示“真”或“假”。
JavaScript表达式：
- 在模板中可以直接使用JavaScript表达式进行简单的计算或逻辑判断。例如，{{num+10}}会计算num变量与10的和并输出结果。
响应式数据（Reactive Data）：
- 在Vue组件中，data函数用于返回一个对象，该对象包含组件的响应式数据。当这些数据变化时，Vue会自动更新DOM以匹配最新的状态。在这个例子中，data函数返回了一个包含message、rawHtml、dynamicId、num和flag等属性的对象。
组件的注册与导出（Registration and Export）：
- 在这个例子中，Vue组件是通过<script>标签中的export default语句导出的，这使得其他文件可以通过导入这个组件来使用它。