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

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

开发过程中遇到的关于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中“{{}}”的用法