devbox
笔触狂放9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue核心技术（二）

作者：笔触狂放9 | 2024-02-16 19:24:47

赞

踩

vue核心技术（二）

◆ 指令补充

指令修饰符

通过 "." 指明一些指令 后缀，不同 后缀 封装了不同的处理操作 → 简化代码

v-bind 对于样式控制的增强 

为了方便开发者进行样式控制， Vue 扩展了 v-bind 的语法，可以针对 class 类名 和 style 行内样式 进行控制 。

v-bind 对于样式控制的增强 - 操作class 

语法 :class = "对象/数组"

v-bind 对于样式控制的增强 - 操作style 

语法 :style = "样式对象"

v-model 应用于其他表单元素 

常见的表单元素都可以用 v-model 绑定关联 → 快速 获取 或 设置 表单元素的值

它会根据 控件类型 自动选取 正确的方法 来更新元素

简单来说就是使用v-model来给表单元素设置默认的初始值

 

 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Document</title>
  8.   <style>
  9.     textarea {
  10.       display: block;
  11.       width: 240px;
  12.       height: 100px;
  13.       margin: 10px 0;
  14.     }
  15.   </style>
  16. </head>
  17. <body>
  18.  
  19.   <div id="app">
  20.     <h3>小黑学习网</h3>
  21.  
  22.     姓名：
  23.       <input type="text" v-model="username"> 
  24.       <br><br>
  25.  
  26.     是否单身：
  27.       <input type="checkbox" v-model="isSingle"> 
  28.       <br><br>
  29.  
  30.     <!-- 
  31.       前置理解：
  32.         1. name:  给单选框加上 name 属性 可以分组 → 同一组互相会互斥
  33.         2. value: 给单选框加上 value 属性，用于提交给后台的数据
  34.       结合 Vue 使用 → v-model
  35.     -->
  36.     性别: 
  37.       <input v-model="sex" type="radio" name="sex" value="0">男
  38.       <input v-model="sex"type="radio" name="sex" value="1">女
  39.       <br><br>
  40.  
  41.     <!-- 
  42.       前置理解：
  43.         1. option 需要设置 value 值，提交给后台
  44.         2. select 的 value 值，关联了选中的 option 的 value 值
  45.       结合 Vue 使用 → v-model
  46.     -->
  47.     所在城市:
  48.       <select v-model="cityId">
  49.         <option value="100">北京</option>
  50.         <option value="101">上海</option>
  51.         <option value="102">成都</option>
  52.         <option value="103">南京</option>
  53.       </select>
  54.       <br><br>
  55.  
  56.     自我描述：
  57.       <textarea v-model="description"></textarea> 
  58.  
  59.     <button>立即注册</button>
  60.   </div>
  61.   <script src="./vue.js"></script>
  62.   <script>
  63.     const app = new Vue({
  64.       el: '#app',
  65.       data: {
  66.         username: '',
  67.         isSingle: true,
  68.         sex: '1',
  69.         cityId: '102',
  70.         description: ''
  71.       }
  72.     })
  73.   </script>
  74. </body>
  75. </html>

 

◆ computed 计算属性

概念：基于现有的数据，计算出来的新属性。 依赖的数据变化，自动重新计算。

语法：

① 声明在 computed 配置项中，一个计算属性对应一个函数
② 使用起来和普通属性一样使用 {{ 计算属性名 }}
计算属性 → 可以将一段 求值的代码 进行封装

computed 计算属性 vs methods 方法 

 

计算属性完整写法 （重点）

成绩案例 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <link rel="stylesheet" href="./styles/index.css" />
  8.     <title>Document</title>
  9.   </head>
  10.   <body>
  11.     <div id="app" class="score-case">
  12.       <div class="table">
  13.         <table>
  14.           <thead>
  15.             <tr>
  16.               <th>编号</th>
  17.               <th>科目</th>
  18.               <th>成绩</th>
  19.               <th>操作</th>
  20.             </tr>
  21.           </thead>
  22.           <tbody v-if="list.length > 0">
  23.             <tr v-for="(item,index) in list" :key="item.id">
  24.               <td>{{index+1}}</td>
  25.               <td>{{item.subject}}</td>
  26.               <td :class="{red: item.score<60}">{{item.score}}</td>
  27.               <td><a  @click.prevent="del(item.id)" href="#">删除</a></td>
  28.             </tr>
  29.            
  30.           </tbody>
  31.           <tbody v-else>
  32.             <tr>
  33.               <td colspan="5">
  34.                 <span class="none">暂无数据</span>
  35.               </td>
  36.             </tr>
  37.           </tbody>
  38.  
  39.           <tfoot>
  40.             <tr>
  41.               <td colspan="5">
  42.                 <span>总分：{{total}}</span>
  43.                 <span style="margin-left: 50px">平均分：{{avg}}</span>
  44.               </td>
  45.             </tr>
  46.           </tfoot>
  47.         </table>
  48.       </div>
  49.       <div class="form">
  50.         <div class="form-item">
  51.           <div class="label">科目：</div>
  52.           <div class="input">
  53.             <input
  54.               type="text"
  55.               placeholder="请输入科目"
  56.               v-model.trim="subject"
  57.             />
  58.           </div>
  59.         </div>
  60.         <div class="form-item">
  61.           <div class="label">分数：</div>
  62.           <div class="input">
  63.             <input
  64.               type="text"
  65.               placeholder="请输入分数"
  66.               v-model.number="score"
  67.             />
  68.           </div>
  69.         </div>
  70.         <div class="form-item">
  71.           <div class="label"></div>
  72.           <div class="input">
  73.             <button class="submit" @click="add()">添加</button>
  74.           </div>
  75.         </div>
  76.       </div>
  77.     </div>
  78.     <script src="../vue.js"></script>
  79.  
  80.     <script>
  81.       const app = new Vue({
  82.         el: '#app',
  83.         data: {
  84.           list: [
  85.             { id: 1, subject: '语文', score: 20 },
  86.             { id: 7, subject: '数学', score: 99 },
  87.             { id: 12, subject: '英语', score: 70 },
  88.           ],
  89.           subject: '',
  90.           score: ''
  91.         },
  92.         computed: {
  93.           total(){
  94.             // 使用数组求和函数
  95.             return  this.list.reduce((sum,item)=>sum+item.score,0)
  96.           },
  97.           avg(){
  98.             if(this.list.length === 0){
  99.               return 0
  100.             }
  101.             return  (this.list.reduce((sum,item)=>sum+item.score,0)/this.list.length).toFixed(2)
  102.           }
  103.         },
  104.         methods: {
  105.           del(id){
  106.             this.list = this.list.filter(item=>id!==item.id)
  107.           },
  108.           add(){
  109.             if(!this.subject){
  110.               alert('请输入科目名称！')
  111.               return
  112.             }
  113.             console.log( typeof this.score );
  114.             if( typeof this.score !=='number' || !(this.score >= 0 && this.score <=100)){
  115.               alert('你输入的不是数字，或者分数不在0-100之间！')
  116.               return
  117.             }
  118.             this.list.unshift({ id: +new Date(), subject: this.subject, score: this.score })
  119.           }
  120.         }
  121.       })
  122.     </script>
  123.   </body>
  124. </html>

 

 

◆ watch 侦听器（重点）

作用：监视数据变化，执行一些 业务逻辑 或 异步操作。

语法：

① 简单写法 → 简单类型数据，直接监视

② 完整写法 → 添加额外配置项

简单写法

完整写法 

小结：

watch侦听器的语法有几种？

① 简单写法 → 监视简单类型的变化

 

② 完整写法 → 添加额外的配置项 (深度监视复杂类型，立刻执行)

 

◆ 综合案例：水果购物车

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <link rel="stylesheet" href="./css/inputnumber.css" />
  8.     <link rel="stylesheet" href="./css/index.css" />
  9.     <title>购物车</title>
  10.   </head>
  11.   <body>
  12.     <div class="app-container" id="app">
  13.       <!-- 顶部banner -->
  14.       <div class="banner-box"><img src="./img/fruit.jpg" alt="" /></div>
  15.       <!-- 面包屑 -->
  16.       <div class="breadcrumb">
  17.         <span>
    声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/96318
    推荐阅读
    相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。