ToB企服应用市场:ToB评测及商务社交产业平台

标题: WEB前端13-Vue2常用指令 [打印本页]

---

作者: 瑞星    时间: 2024-8-1 12:25
标题: WEB前端13-Vue2常用指令
Vue2常用指令

1. 文本插值

Vue 中使用双大括号 {{ }} 进行文本插值，将数据渲染到 DOM 中：

1. <template>
2.     <div>
3.         <h1>{{ name }}</h1>
4.         <h1>{{ age > 60 ? '老年' : '青年' }}</h1>
5.     </div>
6. </template>
7. <script>
8. const options = {
9.     data: function () {
10.         return {
11.             name: '张三',
12.             age: 20
13.         };
14.     }
15. };
16. export default options;
17. </script>

复制代码

注意事项和细节：

• 文本插值支持简朴的 JavaScript 表达式，但不保举在插值中使用复杂逻辑或方法调用。
  
• Vue 实例的 data 对象中定义的属性会相应式地更新视图，即当 message 改变时，相干的 DOM 会主动更新,默认为双向绑定。
  
• {{}} 里只能绑定一个属性，绑定多个属性需要用多个 {{}} 分别绑定
  
• Vue中还设置了v-text和v-html标签用于替换文档的内容，它与Js中的textContent和innerHTML属性的作用相同
  

2. 属性绑定

可以使用 v-bind 指令来动态绑定 HTML 属性：

1. <template>
2.   <div>
3.     <img v-bind:src="imageURL">
4.   </div>
5. </template>
7. <script>
8. export default {
9.   data() {
10.     return {
11.       imageURL: 'https://example.com/image.jpg'
12.     };
13.   }
14. };
15. </script>

复制代码

注意事项和细节：

• v-bind 可以简写为 :，例如 :src="imageURL"。
  
• 动态绑定的属性可以是 HTML 元素的任何属性，比如 href、class 等。
  

3. 事件绑定

使用 v-on 指令来监听 DOM 事件：

1. <template>
2.   <div>
3.     <button @click="sayHello">Say Hello</button>
4.   </div>
5. </template>
7. <script>
8. export default {
9.   methods: {
10.     sayHello() {
11.       alert('Hello!');
12.     }
13.   }
14. };
15. </script>

复制代码

注意事项和细节：

• v-on 可以简写为 @，例如 @click="sayHello"。
  
• 在 methods 中定义的方法可以在模板中通过 v-on 绑定到事件上，如许可以实现用户交互。
  
• 在 methods 方法中的 this 代表的是 data 函数返回的数据对象
  

4. 双向绑定

使用 v-model 指令实现表单位素的双向绑定：

1. <template>
2.   <div>
3.     <input v-model="message" type="text">
4.     <p>{{ message }}</p>
5.   </div>
6. </template>
8. <script>
9. export default {
10.   data() {
11.     return {
12.       message: '你好'
13.     };
14.   }
15. };
16. </script>

复制代码

注意事项和细节：

• v-model 只实用于表单位素，如 input、textarea 和 select。
  
• 双向绑定会将输入框的值与 Vue 实例的数据属性同步，从而实现数据的双向活动。
  
• 复选框这种标签，双向绑定的 javascript 数据类型一般用数组
  

5. 盘算属性

通过 computed 属性定义盘算属性，根据依赖进行缓存，只有在相干依赖发生厘革时才会重新盘算：

1. <!-- 计算属性 -->
2. <template>
3.         <div>
4.       显示全名：{{ fullName() }}<br />
5.       显示全名：{{ fullName1 }}<br />
6.     </div>
7. </template>
9. <script>
10. const options = {
11.     data: function () {
12.         return { xing: '李', ming: '四' };
13.     },
14.     methods: {
15.         fullName() {
16.       return this.xing + this.ming;}
17.     },
19.     computed: {
20.         fullName1() {
21.       return this.xing + this.ming;}
22.     },
23. };
24. export default options;
25. </script>

复制代码

注意事项和细节：

• 普通方法调用必须加 ()，没有缓存功能
  
• 盘算属性使用时就把它当属性来用，不加 ()，有缓存功能：一次盘算后，会将效果缓存，下次再盘算时，只要数据没有厘革，不会重新盘算，直接返回缓存效果
  

6.条件渲染

v-if 和 v-else
v-if 是Vue.js中用来根据表达式的真假条件渲染元素的指令。它的基本用法如下：

1. <div v-if="condition">
2.   <!-- 当条件为真时显示的内容 -->
3. </div>

复制代码

此中，condition 是一个返回布尔值的表达式。如果 condition 为真，<div> 元素及其内容会被渲染到页面上；如果 condition 为假，则 <div> 元素不会被渲染。
有时候，我们需要在条件为假的情况下显示备选内容，这时可以使用 v-else：

1. <div v-if="condition">
2.   <!-- 当条件为真时显示的内容 -->
3. </div>
4. <div v-else>  <!-- 当条件为假时显示的内容 --></div>

复制代码

v-else 指令必须紧跟在带有 v-if 的元素大概 v-if / v-else-if 块的后面，并且在同一父元素下。它表现，如果前面的 v-if 表达式为假，则渲染 v-else 后面的内容。

• 注意：v-if现实就是根据表达式的布尔值对dom树中的节点进行增删，类似的v-show下令是通过display属性，根据表达式的布尔值动态展示
  

7.列表渲染

v-for 是Vue.js中用来渲染列表数据的指令，它能够根据数据源迭代渲染出多个元素。基本的用法如下：

1. <div v-for="item in items" :key="item.id">
2.   {{ item.name }}
3. </div>

复制代码

在这个例子中，items 是一个包罗多个对象的数组，每个对象都至少有一个唯一的 id 属性。v-for 指令会遍历 items 数组，为每个数组元素创建一个 <div> 元素，并显示 item.name 的内容。
注意事项：

• v-for 指令后面需要使用 in 关键字来指定遍历的源数据大概使用关键字of
  
• 必须为每个迭代的元素提供一个唯一的 key 属性，以便于Vue.js识别每个节点的身份，优化渲染性能。
  

案例：动态表格

后端：

1. package com.tyut.controller;
3. import com.fasterxml.jackson.databind.ObjectMapper;
4. import com.tyut.entity.Student;
5. import com.tyut.service.StudentService;
7. import javax.servlet.ServletException;
8. import javax.servlet.annotation.WebServlet;
9. import javax.servlet.http.HttpServlet;
10. import javax.servlet.http.HttpServletRequest;
11. import javax.servlet.http.HttpServletResponse;
12. import java.io.IOException;
13. import java.io.PrintWriter;
14. import java.util.List;
16. @WebServlet("/getStudentsServlet")
17. public class GetStudentsServlet extends HttpServlet {
18.     @Override
19.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
20.         response.setContentType("text/html;charset=utf-8");
21.         response.addHeader("Access-Control-Allow-Origin", "http://localhost:7070");
22.         request.setCharacterEncoding("utf-8");
24.         PrintWriter out = response.getWriter();
27.         StudentService studentService = new StudentService();
28.         List<Student> allStudent = studentService.getAllStudent();
30.         // 创建 ObjectMapper 对象
31.         ObjectMapper objectMapper = new ObjectMapper();
33.         // 将集合转换为 JSON 字符串
34.         String jsonString = objectMapper.writeValueAsString(allStudent);
36.         out.write(jsonString);
37.     }
39.     @Override
40.     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
41.         this.doGet(request, response);
42.     }
43. }

复制代码

前端：

1. <template>
2.   <div>
3.     <div>
4.       <table>
5.         <caption>
6.           学生信息表
7.         </caption>
8.         <thead>
9.           <tr>
10.             <th>编号</th>
11.             <th>姓名</th>
12.             <th>性别</th>
13.           </tr>
14.         </thead>
15.         <tbody v-if="students.length > 0">
16.           <tr v-for="s in students" :key="s.id">
17.             <td>{{ s.id }}</td>
18.             <td>{{ s.name }}</td>
19.             <td>{{ s.sex }}</td>
20.           </tr>
21.         </tbody>
22.         <tbody v-else>
23.           <tr>
24.             <td colspan="3" class="message">暂无学生数据</td>
25.           </tr>
26.         </tbody>
27.       </table>
28.     </div>
30.     <div v-text="students"></div>
31.     <div>{{ students }}</div>
32.   </div>
33. </template>
35. <script>
36. import axios from "axios";
38. export default {
39.   data() {
40.     return {
41.       students: [],
42.     };
43.   },
44.   mounted() {
45.     this.getStudents();
46.   },
47.   methods: {
48.     async getStudents() {
49.       try {
50.         const response = await axios.post("/management_system/getStudentsServlet");
51.         this.students = response.data;
52.       } catch (error) {
53.         console.error("Error fetching students:", error);
54.       }
55.     },
56.   },
57. };
58. </script>
60. <style scoped>
61. caption {
62.   text-align: center;
63.   font-family: "腾讯体";
64.   font-size: 50px;
65. }
67. table {
68.   border: 2px solid silver;
69.   margin: 0 auto; /* 设置左右外边距为自动，实现居中 */
70.   width: 50%; /* 可根据需要调整宽度 */
71.   border-spacing: 0;
72. }
74. th,
75. td {
76.   border: 1px solid silver;
77.   width: 100px;
78.   height: 50px;
79.   font-family: "黑体";
80.   font-size: 25px;
81.   text-align: center;
82. }
84. .message {
85.   text-align: center;
86. }
87. </style>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4