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文件包含三个主要部分：

1. 模板（Template）：模板部分定义了组件的结构和布局，使用HTML语法编写，并可以包含Vue的模板语法和指令来渲染数据和控制组件的行为。它描述了组件的外观和用户界面。

2. 脚本（Script）：脚本部分是组件的逻辑代码，使用JavaScript语法编写。它包含了组件的行为和交互逻辑，可以定义数据、方法和生命周期钩子等。在脚本部分，你可以使用Vue的API来定义组件的属性、数据、方法和生命周期钩子函数。

3. 样式（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内容删掉。删成这样就行了，这样的结构十分清晰。

文本插值

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

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

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

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

  
    
  
{{ message }}
  

在这个例子中，

 标签内的内容将会是 "Hello Vue!"。如果 message 属性的值在 Vue 实例的生命周期内发生了变化，那么 

 标签内的内容也会自动更新以反映新的值。

但以下几点值得注意：

1. HTML 转义：Vue 会自动将插值表达式的内容进行 HTML 转义，以防止 XSS 攻击。这意味着如果你尝试在插值表达式中插入 HTML 标签，这些标签会被当作纯文本处理，而不是被解析为 HTML 元素。

2. 性能考虑：虽然文本插值很方便，但在某些情况下（特别是在大型列表中），频繁的 DOM 更新可能会导致性能问题。在这种情况下，你可能需要考虑使用 Vue 的 v-for 指令配合 key 属性来优化渲染性能。

3. 非响应式数据：如果你尝试在插值表达式中访问的数据不是 Vue 实例的响应式数据（例如，直接访问一个非响应式的 JavaScript 对象的属性），那么 Vue 将无法追踪这个数据的变化，并且不会更新 DOM。

4. 表达式：插值表达式中可以包含简单的 JavaScript 表达式，如算术运算、字符串连接等。但是，请注意不要在插值表达式中执行复杂的逻辑或调用副作用函数（这些应该在 Vue 的方法或计算属性中处理）。

5. 替代方案：对于更复杂的模板逻辑，你可以使用 Vue 的指令（如 v-if、v-for、v-bind 等）或组件系统来构建你的视图。

Vue的Attribute绑定

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

基本用法

链接

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

缩写语法

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

链接

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

绑定到布尔属性

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

按钮

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

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

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

• 绑定类（class）：

  我是{{ isActive ? '激活的' : '未激活的' }}

  这里，:class 绑定了一个对象，对象的键是类名，值是布尔表达式。

• 绑定样式（style）：

  样式示例

  在这个例子中，:style 绑定了一个对象，对象的属性是 CSS 属性名，值是 JavaScript 表达式，可以是字符串、数字等。

绑定到自定义属性

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

用户信息

在这个例子中，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 的值中

 综合实例代码：

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

1. 组件（Component）：
   • Vue.js鼓励使用组件化的开发模式，即将UI分割成可复用的独立部分。在这个例子中，