开发过程中遇到的关于vue的相关问题资源整理(动态绑定、组件传值、摄像头、保存图片、前后端交互)

elementUI官网:https://element.eleme.cn/

1、v-bind

Vue绑定JS变量值到HTML中要用v-bind:属性名="变量名"或者简写为:属性名=“变量名”

<!--例子:-->
<img :src="imgName">
<!--或-->
<img v-bind:src="imgName">
<!-- imgName是可动态改变的 -->
<script>
export default {
  data() {
    return {
      imgName: '1.jpg'
    }
  }
}
</script>

更细致的用法:1、V-bind详细使用
2、v-bind属性绑定的各种方法

2、组件传值

看的这一博客:vue组件传值的11种方式

3、vue中data和data()的区别说明

vue中data和data()的区别说明

4、vue调用摄像头

vue调用摄像头

在上述链接的代码中,发现其“关闭摄像头”功能只是让画面静止了,但摄像头其实还在开着,因此在这一功能中,我做出以下改进让摄像头真正关闭:

    // 关闭摄像头
    stopNavigator() {
      this.thisVideo.srcObject.getTracks()[0].stop()
      this.thisVideo = null
    }

即设置保存的变量thisVideo = null,事实上让thisVideo.srcObject = null也同样可以关闭,但是考虑到既然不用摄像头了,就整个变量置为null了

5、elementUI的Icon设置了但不显示问题,改变icon大小

我通过引入如下css文件来解决Icon设计了但不显示问题:

@import url("//unpkg.com/element-ui@2.15.6/lib/theme-chalk/index.css");

而icon的大小通过改变字体大小属性来改变:

<i class="el-icon-switch-button" style="font-size:30px;"></i>

6、vue保存图片到本地

vue点击按钮保存图片至本地

7、Vue前后端交互

Vue前后端交互
axios基本用法

8、Vue中{{}}的用法

Vue.js中“{{}}”的用法

9、字符串“false“转 Boolean false

直接判断值:

"false" == false 	

2.JSON.parse(text) 将字符串对象转json对象

text:要被解析成的字符串。
如果传入数字则会转换成十进制数字输出。
如果传入布尔值则直接输出。
如果传入null则输出null。
不支持其他类型的值,否则报错。
// 传入的"false"进行了类型转换 得到的是false
JSON.parse("false") => false
JSON.parse("111") = > 111
JSON.parse('aaa') => 报错

10、数组添加数据

1、unshift()
在数组头部添加一条数据

let listTable=[
 {id:'1',name1:'a1',name2:'b1'},
 {id:'2',name1:'a2',name2:'b2'},
 {id:'3',name1:'a3',name2:'b3'},
],
let newList = {
 id:'4'
 name1:'a4',
 name2:'b4',
}
listTable.unshift(newList)  //unshift()在数组头部添加一条数据 

2、push()
数组末端添加一条新数据

listTable.push(newList)  //push()在数组末端添加一条数据 

3、splice()
数组操作

//第一个参数为需要操作数据的下标,第二个参数为操作添加/删除(0为添加,1为不操作,2为删除,3为删除多条数据),第三个参数可选
listTable.splice(index,0,newList) 

4、concat() // 数组合并

let arrA = [1,2,3]
let arrB = [4,5]
arrA.concat(arrB) // 输出 1,2,3,4,5

let arrC = [6,7]
arrA.concat(arrB,arrC) // 输出 1,2,3,4,5,6,7

11、水平垂直居中、水平居中、垂直居中

.center {
display: flex;
justify-content: center;
align-items: center;
}

/* 水平 */
.horizontal-center {
display: flex;
justify-content: center;
}

/* 垂直 */
.vertical-center {
display: flex;
align-items: center;
}

12、vue使用echart

echart官网
如何安装、如何封装等:vue中使用echarts

12-1、图例相关设置

图例相关设置

12-2、解决echarts 数据重新加载后,原数据依然存在图表上

https://blog.csdn.net/weixin_59202948/article/details/127010483

13、在 JavaScript 中单行创建一个从 1 到 N 的数组序列

在 JavaScript 中单行创建一个从 1 到 N 的数组序列

14、保留两位小数

Javascript保留两位小数:1、toFixed(2);2、Math.floor()结合先乘后除;3、正则表达式截取

15、判断map中是否包含某个key

图数据.hasOwnProperty(“key”)—> true或false

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值