【vue】父向子组件传参、子组件向父传参、vue中父组件调用子组件函数、子组件向父组件调用方法

  • Post author:
  • Post category:vue

1.父向子组件传参 App.vue为父,引入 componetA 组件之后,则可以在App.vue中使用标签(注意驼峰写法要改成 componet-a 写法,因为html对大小写不敏感,componenta与componentA对于它来说是一样的,不好区分,所以使用小写-小写这种写法)。 而子组件componetA中,声明 props 参数’msgfromfa’之后,就可以收到父向子组件传的参数了…

继续阅读 【vue】父向子组件传参、子组件向父传参、vue中父组件调用子组件函数、子组件向父组件调用方法

Vue,在v-for中遍历含有多个对象的数组时,实现单选框

  • Post author:
  • Post category:vue

一、情况 1、在收货地址选择时,往往要在多个地址中选择一个收货地址,这就涉及到了v-for遍历包含多个地址对象的数组, 数组如下 new Vue({ el:'.op', data:{ //用来表示已选的项,单选时定义为字符串 choose_a:"", //需要遍历的数组 list:[ {id:1,name:"狗"}, {id:2,name:"猫"}, {id:3,name:"猪"}, {id:1,…

继续阅读 Vue,在v-for中遍历含有多个对象的数组时,实现单选框

【VUE】一个简单常用的proxyTable配置

  • Post author:
  • Post category:vue

一个简单常用的proxyTable配置 // 配置改动后需要重启生效 (运行npm run dev) proxyTable: { // 所有 /api请求的路由会走这个代理 '/api': { changeOrigin: true, //跨域 target: 'http://172.16.0.107:1338' }, // 所有 /ywapi请求的路由会走这个代理 '/ywapi': { chan…

继续阅读 【VUE】一个简单常用的proxyTable配置

vue el-table动态表格表头+对应数据

  • Post author:
  • Post category:vue

vue el-table动态表格创建 动态渲染表头;动态匹配表头对应数据 在这里插入代码片 <el-table :data="tableData" style="width: 100%" border @selection-change="handleSelectionChange" > <el-table-column type="selection" width="60" a…

继续阅读 vue el-table动态表格表头+对应数据

vue-cli启动自动打开浏览器

  • Post author:
  • Post category:vue

vue serve Usage: serve [options] [entry] 在开发环境模式下零配置为 .js 或 .vue 文件启动一个服务器 Options: -o, --open 打开浏览器 -c, --copy 将本地 URL 复制到剪切板 -h, --help 输出用法信息 版权声明:本文为qq_29523089原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链…

继续阅读 vue-cli启动自动打开浏览器

vuex简单使用、监听state值变化(设置主题色)

  • Post author:
  • Post category:vue

vuex主要是vue的状态管理,如果我们在项目中只通过传参、缓存等方式来同步data中的值,一旦项目变得大了页面多并且很复杂的时候就会变得很难维护和管理。vuex就把我们频繁使用的值进行集中管理,可以在整个项目中共同使用 state:存储状态(变量)。使用: $sotre.state.xxx getters:可以理解为state的计算属性。加工state成员给外界。使用: $sotre.gette…

继续阅读 vuex简单使用、监听state值变化(设置主题色)

vue3 element-plus 封装 validate-input

  • Post author:
  • Post category:vue

组件代码 <template> <div :style="divStyleInternal"> <label class="left-label" :style="lStyle">{{ label }}</label> <el-tooltip v-model="error" class="item" effect="dark" :content…

继续阅读 vue3 element-plus 封装 validate-input

ant design vue中点击编辑,表单数据的绑定

  • Post author:
  • Post category:vue

在一般的表单中,都是使用v-model来双向绑定数据,但是ant design vue中则会给予警告 1,获取数据: getNews({ params: { Id: i //传进来的id等值,具体看后端要什么 } }).then(res => { console.log(res) if (res.code == 0) { this.form.setFieldsValue({ title: r…

继续阅读 ant design vue中点击编辑,表单数据的绑定

Vue中使用vue-croper插件实现图片上传裁剪并传到SpringBoot后台接口

  • Post author:
  • Post category:vue

场景 前后端分离的项目,前端修改头像时,需要对头像进行裁剪并且能实时预览,然后上传到SpringBoot后台。 实现效果如下 注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 实现 插件官网 https://github.com/xyxiao001/vue-cropper 安装插件 …

继续阅读 Vue中使用vue-croper插件实现图片上传裁剪并传到SpringBoot后台接口

vue中的render函数学习

  • Post author:
  • Post category:vue

1.render函数用来渲染虚拟dom节点 /** * createElement 本身也是一个函数,它有三个参数 * 返回值: VNode,即虚拟节点 * 1. 一个 HTML 标签字符串,组件选项对象,或者解析上述任何一种的一个 async 异步函数。必需参数。{String | Object | Function} - 就是你要渲染的最外层标签 * 2. 一个包含模板相关属性的数据对象你可以…

继续阅读 vue中的render函数学习