学习永无止境

前端任意框架实现组件通信的一种方式一、安装消息与订阅库安装（这里使用的是 pubsub-js）npm install pubsub-js引入接收消息和发送消息的组件都需要引入这个库！！二、订阅与发布1.订阅2.发布...

<!-- 子组件 --><template> <div> <h3>年龄{{ myAge }}</h3> <button @click="onClick">尝试修改props内容</button> </div></template><script>export default { props: ["age"], data() { retur.

<div>{{time}}</div> data: { //显示时间 time: '', }, mounted() { this.dateShow(); }, created() { this.dateFormat();

子组件位置 <div class="chartBox"> <lineChart :visitBaData="visitBaData" /> </div>子组件接收的值需要通过watch监听处理才可以 props: { visitBaData: { type: Array, default: () => [], }, }, data() { return {

::v-deep .el-radio__inner { border-radius: 2px; } ::v-deep .el-radio__input.is-checked .el-radio__inner::after { content: ""; width: 10px; height: 5px; border: 1px solid white; border-top: transparent; border-right: trans..

https://www.cnblogs.com/zhaomeizi/p/8483597.html

在做vue项目的时候，遇到子元素有点击事件，父元素也有点击事件，当点击子元素时往往触发的是父元素的点击事件，产生冲突，怎样解决这个问题呢？这就用到vue事件中的事件修饰符官网地址https://cn.vuejs.org/v2/guide/events.html#%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6Vue.js 为 v-on 提供了事件修饰符 .stop、.prevent、.capture、.self、.once、.passive，我们要处理子元素

<template> <div class="home"> <div> <video src="https://test-minio.hoolink.com/iot/project/373/202108/26144828-e6189322/100M.mp4" controls style="width:300px;" ></video> <img

传统写法<script> export default { name: 'xx',// 组件名 components: {},// 组件 props: {},// 父组件传递来的值 data() { // 声明变量的位置 return {}; }, watch:{},// 监听器 computed:{}, // 计算属性

<el-form :model="FindDailyCardItem.requestdata"> <el-form-item label="会员卡号(手机号):"> <el-input v-model="FindDailyCardItem.requestdata.cardCode" @input="FindDailyCardItem.requestdata.cardCode=FindDailyCar...

项目需求是要输入的面额不能大于原来的价格，由于每次循环导致取到最后一条数据的值来校验的，很显然是不行的在网上查了很多方法，也没有合适的，于是就用到了官方提供的Form-Item的属性 error注:用error的话，就不需要为el-form-item添加prop和rules了，直接在el-form-item标签上添加:error="scope.row.error"即可代码: <el-table-column label="优惠面额（元）">

<template> <div id="app"> <!-- <router-view /> --> <!-- <Footer v-show="$route.meta.showFooter" /> --> <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style=

项目需求：选择商品并添加到右侧代码 <template> <div class="app-container"> <div class="filter-container"> <el-form ref="newCouponForm" :model="newCouponForm" :rules="newCouponRules" label-width="120px"> <el-row>

<template> <el-form :model="unuseForm" label-position="top" :rules="dialogRules"> <el-form-item label="原因" prop="loseEfficacyReason"> <el-input type="textarea" v-model="unuseForm.loseEfficacyReason" auto-complete="off">&

从列表页添加到购物车并去重：addCart(val){ //添加购物车 let rel = true this.cart.map(item => { if (item.data.id == val.id) { item.num++ rel = false return } }) if(rel){ this.cart.push({ data:val, num:1

为什么要配置el-cascader的props?如果配置了这个选项，请求回来的数据，根本不用你去递归处理，只需要把响应的数据赋值给数据源cascaderList代码如下: <el-cascader v-model="cascaderValue" :options="cascaderList" :props="cascaderProps" @change="cascaderHandleChange" />data中：data:{return{

一、什么是QRCode.jsQRCode.js是用于制作二维码的JavaScript库。QRCode.js支持在HTM中使用HTML5画布和表格标签进行交叉浏览。QRCode.js没有依赖关系二、vue里安装QRCode.js包 npm i qrcodejs2三、vue中引入qrcodejs2包import QRCode from 'qrcodejs2'四、创建DOM元素，存储二维码的位置<div id="qrcode" ref="qrcode"></div>五

前言：时间格式原本是这样的那么现在来转成这样的格式使用npm命令安装momentnpm install moment --save在main.js文件里引用moment// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'i

<button class="btn1" @mouseover="addActive($event)" @mouseout="removeActive($event)">注意：要写两套样式 btn1 和 btn11methods:{ addActive($event) { $event.currentTarget.className = 'btn1' }, removeActive($event) { $event.current..

实现功能1.点击搜索，把搜索的值存入本地记录，并展示2.搜索相同的值，要删除旧数据，把新数据放进数组首位3.清空历史记录<div class="srarch_main"> <img src="@img/icon/4.png" alt="删除历史记录" class="del" @click="empty"> <div class="title">历史搜索</div> <ul> <li v-for="(item,index) i

组件内 <div>{{ item.create_time | dateFormat }}</div>main.jsVue.filter('dateFormat', (dataStr) => { var time = new Date(dataStr*1000); function timeAdd0(str) { if (str < 10) { str = '0' + str; }

转自：https://blog.youkuaiyun.com/weixin_43638968/article/details/108665092一、来自官网的描述混入 (mixins)： 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。二、项目中如何使用混入在vue组件内，如果想将一些公共功能，如组件、方法、钩子函数等复用，混入是一个很好的选择。下面简单介绍一下混入的方式及特点。你可以将一个对象作为混入的

<!-- 分页区域 --> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pagenum" :page-sizes="[1, 2, 5, 10]" :page-size="queryInfo.pagesize" ...

写之前要先在index.html 引入jQuery在线版的bootcdn <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>List.vue<template> <div> <!-- 返回顶部按钮 --> <div class="backTop" @click="back" v-show="

废话不多说，直接上代码。html:<template> <div class="container"> //container必须写在最外面的盒子 <el-backtop target=".container"> <div class="toTop">Top</div> </el-backtop> <div v-for="index in 100" :key="index"&gt

html代码如下<el-table :data="tableData.slice((currpage - 1) * pagesize, currpage * pagesize)"></el-table> <el-pagination @size-change="hadleSizeChange" @current-change="handleCerrentChange" layout="prev, pager, next"