vue基础入门踩坑备忘


document.getElementById('mask').innerHTML

document.getElementsByClassName('mask')[index].innerHTML

console.log(document.getElementsByClassName('mask')[index].innerHTML);

vue加链接(已设置过路由)：$router.push({ path: '/goods/default_agent_price'})  
----------------------------------------------------------------------------------------------------
<el-col :span="9" style="text-align: right" v-if="this.searchForm.status<5">
                        <el-button v-waves size="small" type="primary" @click="$router.push({ path: '/goods/default_agent_price'})">批量设置默认分销价</el-button>
</el-col>


打开新窗口链接(未设置过路由)：
----------------------------------------------------------------------------------------------------

        goodsEdit(row) {
            let routeUrl = this.$router.resolve({
                path: "/goods/edit",
                query: {id:row.id,type:'edit'}
            });
            window.open(routeUrl .href, '_blank')
        }

vue设置跳转链接： <button @click="$router.push({ path:'/hd/materialDetail',query:{id:item.id,type:'detail'}})"> jump </button>        

        
        

this.$route 和 this.$router 的区别：
----------------------------------------------------------------------------------------------------------------------------

this.$route 是路由【参数对象】，所有路由中的参数， params, query 都属于它。

this.$router 是一个路由【导航对象】，用它 可以方便的 使用 JS 代码,实现路由的 前进、后退、 跳转到新的 URL 地址。

                
如果想要this.$route.params 获取到this.$route.push()传的参数，一定要使用name属性来指定路由 不要用path属性；

this.$router.push({ name: 'searchDeatilList', params: { id:123 } })//传参

组件中获取参数：const { id } = this.$route.params


如果使用path属性传参，那么需要 ：this.$route.query来获取(参数以问号拼接到路由后面)

this.$router.push({ path: '/searchDeatilList', query: {id:123} }) //传参
组件中获取：const { id } = this.$route.query

if(this.$route.params.status) {
    this.searchForm.status = this.$route.params.status;
}        
console.log(this.$route.query.type);
if(this.$route.params.type=='myOpus') this.defaultStatus ="1" ;
        
        
ref和$refs的使用示例: 
----------------------------------------------------------------------------------------------------    
<template>
  <div class="page-container">
     <el-carousel
      height="900px"
      direction="vertical"
      ref="carousel"    //这个用ref关联组件  
      @setActiveItem="setActiveItem"
      :autoplay="false"
      @change="changeItem"
    >
      <el-carousel-item v-for="item in 5" :key="item">
        <h3 class="medium">{{ item }}</h3>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

method方法这里用$refs调用组件:

    setActiveItem(index) {
      this.$refs.carousel.setActiveItem(index);
    },
        
        
        
        
css 栅格布局el-row（xs，sm，md，lg，xl）
----------------------------------------------------------------------------------------------------

:xs="12" , 24/12=2 , 所以当屏幕尺寸<768px时(手机)，每行展示2个div(class="com_item");

:sm="8" , 24/8=3 , 所以当屏幕尺寸>=768px时(平板)，每行展示3个div(class="com_item");

:md="6" , 24/6=4 , 所以当屏幕尺寸>=992px时(桌面显示器)，每行展示4个div(class="com_item");

:lg="4" , 24/4=6 , 所以当屏幕尺寸>=1200px时(大桌面显示器)，每行展示6个div(class="com_item");

:xl="4" , 24/4=6 , 所以当屏幕尺寸>=1920px时(2k屏)，每行展示6个div(class="com_item");

————————————————
.com_item {
    width: 100%;
    height: 220px;
    background: #bfa;
}


<el-row :gutter="10">    gutter代表div间隙 10px 


v-bind绑定样式表：
----------------------------------------------------------------------------------------------------

HTML写法:
<div class="myItem" style="text-align:center; background-image:url(''); background-size:auto 100% ;background-position:center; background-repeat:no-repeat;" >

v-bind绑定style写法(里面是个json)： 
<div class="myItem" :index="index"  :style="{'text-align':'center','background-image':'url('+item.photo+')','background-size':'auto 100%','background-position':'center','background-repeat':'no-repeat'}"  >

vue+elementui组件 el-upload图片上传 获取不到token 
--------------------------------------------------------------------------
于 2020-06-16 17:51:55 发布 
方法：直接给这个组件添加token

1.先引入token

import Cookies from 'js-cookie'
 

2.获取

  :headers="getHeaders" 

  //getHeaders必须是对象，不能是函数  
 getHeaders:{ Authorization:Cookies.get("loginToken") } 
 
 
 
 el-upload和axios设置header
--------------------------------------------------------------------------
el-upload加header

复制代码
<template>
    <el-upload action="test" :headers="myHeaders"></el-upload>
</template>

<script>
var token =  localStorage.getItem('token') // 要保证取到

export default {
    data () {
        return {
            myHeaders: {Authorization:token}
        }
    }
}
</script>
 
axios加header

复制代码
    this.axios({
        method: "POST",
        url: `${API_HOST}/api/bind/index`,
        data: obj,
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        }
    }).then(function(res) {
        console.log(res);
    });


vue中$refs和$el的用法是什么
--------------------------------------------------------------------------

ref 被用来给元素或子组件注册引用信息

ref 有三种用法：

　　1、ref 加在普通的元素上，用this.$refs.（ref值） 获取到的是dom元素

　　2、ref 加在子组件上，用this.$refs.（ref值） 获取到的是组件实例，可以使用组件的所有方法。在使用方法的时候直接this.$refs.（ref值）.方法（） 就可以使用了。

　　3、如何利用 v-for 和 ref 获取一组数组或者dom 节点

　　如果通过v-for 遍历想加不同的ref时记得加 :号，即 :ref =某变量 ;

　　这点和其他属性一样，如果是固定值就不需要加 :号，如果是变量记得加 :号。（加冒号的，说明后面的是一个变量或者表达式；没加冒号的后面就是对应的字符串常量（String）

应注意的坑有：

1、ref 需要在dom渲染完成后才会有，在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用，或者在 this.$nextTick(()=>{}) 中调用。

2、如果ref 是循环出来的，有多个重名，那么ref的值会是一个数组 ，此时要拿到单个的ref 只需要循环就可以了。

vm.$el

获取Vue实例关联的DOM元素；

比方说我这里想获取自定义组件tabControl，并获取它的OffsetTop。就需要先获取该组件。

在组件内设置   属性 ref='一个名称(tabControl2)', 

然后 this.$refs.tabControl2     就拿到了该组件 

切记：ref属性，而获取组件的时候要用$refs

获取  OffsetTop，组件不是DOM元素，是没有OffsetTop的，无法通过 点 .OffsetTop来获取的。就需要通过$el来获取组件中的DOM元素

vue中v-show 和 v-if 控制元素显示隐藏的技巧
--------------------------------------------------------------------------  
一、v-show 的基本使用方法

在 Vue 中，使用 v-show 指令可以控制元素的显示隐藏。v-show 的用法非常简单，只需要在需要控制显示隐藏的元素上添加 v-show 指令，并将其绑定为一个布尔值即可。例如，在模板中使用以下代码：

其中，show 为布尔类型的变量，通过改变变量的值就可以实现元素的显示隐藏。

v-show 的特点是不会修改 DOM 元素的存在与否，只是通过 CSS 样式的控制来实现元素的显示与隐藏。因此，在页面加载时，即使元素被隐藏，它仍然会被加载到 DOM 中，不会影响页面加载速度。


二、v-if 的基本使用方法

和 v-show 不同，v-if 指令会根据布尔类型的变量值判断是否将元素插入到 DOM 中。当变量值为 true 时，才会将元素插入到 DOM 中；当变量值为 false 时，则不会在 DOM 中插入该元素。

因此，v-if 比 v-show 更加节省 DOM 的资源，但也会影响页面加载速度。


Vue还支持使用数组对象来控制class属性：
--------------------------------------------------------------------------  
<style>
        .red {
            color: red;
        } 
        .fs {
            font-size: 20px;
        }
    </style>
    <div class="app">
        <h2 :class="[redClass,fsClass]">hello</h2>
    </div>
    <script>
        const app = new Vue({
            el: '.app',
            data() {
                return {
                    redClass: "red",
                    fsClass: "fs"
                }
            }
        })
    </script> 
    
    
Vue绑定内联样式
--------------------------------------------------------------------------  
内联样式是指直接通过HTML元素的style属性来设置样式，style属性可以直接通过JavaScript对象来设置样式，我们可以直接在其内部设置vue属性。

<div class="app">
        <div class="box" :style="{width:width,height:height,backgroundColor:backgroundColor}"></div>
    </div>
    <script>
        const app = new Vue({
            el: '.app',
            data() {
                return {
                    width: "200px",
                    height: '200px',
                    backgroundColor: 'pink'
                }
            }
        })
    </script>

vue中dispatch与commit使用
--------------------------------------------------------------------------  

dispatch：含有异步操作，例如向后台提交数据，写法： this.$store.dispatch('action方法名',值)

commit：同步操作，写法：this.$store.commit('mutations方法名',值)

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/181840.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

unity UI特效遮罩

unity UI特效遮罩

using System.Collections; using System.Collections.Generic; using UnityEngine;/**UI特效遮罩 1.需要将ScrollRect 的遮罩Mask 换为 2D Mask2.将特效的Render里面的 Masking 设置为*/ public class UIParticleMaskControll : MonoBehaviour {// Start is called before …
阅读更多...
简易键值对文本解析

简易键值对文本解析

除了json,xml,protobuf等成体系的配置文件外&#xff0c;简单的文本格式“key value”的配置文件也在很多开源项目中存在&#xff0c;这种配置文件的好处是简单、易于理解和编辑。 #include <stdio.h> #include <string.h>#define MAX_LINE_LENGTH 1024void Parse…
阅读更多...
低代码平台：房企建造领域数字化转型的必备利器

低代码平台：房企建造领域数字化转型的必备利器

在数字化浪潮的推动下&#xff0c;越来越多的行业开始向数字化转型迈进&#xff0c;房地产建筑管理也不例外。低代码平台作为一种新兴的技术趋势&#xff0c;正逐渐成为推进房地产建筑管理数字化转型的重要工具。 房地产建筑管理作为一个庞大而复杂的行业&#xff0c;数字化转…
阅读更多...
SQL——增删改查条件查询

SQL——增删改查条件查询

1.查询不同行——DISTINCT SELECT DISTINCT column_name FROM table_name DISTINCT 关键字需位于列名之前。 2.在指定列中插入数据——INSERT INSERT INTO courses (name, student_count, created_at, teacher_id) VALUES (Flash Sale, 100, 2018-01-01, 5); 3.更新数据——U…
阅读更多...
『Confetti 喜庆散花插件の使用』

『Confetti 喜庆散花插件の使用』

以下用 VUE3 语法 举例使用&#xff1a; npm install js-confetti<script setup lang"ts"> import JSConfetti from js-confetticonst confetti new JSConfetti()function showConfetti() {confetti.addConfetti() } </script><template><h1 …
阅读更多...
视频剪辑技巧：批量剪辑新思路，AI智剪来助阵

视频剪辑技巧：批量剪辑新思路，AI智剪来助阵

在视频制作过程中&#xff0c;剪辑是一项至关重要的任务。然而&#xff0c;对于许多创作者来说&#xff0c;批量剪辑视频是一项耗时且繁琐的工作。传统的批量剪辑方法通常要创作者逐个打开视频文件&#xff0c;进行剪辑、调整色彩等操作。这种方法不仅效率低下&#xff0c;而且…
阅读更多...
探索低代码之路——JNPF

探索低代码之路——JNPF

目录 一、低代码行业现状 二、产品分析 1.可视化应用开发 2.流程管理 3.整个平台源码合作 三、架构和技术 技术栈 四、规划和展望 低代码平台&#xff08;Low-code Development Platform&#xff09;是一种让开发者通过拖拽和配置&#xff0c;而非传统的手动编写大量代…
阅读更多...
Linux 启动过程

Linux 启动过程

linux启动步骤&#xff1a; <1>加电 <2>加载bios设置 <3>加载grup <4>加载内核系统到内存中 <5>加载配置文件 <6>加载内核模块 <7>完成相应的初始化工作和启动相应的服务 <8>启动系统进程 <9>出现登录界面 &l…
阅读更多...
Python 装饰器与偏函数

Python 装饰器与偏函数

目录 装饰器 概念 简单的装饰器 复杂点的装饰器 通用装饰器 定义通用装饰器 使用装饰器 偏函数 引入类库 应用 总结 装饰器 概念 装饰器就是个闭包&#xff1b;把一个函数当做参数&#xff0c;返回一个修改过功能的函数&#xff1b; 本质上是一个返回函数的函数。…
阅读更多...
Redis面试常见问题

Redis面试常见问题

Redis中的Lua脚本到底能不能保证原子性&#xff1f; Redis中Lua脚本的执行&#xff0c;可以保证并发编程中不可再拆分的这个原子性&#xff0c;但是没有保证数据库ACID中要么都执行要么都回滚的这个原子性。Lua脚本执行过程中命令产生错误&#xff0c;是不会回滚的&#xff0c…
阅读更多...
基于Java SSM框架+Vue实现垃圾分类网站系统项目【项目源码+论文说明】

基于Java SSM框架+Vue实现垃圾分类网站系统项目【项目源码+论文说明】

基于java的SSM框架Vue实现垃圾分类网站系统演示 摘要 本论文主要论述了如何使用JAVA语言开发一个垃圾分类网站 &#xff0c;本系统将严格按照软件开发流程进行各个阶段的工作&#xff0c;采用B/S架构&#xff0c;面向对象编程思想进行项目开发。在引言中&#xff0c;作者将论述…
阅读更多...
java8 lambda常用整理（2）

java8 lambda常用整理（2）

list集合数据分组 使用Collectors.groupingBy()方法来实现List集合数据的分组。groupingBy()方法接受一个分类函数&#xff0c;该函数将根据指定的条件将元素分组。 1.1. 示例1 import java.util.Arrays; import java.util.List; import java.util.Map; import java.util.st…
阅读更多...
2023年国内主流的低代码平台

2023年国内主流的低代码平台

低代码开发平台&#xff08;Low-Code Development Platform, LCDS&#xff09;为企业和开发者提供了高效的应用开发方式。这些平台使得开发者可以通过简化的设计界面快速创建和部署应用&#xff0c;大大提高了开发效率并降低了开发成本。 伴随数字化转型推进&#xff0c;选购低…
阅读更多...
C++中用于动态内存的new和delete操作符

C++中用于动态内存的new和delete操作符

文章目录 1、动态分配内存的应用2、动态分配内存与分配给普通变量的内存有什么不同?3、C 中如何分配/释放内存4、new 操作符4.1 使用new的语法4.2 初始化内存4.3 分配内存块4.4 普通数组声明 Vs 使用new4.5 如果运行时没有足够内存可用怎么办&#xff1f; 5、delete 操作符 C/…
阅读更多...
使用Perplexity AI免费白嫖GPT4的使用次数((智能搜索工具)

使用Perplexity AI免费白嫖GPT4的使用次数((智能搜索工具)

一、Perplexity AI是什么 Perplexity AI是一款高质量的智能搜索工具&#xff0c;它可以为用户提供简洁清晰的搜索体验。Perplexity AI内置了基于GPT-4的Copilot搜索功能&#xff0c;用户可以在每四个小时使用五次(白嫖GPT-4)。此外&#xff0c;Perplexity AI有免费和付费&#…
阅读更多...
C++——取地址和自增运算

C++——取地址和自增运算

今天做了道题一下给我整蒙了&#xff0c;把实验探索发篇文章&#xff0c;题目如下&#xff1a; int a[]{10,11,12},*p&a[0];执行完*p;*p1;后a[0],a[1],a[2]的值各为多少 答案是 10, 12, 12怎么理解*p,*p1呢&#xff0c;我觉得可以用汉语把代码读一下&#xff0c;p&#xf…
阅读更多...
【寒武纪（6）】MLU推理加速引擎MagicMind，最佳实践（三）使用框架模型ONNX

【寒武纪（6）】MLU推理加速引擎MagicMind，最佳实践（三）使用框架模型ONNX

支持情况 Pytorch 只支持 1.6.0 导出。 如何生成ONNX&#xff1f; 解析失败 包括&#xff1a;Parse 过程转换失败node index&#xff0c;不支持的模型输入tensor name&#xff0c;不支持的控制流子图输入tensor name。 提取支持的子图
阅读更多...
sizeof与strlen有哪些区别

sizeof与strlen有哪些区别

sizeof是操作符&#xff0c;strlen是函数。sizeof操作符的结果类型是size_t&#xff0c;它在头文件中typedef为unsignedint类型&#xff0c;该类型保证能容纳实现所建立的最大对象的字节大小。sizeof可以用类型做参数&#xff0c;strlen只能用char*做参数&#xff0c;且必须是以…
阅读更多...
ArkTs变量类型、数据类型

ArkTs变量类型、数据类型

可以参考官网学习路径学习HarmonyOS第一课|应用开发视频教程学习|HarmonyOS应用开发官网 一、变量 1、ArkTS语言 ArkTS是华为自研的开发语言。它在TypeScript&#xff08;简称TS&#xff09;的基础上&#xff0c;匹配ArkUI框架&#xff0c;扩展了声明式UI、状态管理等相应的…
阅读更多...
acwing算法基础之动态规划--DP习题课1

acwing算法基础之动态规划--DP习题课1

目录 1 基础知识2 模板3 工程化 1 基础知识 暂无。。。 2 模板 暂无。。。 3 工程化 题目1&#xff1a;最长上升子序列&#xff0c;要求时间复杂度为 O ( n l o g n ) O(nlogn) O(nlogn)。 解题思路&#xff1a;保存每个长度下的最小的结尾元素值&#xff0c;遍历数组元素…
阅读更多...
最新文章

Copyright @ 2022~2023