学学vue-2

最新推荐文章于 2024-09-16 14:10:37 发布
最新推荐文章于 2024-09-16 14:10:37 发布
阅读量773 收藏 7
点赞数 6
分类专栏： vue学习笔记记录 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51765675/article/details/142163429
版权

1.7 指令修饰符

  • @keyup.enter：监听键盘回车事件，回车触发事件@keyup.enter代码

  • v-model修饰符：

    • v-model.trim：去首尾空格
    • v-model.number：变数字（如果是数字的话，转变为数字）

  • @事件名.stop：阻止冒泡现象，如果在大盒子中嵌套小盒子，点击小盒子之后，小盒子响应，之后大盒子也会相应，因为小盒子在大盒子所包含的区域当中，使用stop可以阻止这种冒泡行为 （可以通过在小盒子中添加e.stopPropagation()解决但是太长了）在小盒子的点击事件中直接写@click.stop即可达成效果

  • @事件名.prevent：阻止默认行为：比如写了一个超链接，把@click写成@click.prevent就不会跳转了上面三个修饰符

  • v-bind对于控件样式增强：

    • v-bind控制class。[v-bind class](#v-bind class)

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

      • 对象键就是名，值是bool，如果值为true就有这个类，反之没有这个类
        数组中所有的类都会添加到盒子中，本质是一个class列表

      • 对象：<div class="box" :class="{ 类名1: 布尔值, 类名2: 布尔值 }"></div>
数组：<div class="box" :class="[ 类名1， 类名2， 类名3]"></div>

      • 对象，适用场景：一个类名来回切换
        数组，适用场景：批量添加或者删除

    • v-bind行内样式(style)增强，操作style。[v-bind style](#v-bind style)

      • 语法：:style="样式对象"（style中的json键值对需要将值引起来，否则报错）

      • 适用场景：某个属性动态设置

      • <div class="box" :style="{ css属性名1: css属性值, css属性名2: css属性值2}"></div>

@keyup.enter代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h3>@keyup.enter → 监听回车事件</h3>
        <input @keyup.enter='fn' v-model='username' type="text">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                username: ''
            },
            methods: {
                fn (e) {
                    if (e.key === 'Enter') {
                        console.log('键盘回车键触发', this.username)
                    }
                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

上面三个修饰符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outer{
            width: 100px;
            height: 100px;
            background-color: pink;
            position: relative;
        }
        .inner{
            width: 50px;
            height: 50px;
            background-color: cornflowerblue;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div id="app">
        <h3>v-model修饰符 .trim .number</h3>
        姓名：<input v-model.trim="username" type="text"><br>
        年龄：<input v-model.number="age" type="text"><br>

        <h3>@事件名.stop → 阻止冒泡</h3>
        <div @click='outerFn' class='outer'>
            <div @click.stop='innerFn' class='inner'>子块</div>
        </div>

        <h3>@事件名.prevent → 阻止默认行为</h3>
        <a @click.prevent href="https://www.baidu.com">阻止默认行为</a>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                username: '',
                userage: ''
            },
            methods: {
                outerFn(){
                    alert("外部点击")
                },
                innerFn(e){
                    // e.stopPropagation()
                    alert("内部点击")
                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

v-bind class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jd导航栏</title>
    <style>
        /* 移除所有元素的默认外边距和内边距，以便更好地控制布局 */  
        * {  
        margin: 0;  
        padding: 0;  
        }  
        
        /* 设置无序列表的显示方式为Flex布局，并添加底部边框和内边距 */  
        ul {  
        display: flex; /* 使用Flexbox布局 */  
        border-bottom: 2px solid #e01222; /* 底部边框为2px宽的实线，颜色为#e01222 */  
        padding: 0 10px; /* 内边距设置为左右各10px，上下为0 */  
        }  
        
        /* 设置列表项的样式，包括宽度、高度、行高、移除列表符号以及文本居中对齐 */  
        li {  
        width: 100px; /* 每个列表项的宽度为100px */  
        height: 50px; /* 每个列表项的高度为50px */  
        line-height: 50px; /* 设置行高为50px，以实现垂直居中文本 */  
        list-style: none; /* 移除列表项前的默认项目符号 */  
        text-align: center; /* 文本在列表项中居中对齐 */  
        }  
        
        /* 设置列表项内链接的样式，包括显示方式、移除下划线、字体加粗和文本颜色 */  
        li a {  
        display: block; /* 将链接的显示方式设置为块级元素 */  
        text-decoration: none; /* 移除链接文本的下划线 */  
        font-weight: bold; /* 字体加粗 */  
        color: #333333; /* 文本颜色为深灰色#333333 */  
        }  
        
        /* 当链接具有active类时，改变其背景色和文本颜色 */  
        li a.active {  
        background-color: #e01222; /* 背景色变为#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: index === activeIndex }" href="#">{{ item.name }}</a>
            </li>
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script> 
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                activeIndex: 2,
                list: [
                    {id: 1, name: '京东秒杀'},
                    {id: 2, name: '每日特价'},
                    {id: 3, name: '品类秒杀'}
                ]
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

v-bind style

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .progress-bar {  
            width: 100%; /* 进度条的总宽度 */  
            height: 20px; /* 与内部元素高度一致 */  
            border-radius: 10px; /* 圆角与内部元素一致 */  
            background-color: #e0e0e0; /* 外部容器的背景色，通常为灰色或浅色 */  
            overflow: hidden; /* 确保内部元素超出部分不可见 */  
            box-sizing: border-box; /* 使得padding和border包含在总宽度内 */  
        }  
        .inner {  
            width: 50%; /* 初始宽度，实际使用时可能通过JavaScript动态设置 */  
            height: 100%; /* 填满外部容器的高度 */  
            border-radius: 10px; /* 圆角与外部容器一致 */  
            text-align: right; /* 如果需要文本对齐，但通常进度条内部不放置文本 */  
            position: relative; /* 如果需要内部元素定位 */  
            background-color: #409eff; /* 进度条的颜色 */  
            background-size:  20px 20px; /* 这行通常用于背景图片，对于纯色背景不需要 */  
            transition: all 1s; /* 过渡效果（1s应为时间） */  
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 外层盒子 灰色 -->
        <div class="progress-bar">
            <!-- 内层盒子 蓝色 -->
            <div class="inner" :style="{ width: percent + '%'}">
                <span>{{ percent }}%</span>
            </div>
        </div>
        <button @click="percent = 25">25%</button>
        <button @click="percent = 50">50%</button>
        <button @click="percent = 75">75%</button>
        <button @click="percent = 100">100%</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                percent: 30
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

1.8 v-model表单元素

常见的单元表格都可以使用v-model进行绑定关联→快速获取或者设置表单元素的值。他会根控件类型自动选取正确的元素类型

使用v-model绑定关联以后可以在data中快速取走上传的数据

常见表单元素：

表单元素自动关联类型
输入框input:textvalue
文本域textareavalue
复选框input:checkboxchecked
单选框input:radiochecked
下拉菜单selectvalue

radio的name和value（结合v-model使用这两个属性）（原生语法）：

  • name属性实现给两个选项按钮分组，实现同时只有一个属性被选中
  • value实现给表单的value属性，用于提交后台的数据，配合name使用
  • name用于给用户看的是不会向后端传递什么数据的，使用value实现向后端传递数据
性别：
    <input v-model="gender" type="radio" name="gender" value="1">♂
    <input v-model="gender" type="radio" name="gender" value="2">♀
    <br><br>

原生语法：

  • option需要设置value值提交给后台
  • select的value值关联了选中的option的value值

在网页元素查找中因为没有显式指定元素，所以当前选中的元素会使用$0作为变量名来展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <div id="app">
        <h3>简历投递</h3>
        姓名：<input v-model="username" type="text"><br><br>
        是否单身：<input v-model="isSingle" type="checkbox"><br><br>
        性别：
            <input v-model="gender" type="radio" name="gender" value="1">♂
            <input v-model="gender" type="radio" name="gender" value="2">♀
            <br><br>
        所在城市：
            <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>
        const app = new Vue({
            el: "#app",
            data: {
                username: '',
                isSingle: false,
                gender: '1',
                cityId: '102',
                desc: ''
            }
        })
    </script>
</body>
</html>

1.9 计算属性

基于现有的数据，计算出来的新属性，依赖的数据变化，就会重新计算（vue是数据驱动的）

语法：

  • 在vue实例中声明computed配置项，一个计算属性对应一个函数
  • 使用起来和普通属性一样使用{{ 计算属性名 }}
computed: {
	计算属性名 () {
		基于现有数据逻辑
		return res
	}
}

计算属性就是将一段求值代码进行封装，在调用的时候，因为属性名是一个配置项调用不些括号，写括号会出现没有这个函数定义的错误，网页会直接崩溃

计算属性computed和method方法：

  • computed计算属性：封装一段数据的处理，求得一个结果。语法：

    • 写在computed配置项中
    • 作为属性，直接使用→this.计算属性{{ 计算属性 }}

  • method方法：给实例提供一个方法，调用以处理业务逻辑。语法：

    • 写在method配置项中
    • 作为方法，需要调用→this.方法名() {{ 方法() }} @事件名=“方法名”

  • 计算属性是有缓存的，这种缓存特性会将计算出的结果进行缓存，依赖项变化，会重新计算并在再次缓存

  • 可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。

计算属性的完整写法：

computed: {
	计算属性名: {
		get() {
			逻辑
			return res;
		}
		set(修改值) {
			逻辑
			return res;
		}
	}
}

参考文献

黑马程序员：https://www.bilibili.com/video/BV1HV4y1a7n4/
菜鸟教程：https://www.runoob.com/vue2/vue-tutorial.html

vue-cesium-v2
03-28
VUE CESIUM 用于CesiumJS的Vue 2.x组件。 加载Cesium构建的程序包或其他基于Cesium构建的第三方程序包。 语言能力 链接 开始吧 VueCesium使用内置的CesiumJS库。 您可以根据项目需要使用...// import lang from 'vue-
vue-print-nb 兼容低版本浏览器
11-28
2. **传统DOM操作**：尽管Vue.js基于虚拟DOM，但为了保证在旧浏览器中的兼容性，`vue-print-nb` 可能会使用传统的DOM操作方法，如querySelector、innerHTML等，而非依赖于Vue的API。 3. **CSS前缀**：对于CSS3的新...
vue-ydui使用文档
01-11
2. **引入组件**：在Vue实例中注册Vue-YDUI，并按需引入组件，例如`import { Button } from 'vue-ydui/dist/ydui.common.js'`。 3. **使用组件**：在模板中直接使用注册过的组件，如`<yd-button>点击我</yd-button>...
vue-html2pdf:vue-html2pdf可将任何vue组件或元素转换为PDF，vue-html2pdf基本上仅是vue包装器，并且在后台使用html2pdf.js
05-07
vue-html2pdf将任何vue组件或元素转换为PDF，vue-html2pdf基本上只是一个vue包装器，在后台使用 。 目录 。 在Nuxt.js中使用 道具 大事记@beforeDownload的示例用例 投币口 分页符 指导 浏览器 入门 NPM 使用...
vue-element-admin中文版本
07-20
Vue-element-admin 是基于 Vue.js 的一套全面的后台管理系统模板，它利用了 Element UI 这个流行的 UI 组件库，提供了一系列预设的页面模板、路由、权限管理等功能，极大地加速了后台管理系统的开发过程。...
Vue使用query传参Boolean类型，刷新之后转换为String问题
q879936814的博客
09-12 426
要解决这个问题，不能直接Boolean处理，因为如果传入false，那么转换成字符串，Boolean(‘false’)会变成true；做项目时发现第一次进入页面时传参是正常的Boolean类型，刷新之后变成了String，这是浏览器进行的一次强制转换；解决方法：使用JSON.parse处理参数。
el-input设置type=‘number‘和v-model.number的区别
weixin_46394325的博客
09-11 485
el-input设置type=‘number’和.number修饰符的区别
Vue Router push方法的使用
ithongchou的博客
09-13 748
是一个用于编程式导航的方法，它可以将用户导航到应用中的不同路由。它提供了灵活的路由控制能力，允许你在应用的逻辑中进行路由操作，例如在用户交互后进行页面跳转。
Vue接入高德地图并实现基本的路线规划功能
黄团团的个人博客
09-11 549
找到public目录下的index.html文件，把刚才申请好的2个密钥分别粘贴进去，第一个securityJsCode是填入安全密钥，第二个红框是填入Key。登录高德开放平台，点击我的应用，先添加新应用，然后再添加Key。如图所示填写对应的信息，系统就会自动生成。
vue组件通信，点击传值，动态传值（父传子，子传父）
爱敲代码的卡拉米的博客
09-12 646
通过上面的例子，你应该对Vue中如何使用按钮来传递值（通过内部方法或组件间通信）有了基本的了解。记得Vue的数据绑定和组件通信机制是构建Vue应用的关键。
Ai+若依（智能售货机运营管理系统---帝可得）--货道关联商品【08篇---0004：关联商品】
qq_60281421的博客
09-11 534
Ai+若依（智能售货机运营管理系统---帝可得）--货道关联商品【08篇---0004：关联商品】
大文件切片上传-vue3.0
m0_56416159的博客
09-12 572
大文件切片上传（也称为分片上传）是一种处理大文件上传的有效方法，它通过将大文件分割成多个较小的部分（即切片或分片），然后分别上传这些切片到服务器，最后在服务器上将这些切片合并成原始文件。以下是关于大文件切片上传的详细步骤和注意事项。onUploadInit： 文件初始化调用接口，用于后端创建存放切片文件的文件夹。SparkMD5：生成文件唯一的hash，用来验证文件的完整性。onUploadFinish：文件上传完成验证完整性的接口。onUploadChunk：分片上传接口。基于vue3.0代码实现。
基于Java、SpringBoot、Vue的加油站管理系统设计
程序猿大波的博客
09-14 335
本系统是一个基于Java、SpringBoot和Vue的加油站管理系统。它旨在提高加油站的运营效率，优化客户服务体验，并通过数据分析支持更精准的业务决策。该系统包括用户管理、汽油管理、站点管理等功能模块。通过这些功能，管理员可以方便地管理关键业务信息，同时提供实时的设备监控和数据分析工具，帮助管理者做出明智的决策。此外，系统还提供了安全与权限控制功能，确保只有授权用户才能访问敏感信息，保护加油站的数据安全。整个系统设计简洁易用，能够满足加油站日常运营的需求，提高工作效率和客户满意度。
vue axios 如何读取项目下的json文件
战族狼魂的博客
09-10 589
在 Vue 项目中，使用axios读取本地的 JSON 文件可以通过将 JSON 文件放置在public目录中，然后通过axios发起请求读取。
vue3 透传 Attributes
咸鱼滚滚
09-15 704
“透传 attribute”指的是传递给一个组件，却没有被该组件声明为 props 或 emits 的 attribute 或者 v-on 事件监听器。 当一个组件以单个元素为根作渲染时，透传的 attribute 会自动被添加到根元素上。 最常见的例子就是 class、style 和 id。
vue3前端tab切换
susu1083018911的博客
09-12 480
vue3前端tab切换
VUE
qq_64633597的博客
09-16 327
变更方法：push() pop() shift() unshift() splice() sort() reverse()与方法的区别：计算属性仅在响应式更新时才会重新计算，方法调用总是在重渲染发生时再次执行。一般将vue组件单独构建在一个单独的vue文件中，这就是SFC 单文件组件。.lazy number：只接受数字格式 trim：取消空格。替换数组：filter() concat() slice()定义在父中，只能由父进行修改，若无值，可在子类中指定默认值。
vue3项目打包后多级嵌套路由子路由刷新后空白问题
小怪獸丶的糖的专栏
09-11 529
Vue3项目打包发布后，进入个人中心界面,刷新后页面出现空白。前提是已经配置了重定向到index.html。在访问/personal/profile这种路由的时候刷新后页面会出现空白。在App.vue中有一个routerview ,personal界面中有一个routerview .界面如图所示。vite.config.js中将基础路径设置为绝对路径。之前是./改为/就可以了。router.js关键部分,删除了其他菜单路由。
vue3 自定义el-tree树形结构样式
最新发布
小白小白从不日别的博客
09-16 411
这里也可以用模拟的数据，下面用的是后端请求的真实数据。这里样式设置主要用到了 windcss。
vue-countup-v2
12-01
vue-countup-v2是一个基于Vue.js的CountUp.js组件包装，用于在网页中实现数字滚动效果。它可以帮助开发者快速地实现数字滚动效果，而无需手动编写JavaScript代码。使用vue-countup-v2，开发者只需要在Vue.js模板中添加一个组件标签，即可实现数字滚动效果。以下是一个简单的vue-countup-v2的使用示例： 1.安装vue-countup-v2 ```shell $ npm install --save countup.js vue-countup-v2 ``` 2.在Vue.js模板中添加组件标签 ```html <template> <div> <vue-countup-v2 :endVal="100"></vue-countup-v2> </div> </template> ``` 在上面的示例中，我们在Vue.js模板中添加了一个vue-countup-v2组件标签，并将endVal属性设置为100。这意味着数字滚动效果将从0开始，一直滚动到100。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值