前端Vue入门-day02

这篇具有很好参考价值的文章主要介绍了前端Vue入门-day02。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

(创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹)

前端Vue入门-day02,# 前端vue入门,vue.js,前端,javascript,前端框架,html5

目录

指令补充

指令修饰符

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

操作class

案例:京东秒杀 tab 导航高亮

操作style 

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

computed 计算属性

基础语法

computed 计算属性 vs methods 方法

计算属性完整写法

综合案例 - 成绩案例

watch 侦听器

基础语法

完整写法 


指令补充

指令修饰符

通过 "." 指明一些指令 后缀 ,不同 后缀 封装了不同的处理操作 简化代码
① 按键修饰符
@keyup.enter
键盘回车监听
v-model 修饰符
v-model.trim 去除首尾空格
v-model.number 转数字
③ 事件修饰符
@ 事件名 .stop → 阻止冒泡
@ 事件名 .prevent → 阻止默认行为

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

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

操作class

语法 :class = "对象/数组"
对象 → 键就是类名,值是布尔值。如果值为 true ,有这个类,否则没有这个类 前端Vue入门-day02,# 前端vue入门,vue.js,前端,javascript,前端框架,html5
        适用场景:一个类名,来回切换

数组 → 数组中所有的类,都会添加到盒子上,本质就是一个 class 列表  前端Vue入门-day02,# 前端vue入门,vue.js,前端,javascript,前端框架,html5

 前端Vue入门-day02,# 前端vue入门,vue.js,前端,javascript,前端框架,html5

         适用场景:批量添加或删除类  

案例:京东秒杀 tab 导航高亮
核心思路:
1. 基于数据动态渲染 tab → v-for
2. 准备下标记录高亮的是哪一个 tab activeIndex
3. 基于下标,动态控制 class 类名
v-bind:class
所谓切换高亮,其实就是改下标
<!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>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    ul {
      display: flex;
      border-bottom: 2px solid #e01222;
      padding: 0 10px;
    }
    li {
      width: 100px;
      height: 50px;
      line-height: 50px;
      list-style: none;
      text-align: center;
    }
    li a {
      display: block;
      text-decoration: none;
      font-weight: bold;
      color: #333333;
    }
    li a.active {
      background-color: #e01222;
      color: #fff;
    }

  </style>
</head>
<body>

  <div id="app">
    <ul>
      <li v-for="(item,index) in list" :key="item.id" @click="activeIndex = index">
        <a :class="{active:activeIndex===index}" href="#">{{item.name}}</a>
      </li>
    </ul>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        activeIndex:0,//记录高亮
        list: [
          { id: 1, name: '京东秒杀' },
          { id: 2, name: '每日特价' },
          { id: 3, name: '品类秒杀' }
        ]

      }
    })
  </script>
</body>
</html>

网页显示为: 前端Vue入门-day02,# 前端vue入门,vue.js,前端,javascript,前端框架,html5

操作style 

语法 :style = "样式对象"

前端Vue入门-day02,# 前端vue入门,vue.js,前端,javascript,前端框架,html5

适用场景:某个具体属性的动态设置  

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

常见的表单元素都可以用 v-model 绑定关联 → 快速 获取 设置 表单元素的值
它会根据 控件类型 自动选取 正确的方法 来更新元素
输入框 input:text                                  → value
文本域 textarea                                   → checked
复选框 input:checkbox                        → value
单选框 input:radio                               → value
下拉菜单 select                                   → checked
...
<!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>Document</title>
  <style>
    textarea {
      display: block;
      width: 240px;
      height: 100px;
      margin: 10px 0;
    }
  </style>
</head>
<body>

  <div id="app">
    <h3>小周学习网</h3>

    姓名:
      <input type="text" v-model="username"> 
      <br><br>

    是否单身:
      <input type="checkbox" v-model="isSingle"> 
      <br><br>

    <!-- 
      前置理解:
        1. name:  给单选框加上 name 属性 可以分组 → 同一组互相会互斥
        2. value: 给单选框加上 value 属性,用于提交给后台的数据
      结合 Vue 使用 → v-model
    -->
    性别: 
      <input v-model="gender" type="radio" name="gender" value="1">男
      <input v-model="gender" type="radio" name="gender" value="2">女
      <br><br>

    <!-- 
      前置理解:
        1. option 需要设置 value 值,提交给后台
        2. select 的 value 值,关联了选中的 option 的 value 值
      结合 Vue 使用 → v-model
    -->
    所在城市:
      <select v-model="cityId">
        <option value="101">北京</option>
        <option value="102">上海</option>
        <option value="103">成都</option>
        <option value="104">南京</option>
      </select>
      <br><br>

    自我描述:
      <textarea v-model="desc"></textarea> 

    <button>立即注册</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        username: '',
        isSingle: false,
        gender: "2",
        cityId: '102',
        desc: ""
      }
    })
  </script>
</body>
</html>

computed 计算属性

基础语法

概念: 基于 现有的数据 ,计算出来的 新属性 依赖 的数据变化, 自动 重新计算
语法:
① 声明在 computed 配置项 中,一个计算属性对应一个函数
② 使用起来和普通属性一样使用 {{ 计算属性名 }}
计算属性 → 可以将一段 求值的代码 进行封装
前端Vue入门-day02,# 前端vue入门,vue.js,前端,javascript,前端框架,html5

computed 计算属性 vs methods 方法

computed 计算属性:
作用: 封装了一段对于 数据 的处理,求得一个 结果
语法:
① 写在 computed 配置项中
② 作为属性,直接使用 → this.计算属性 {{ 计算属性 }}
缓存特性 (提升性能)
计算属性会对 计算出来的 结果缓存 ,再次使用直接读取缓存,
依赖项变化了,会 自动 重新计算 → 并 再次缓存
methods 方法:
作用: 给实例提供一个 方法 ,调用以处理 业务逻辑
语法:
① 写在 methods 配置项中
② 作为方法,需要调用 → this.方法名( ) {{ 方法名 () }} @ 事件名 =" 方法名 "

计算属性完整写法

计算属性默认的简写,只能读取访问, 不能 "修改"
如果要 "修改" → 需要写计算属性的 完整写法

前端Vue入门-day02,# 前端vue入门,vue.js,前端,javascript,前端框架,html5     前端Vue入门-day02,# 前端vue入门,vue.js,前端,javascript,前端框架,html5

综合案例 - 成绩案例

需求说明:
1. 渲染功能
2. 删除功能
3. 添加功能
4. 统计总分,求平均分
<!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" />
    <link rel="stylesheet" href="./styles/index.css" />
    <title>Document</title>
  </head>
  <body>
    <div id="app" class="score-case">
      <div class="table">
        <table>
          <thead>
            <tr>
              <th>编号</th>
              <th>科目</th>
              <th>成绩</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody v-if="list.length>0">
            <tr v-for="(item,index) in list" :key="item.id">
              <td>{{index+1}}</td>
              <td>{{item.subject}} </td>
              <!-- 需求:不及格的标红 -->
              <td :class="{red:item.score < 60}" >{{item.score}}</td>
              <td><a @click.prevent="del(item.id)" href="#">删除</a></td>
            </tr>
          </tbody>
          <tbody v-else>
            <tr>
              <td colspan="5">
                <span class="none">暂无数据</span>
              </td>
            </tr>
          </tbody>

          <tfoot>
            <tr>
              <td colspan="5">
                <span>总分:{{totalScore}}</span>
                <span style="margin-left: 50px">平均分:{{averageScore}}</span>
              </td>
            </tr>
          </tfoot>
        </table>
      </div>
      <div class="form">
        <div class="form-item">
          <div class="label">科目:</div>
          <div class="input">
            <input
              type="text"
              placeholder="请输入科目"
              v-model.trim="subject"
            />
          </div>
        </div>
        <div class="form-item">
          <div class="label">分数:</div>
          <div class="input">
            <input
              type="text"
              placeholder="请输入分数"
              v-model.number="score"
            />
          </div>
        </div>
        <div class="form-item">
          <div class="label"></div>
          <div class="input">
            <button @click="add()" class="submit" >添加</button>
          </div>
        </div>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>
      const app = new Vue({
        el: '#app',
        data: {
          list: [
            { id: 1, subject: '语文', score: 60 },
            { id: 7, subject: '数学', score: 99 },
            { id: 12, subject: '英语', score: 70 },
          ],
          subject: '',
          score: ''
        },
        computed:
        {
          totalScore()
          {
            return this.list.reduce((sum,item)=>sum+item.score,0)
          },
          averageScore()
          {
            if(this.list.length===0)
            {
              return 0
            }
            return (this.totalScore/this.list.length).toFixed(2)
          }
        },
        methods:
        {
          del(id)
          {
            this.list=this.list.filter(item=>item.id !=id)
          },
          add()
          {
            if(!this.subject)
            {
              alert('请输入科目')
              return
            }
            if(typeof this.score!=='number')
            {
              alert('请输入正确的成绩')
              return
            }
            this.list.unshift
            ({
              id:+new Date(),
              subject:this.subject,
              score:this.score
            })
            this.subject=''
            this.score=''
          }
        }
      })
    </script>
  </body>
</html>

watch 侦听器

基础语法

作用: 监视数据变化 ,执行一些 业务逻辑 或 异步操作。
语法:
① 简单写法 → 简单类型数据,直接监视
② 完整写法 → 添加额外配置项 前端Vue入门-day02,# 前端vue入门,vue.js,前端,javascript,前端框架,html5

前端Vue入门-day02,# 前端vue入门,vue.js,前端,javascript,前端框架,html5

完整写法 

② 完整写法 → 添加额外 配置项
(1) deep: true 对复杂类型深度监视
(2) immediate: true 初始化立刻执行一次handler方法

前端Vue入门-day02,# 前端vue入门,vue.js,前端,javascript,前端框架,html5文章来源地址https://www.toymoban.com/news/detail-546815.html

到了这里,关于前端Vue入门-day02的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • JavaScript 框架比较:Angular、React、Vue.js

    在 Web 开发领域,JavaScript 提供大量技术栈可供选择。其中最典型的三套组合,分别是 MERN、MEAN 和 MEVN。这些首字母相同的选项各自代表不同的技术加工具组合。为了在这些技术栈中做出明智选择,让我们先从核心组件聊起,再对各自前端框架(React、Angular 和 Vue)进行简化比

    2024年01月20日
    浏览(59)
  • 前端Vue入门-day01-初识vue与vue指令

    -(创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹) 目录 Vue 快速上手 Vue 概念 创建实例   插值表达式 响应式特性 开发者工具  Vue 指令  v-show  v-if  v-else  v-else-if  v-on v-bind  v-for key  v-model  概念:Vue 是一个用于 构建用户

    2024年02月09日
    浏览(47)
  • 前端Vue入门-day07-Vuex入门

    (创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹) 目录 自定义创建项目 vuex概述 构建 vuex [多组件数据共享] 环境  创建一个空仓库 state 状态 1. 提供数据: 2. 使用数据: mutations  辅助函数 - mapMutations actions 辅助函数 - mapAc

    2024年02月14日
    浏览(41)
  • 前端Vue入门-day04-用vue实现组件通信

    (创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹) 目录 组件的三大组成部分 注意点说明 组件的样式冲突 scoped data 是一个函数 组件通信 什么是组件通信 不同的组件关系 和 组件通信方案分类   父子通信流程图:  父 → 子

    2024年02月15日
    浏览(54)
  • 【js&vue】联合gtp仿写一个简单的vue框架,以此深度学习JavaScript

    lifecycle.js 注解: this.$options.beforeMount.call(this);与 this.$options.beforeMount();有什么区别: call(this)  的作用是将当前对象( this )作为参数传递给  beforeMount  方法,使得在  beforeMount  方法内部可以通过  this  访问到当前对象的上下文 直接调用了  beforeMount  方法,没有指定上下

    2024年02月09日
    浏览(56)
  • 前端开发 5: Vue.js 框架

    在前端开发中,Vue.js 是一个流行且灵活的 JavaScript 框架,用于构建用户界面。它采用了组件化的开发方式,使得前端开发更加模块化和可维护。在本篇博客中,我将为你介绍 Vue.js 的基础知识和常用技巧,帮助你更好地掌握前端开发中的框架部分。 Vue.js 是一个轻量级的 Jav

    2024年01月19日
    浏览(45)
  • vue.js前端框架应用案例

    Vue.js 是一种流行的前端框架,它可以帮助开发者构建单页应用(SPA)和复杂的用户界面。以下是几个 Vue.js 的案例,涵盖了不同领域的应用: Vue.js 官方文档 :Vue.js 的官方文档本身就是一个使用 Vue.js 构建的项目。它展示了 Vue.js 的各种功能和最佳实践,包括组件、指令、混

    2024年02月21日
    浏览(50)
  • 前端Vue入门-day06-路由进阶

    (创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹) 目录 路由的封装抽离 声明式导航 导航链接  两个类名  自定义高亮类名  跳转传参 1. 查询参数传参 2. 动态路由传参 两种传参方式的区别  Vue路由  重定向 404 编程式导航

    2024年02月14日
    浏览(46)
  • 从javascript到vue再到react:前端开发框架的演变

    目录 JavaScript: 动态语言的基础 JavaScript:Web开发的起点 Vue.js: 渐进式框架的兴起 Vue.js:简洁、高效的前端框架 React.js: 声明式UI的革新 React.js:强大、灵活的前端框架 演变之路与未来展望 演变过程 当提到前端开发中的框架时,JavaScript、Vue.js和React.js是三个最常见的名词。它

    2024年02月07日
    浏览(53)
  • 前端Vue入门-day05-自定义指令、插槽、路由入门

    (创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹) 目录 自定义指令  基本语法 (全局局部注册) 全局注册  局部注册 指令的值  v-loading 指令封装 插槽 默认插槽 后备内容(默认值)  具名插槽  作用域插槽  路由入门 单页应

    2024年02月13日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包