前端技术Vue学习笔记--002

最新推荐文章于 2024-06-15 14:41:39 发布
最新推荐文章于 2024-06-15 14:41:39 发布
阅读量352 收藏 2
点赞数
分类专栏： Vue学习记录 文章标签： vue.js 前端 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46625488/article/details/131924721
版权

前端技术Vue学习笔记

文章目录

1、指令修饰符

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

  • 按键修饰符

             @keyup.enter         -->          键盘回车监听

  • v-model修饰符

           v-model.trim          -->          去除首尾空格

           v-model.number         -->          转数字

  • 事件修饰符

             @事件名.stop         -->          阻止冒泡

             @事件名.prevent        -->          阻止默认行为

练习代码

<body>
        <div id="app" >
            <!-- 键盘回击事件绑定处理 -->
            <h3>键盘回击事件绑定处理</h3>
            用户名:<input type="text" v-model="username" @keyup.enter="fn"/><br/>
            <!-- v-model修饰符   v-model.trim(去除首尾空格)   v-model.number（转数字） -->
            <h3>v-model修饰符</h3>

            年龄:<input type="text" v-model.number="age" /><br/>
            英文名：<input type="text" v-model.trim="usName" /><br/>
            <!-- 
                事件修饰符：@事件名.stop(阻止冒泡)  @事件名.prevent(阻止默认行为)
             -->
             <h3> 事件修饰符</h3>
             <div class="father" @click="f">
                <div class="son" @click.prevent="s">
                </div>
             </div>
             <!--  @click.prevent阻止默认跳转到百度首页-->
             <a href="https:www.baidu.com" @click.prevent>点击跳转到百度</a>
        </div>
        <script>
           const app = new Vue({
            el : '#app',
            data : {
             username : '',
             usName : '',
             age : ''
            },
            methods : {
             fn(e){
               //e.key === 'Enter' 等价于@keyup.enter
                // if(e.key === 'Enter'){}
                console.log("键盘回车事件触发"+this.username)
             },
             f(){
                    alert("这是父元素盒子")
             },
             s(){
                alert("这是子元素盒子")
             } 
            }
           })
        </script>
    </body>

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

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

2.1、v-bind对于样式控制的增强–class

语法 :class=“对象/数组”

  1. 对象–>建就是类名，值是布尔值。如果值为true，有这个类，否则没有这个类

    在这里插入图片描述
    适用场景：一个类来回切换

  2. 数组–>数组中的所有类，都会添加到盒子上，本质就是一个class列表

    在这里插入图片描述
    适用场景：批量添加或删除类

案例练习：京东秒杀tab导航高亮
在这里插入图片描述

<body>
        <!-- 案列：京东秒杀tab导航高亮 gezi是一个样式类-->
        <div id="app" >
            <h3>v-bind对于样式控制的增强--class</h3>
            <ul>
                <li v-for="(item,index) in list"  @click="activeIndex = index " >
                    <a :class="{gezi : index === activeIndex}" href="#">{{ item.name }}</a>
                </li> 
             
            </ul>
            <hr>
        </div>
        <script>
           const app = new Vue({
            el : '#app',
            data : {
                activeIndex : 0,
                list : [
                    {id : 1,name : '京东秒杀'},
                    {id : 2,name : '京东抢购'}, 
                    {id : 3,name : '京东商场'}
                ]
            },
            methods : {
            
            }
           })
        </script>
    </body>

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

语法 :style = “样式对象”

适用场景：某个具体属性的动态设置
注意：

  • 当遇到像background-color这样带横杠的属性名必须以驼峰命名或者以引号处理
  • 在{}中是以json的格式写的，所以键值要加引号

模版语法

在这里插入图片描述

案列：进度条实现

<html>
    <head>
        <title> 进度条--style </title>
        <script src="../../vue.js"></script>
        <style>
          
            .progress{
                height: 25px;
                width: 400px;

                border-radius: 15px;
                background-color: black;
                border: 3px solid black;

                box-sizing: border-box;
                margin-bottom: 30px;
            }
            .inner{
                height: 20px;
                border-radius: 10px;
                text-align: right;
                position: relative;
                background-color: blueviolet;
                background-size: 20px 20px;
                box-sizing: border-box;
                transition: all 1s;

            }
        </style>
    </head>
    <body>
   		  
            <!-- <div class="box" :style="{width : '400px',height : '400px','background-color': 'red' }"> -->
            <!-- <div class="box" :style="{width : '400px',height : '400px',backgroundColor: 'red' }"> -->
        <!-- 案列：京东秒杀tab导航高亮 -->
        <div id="app" >
            <h3>进度条--style</h3>
                <div class="progress">
                    <div class="inner" :style="{width: count+'%'}"></div>
                    <span :style="{ 'padding-left': count + '%' }">{{ count }}%</span>
                </div> 
                <button @click="count--" v-show="count>0">-</button>
                <button  @click="count++" v-show="count<100">+</button>
        </div>
        <script>
           const app = new Vue({
            el : '#app',
            data : {
                count : 50 //默认为50%
            },
            methods : {
            
            }
           })
        </script>
    </body>
</html>

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

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

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

例如：输入框（input:text）、文本域(textarea)、复选框(input:checkbox)、单选框(input:radio)、下拉菜单（select）等等。

案例：注册案例

<body>
        <div id="app">
           <div :class="['register']">

            <h3>用户注册信息</h3>
                <!-- 输入框 -->
                用户名:<input type="text" v-model.trim="username" name="username"/><br><br>
                
                是否单身：<input type="checkbox"   v-model="isSingle"/><br><br>
                <!-- 单选框 （前置理解)
                        1.name：给单选框加上name属性，可以分组--- >统一组互相互斥
                        2.value：给单选框加上value属性，用于提交给后台的数据
                    结合Vue使用 --》v-model  
                -->
                性别：  <input type="radio" name="sex" value="1"  v-model="sex">男
                        <input type="radio" name="sex" value="0" v-model="sex">女<br><br>
                        
                <!-- 下拉框 （前置理解)
                        1.option 需要设置  value值，提交给后台
                        2.select 的 value值，关联了选中的 option 的 value值
                    结合Vue使用 --》v-model 结合$0.value进行查看
                -->
                所在城市：    
                  <select v-model="cityId">
                    <option value="1">白银</option>
                    <option value="2">靖远</option>
                    <option value="3">会宁</option>
                    <option value="4">景泰</option>
                  </select>
                <br><br>

                <button>注册</button>
           </div>
        </div>
        
        <script>
           const app = new Vue({
            el : '#app',
            data : {
                username : '',
                sex : 1,
                isSingle : true,
                cityId  : 4
            }
           })
        </script>

    </body>

测试结果
在这里插入图片描述

4、计算属性

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

语法：

  • 声明在computed配置项中，一个计算属性对应一个函数
  • 和普通属性一样使用{{计算属性名}}

计算属性：换言之，就是将一段求值的代码进行封装。

小黑笔城

  <body>
        <div id="app">
           <h3>计算属性练习</h3> 
           <table class="bordered-table">
                <tr>
                    <td>名称</td>
                    <td>数量</td>
                </tr>
                <tr v-for="(item,index) in list">          
                    <td>{{item.name}}</td>
                    <td>{{item.num}}</td>
                </tr>
           </table>
           <h3>文件总数：{{totalNum}}</h3>
        </div>
        
        <script>
           const app = new Vue({
            el : '#app',
            data : {
                list : [
                    {id : 1,name : '铅笔',num : 10},
                    {id : 2,name : '订书机',num : 20},
                    {id : 2,name : '打印机',num : 2},
                    {id : 2,name : '钢笔',num : 36}
                ]
            },
            computed  : {
                
                totalNum(){
                    //基于现有数据，编写求值逻辑
                    
                    //计算属性函数内部，可以直接通过 this 访问到 vue 实例
                    
                    //需求：对this.list数组里面的 num 进行求和 --》reduce
                    let total=this.list.reduce((sum,item) => sum +item.num,0)  
                    return total
                }
            }
           })
        </script>

    </body>

测试结果
在这里插入图片描述

4.1、computed计算属性 vs methods方法的区别

  1. computed计算属性：
    • 作用：封装一段对于数据的处理，求得一个结果
    • 语法：写在computed 配置项中；作为属性，直接使用–>this.计算属性 {{计算属性名}}
    • 缓存特性（提升性能）：计算属性会对计算出来的结果缓存，再次使用直接读取缓存，依赖项变化，会自动重新计算 -->并再次使用缓存
  2. methods方法：
    • 作用：给实例提供一个方法，调用以处理业务逻辑
    • 语法：写在methods配置项中； 作为方法：需要调用 —>this.方法名() {{方法名（）}} @事件名=“方法名”

使用计算属性（缓存特性）

在这里插入图片描述

使用methods方法中的函数时

在这里插入图片描述

4.2、计算属性的完整写法

计算属性默认的简写，只能读取访问，不能“修改”
如果需要“修改” --> 需要写计算属性的完整写法"

在这里插入图片描述

案例：改名卡的练习

  <body>
        <div id="app">
           <h3>计算属性的完整写法</h3> 
           姓：<input type="text"  v-model.trim="xing"/>
           名：<input type="text"  v-model.trim="ming"/>
            全名：{{fullName}}<br><br>
           新名： <input type="text" v-model.trim="newName"><br><br>
           <button @click="modify">改名卡</button>

        </div>
        
        <script>
           const app = new Vue({
            el : '#app',
            data : {
                xing : '张',
                ming : '飞',
                newName : ''
            },
            methods : {
               modify(){
               //通过this.计算属性进行修改计算属性的值
                this.fullName = this.newName
               }
            },
            
            computed  : {
                //简写  -->获取，没有配置设置的逻辑
                // fullName(){
                //     return this.xing + this.ming
                //  }
                
                //完整写法 --> 获取 + 设置
               fullName : {
                // 1. 当fullName计算属性，被获取求值时，执行get（有缓存时，从缓存中获取数据）
                //    会将返回值作为，求值的结果
                 get(){
                    return this.xing + this.ming
                 },
                 // 2. 当fullName计算属性，被修改赋值时，执行set
                 //    修改的值，传递给set方法的形参
                 set(value){
                    this.xing = value.slice(0,1)
                    this.ming = value.slice(1)
                 }
               }
                
            }
           })
        </script>
    </body>

测试结果
在这里插入图片描述

4.3、成绩添加案例

题目要求
在这里插入图片描述

代码完成

<html>
    <head>
        <title>计算属性</title>
        <script src="../../vue.js"></script>
        <style>
            .bordered-table {
                border: 1px solid #000; /* 设置表格边框样式 */
            }
            .right{
                float: left;
                width: 200px;
                height: 200px;
                padding-left: 300px;
                padding-top: 30px;
            }
            .left{
                float: left;
                width: 260px;
                height: 400px;
            }
            .low60{
                color : red
            }
        </style>
    </head>
    <body>
        <div id="app">
           <div class="left">
                    <h3>成绩案例</h3> 
                <table class="bordered-table">
                        <tr>
                            <td>ID</td>
                            <td>名称</td>
                            <td>数量</td>
                            <td>操作</td>
                        </tr>
                        <tr v-for="(item,index) in list">          
                            <td>{{index}}</td>
                            <td>{{item.name}}</td>
                            <td :class="{low60 : item.score < 60}" >{{item.score}}</td>
<!-- 让低于60分的爆红 -->
                            <td><a href="https:www.baidu.com" @click.prevent="del(item.id)">删除</a></td>
                        </tr>
                </table>
                <h3>总分：{{totalScore}}</h3>
                <h3>平均分：{{averageScore}}</h3>

            </div>
          
        <div class="right">
            <h3>新科目</h3>
            科目: <input type="text" placeholder="请输入科目" v-model.trim="newProject" /><br>
            分数：<input type="text" placeholder="请输入分数" v-model.number="newScore" /><br>
            <br> <button @click="addProject">添加</button>
        </div>
    </div>

        <script>
           const app = new Vue({
            el : '#app',
            data : {
                list : [
                    {id : 1,name : '语文',score : 90},
                    {id : 2,name : '数学',score : 40},
                    {id : 3,name : '英语',score : 60},
                    {id : 4,name : '化学',score : 80}
                ],
                newProject : '',
                newScore : ''
            },
            methods :{
                del(id){
                    //通过id删除数组的指定元素
                    this.list = this.list.filter(item => item.id !== id);
                },
                addProject(){
                     //数组中添加元素    元素值为this.projectInfo
                     if(this.newProject.trim() === ''){
                        alert('添加的内容不能为空')
                    }else if(this.newScore === ''){
                        alert('添加的内容不能为空')
                    }
                    else if(typeof this.newScore !== 'number'){
                            alert("请输入正确的成绩")
                        }
                    else{
                        //向数组添加一个元素
                        this.list.unshift({
                        id  : +new  Date(),
                        name : this.newProject,
                        score : this.newScore
                    })
                    }
                   
                    this.newProject=''
                    this.newScore=''
                       
                    console.log(this.newProject+"      "+this.newScore)
                }
            },
            computed  : {
                totalScore : {
                    get(){
                        let a = this.list.reduce((sum,item) => sum +item.score,0)
                        // console.log("总分数："+ a)
                        return a
                    },
                    set(value){
                        
                    }
                },
                averageScore : {
                    get(){
                        let a = 0
                        if(this.list.length === 0){
                            console.log("11111")
                            return 0
                        }
                        else{
                         a = this.list.reduce((sum,item) => sum +item.score,0) / this.list.length
                        // console.log("平均分"+ a)
                        return a
                        }                      
                    },
                    set(value){
                        
                    }
                }
                
            }
           })
        </script>
    </body>
</html>

测试结果

在这里插入图片描述

技术使用

在这里插入图片描述

5、watch 监视器

作用：监视数据变化，执行一些业务逻辑 或 异步操作。(当数据发生改变时，触发)
语法：

  • 简单写法 --> 简单类型数据，直接监视

在这里插入图片描述

  • 完整写法 --> 添加额外配置项
    • deep: true 对复杂类型深度监视（监视的是一个数据对象，而非单个数据）
    • immediate：true 初始化立即执行一次handler方法

在这里插入图片描述

统计求和

在这里插入图片描述

Radan小哥
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue学习笔记（尚硅谷天禹老师）
qq_55593227的博客
08-15 31万+
Vue学习笔记（尚硅谷天禹老师讲解） 1. Vue核心 1.1. Vue简介 1.1.1. 官网 英文官网 中文官网 1.1.2. 介绍与描述 动态构建用户界面的渐进式JavaScript框架 作者：尤雨溪 1.1.3. Vue的特点 遵循MVVM模式 编码简洁，体积小，运行效率高，适合移动/PC端开发 它本身只关注UI，可以引入其它第三方库开发项目 1.1.4.与其他JS框架的关联 借鉴 Angular 的模板和数据绑定技术 借鉴 React 的组件化和虚拟DOM
前端学习笔记-黑马程序员Vue
01-09
前端学习笔记-黑马程序员Vue Vue.js 是一款流行的前端框架，它提供了强大的模板语法、数据绑定、MVVM 模型等特点，帮助开发者快速构建复杂的前端应用程序。下面是对 Vue.js 的一些重要知识点的总结： Vue.js ...
Vue2学习笔记
m0_57005796的博客
07-24 188
vue2的从零到一的学习笔记。
v-bind:class失效问题
weixin_30527423的博客
08-22 940
当我想通过事件改变button的样式，发现怎么也不变。可能有以下原因： button添加了元素选择器 在 :class中最好对固定的类（f-right）的判断值true加上引号 :class="{ 'f-right': 'true','btn':isDisabled==false,'check_btn_grey': isDisabled==true}" 元素中可以存在静态样...
vue-element-admin前端搭建学习笔记
Parker_cpp的博客
01-16 1365
vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui 实现。官方网站为。
VUE学习笔记--vue-cli
CelineT的博客
04-07 1503
vue-cli简介用法、cli目录结构、命令、npm run serve 执行过程、vue-cli的起步文件、使用自定义组件
Vue学习笔记2-安装Vue
摘繁华
06-12 1288
Vue.js 设计的初衷就包括可以被渐进式地采用。这意味着它可以根据需求以多种方式集成到一个项目中。
前端工程化、vue --javaweb学习笔记
m0_71386740的博客
04-22 794
是指在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化介绍： Vue-cli 是Vue官方提供的一个脚手架，用于快速生成一个 Vue 的项目模板Vue-cli提供了如下功能：依赖环境：NodeJS安装教程：首先，新建一个文件夹，在文件夹中打开cmd然后输入命令行： 图形化界面（推荐）： 然后会自动打开图形化界面基于Vue脚手架创建出来的工程，有标准的目录结构，如下：方式一：图形化界面（vscode打开vue项目，右键项目-运行文件夹中的npm脚本）方式二：命令行 n
vue学习笔记-02
m0_65519288的博客
10-25 2306
关于的动态属性和v-model内容的补充，计算属性和侦听器
前端学习笔记-vue2-组件
qq_43128157的博客
01-26 924
Vue2-组件组件模块与组件、模块化与组件化非单文件组件使用步骤1 定义组件2 注册组件3 使用组件VueComponentVue与VueComponent单文件组件 组件 模块与组件、模块化与组件化 模块 向外提供特定功能的js程序，一般为一个js文件 作用：复用js，简化js的编写，提高js运行效率 组件 用来实现局部（特定）功能效果的代码集合 作用：复用编码，简化项目编码，提高运行效率 模块化：当应用中的js都以模块来编写时，这个应用就是一个模块化的应用 组件化：当应用中的
Vue学习笔记(黑马前端)
JayChouyyds589的博客
10-02 3052
黑马前端Vue学习笔记(未学完)
Vue2学习笔记-前端开发
03-03
Vue2学习笔记-前端开发
Vue-router学习笔记
02-24
学习Vue的必备技能，必须熟练使用Vue-router，能够在实际项目中运用。VueRouter是Vue.js官方的路由管理器。它和Vue.js的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：嵌套的路由/视图表；模块化的、...
JavaWeb03-Vue学习笔记
08-22
Vue学习笔记 Vue是一个渐进式的JavaScript框架，用于构建用户界面。Vue的核心思想是将组件化的思想应用于前端开发，通过组件的方式来构建应用程序。 一、Vue简介 Vue是一个基于MVVM（Model-View-ViewModel）模式...
前端Bootstrap+Es6+vue学习笔记
06-10
前端Bootstrap+Es6+vue学习笔记 Bootstrap 框架是一种基于 HTML/CSS/JS 的开源框架，由 Twitter 公司的两名技术工程师研发。其主要特点包括： 1. 跨设备跨浏览器：Bootstrap 支持多种设备和浏览器，可以在不同的...
[Vue-常见错误]浏览器显示Uncaught runtime errors
一个喜欢什么都研究一下的小小后端程序员
06-09 373
在vue.config.js中配置关闭Uncaught runtime errors显示。
关于element-plus中el-select自定义标签及样式的问题
x_XDGS的博客
06-14 249
element-plus， el-select，自定义标签，动态更改颜色样式，更该样式
【Vue3】使用v-model实现父子组件通信（常用在组件封装规范中）
最新发布
qq_42582773的博客
06-15 127
父组件添加modelValue绑定数据且传递到子组件，然后绑定@update:modelValue事件接收子组件传过来的值子组件内部使用defineProps来接收父组件modelValue传过来的值，使用defineEmits自定义事件修改值然后触发父组件@update绑定的事件。
【Echarts系列】平滑折线面积图
kk爱闹
06-11 327
Vue版本以及脚本语言的选择各有不同，核心内容主要是option，重点关注该部分内容即可。为了节省后续开发学习成本，这个系列将记录我工作所用到的一些echarts图表。
尚硅谷vue学习笔记
08-18
很高兴回答你关于尚硅谷Vue学习笔记的问题！对于Vue的学习，尚硅谷提供了很多优质的学习资源和教程。下面是一些关键的学习笔记要点： 1. Vue基础：了解Vue的基本概念和核心特性，如Vue实例、模板语法、计算属性、...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值