摘要：手动控制校验状态，elementUI文档里面是没有的 <template> <div id="app"> <!-- status-icon 用于显示input框里的校验状态，需要写在 el-form里 --> <el-form ref="form" :model="form" label-width
阅读全文
posted @ 2021-09-27 04:19
随笔分类 - vue笔记
这里是vue的笔记
摘要：elementui动态添加校验规则，场景： 如果活动名称为空，则所有字段非必填 如果活动名称不为空，则具体活动名称提示必填 <template> <div id="app"> <el-form ref="form" :model="form" :rules="rules" label-width="
阅读全文
posted @ 2021-09-21 19:50
摘要：这是一个大坑 在vue3.0项目里面是没有任何作用的 使用v-model进行父传子，只能在在vue2.x项目中生效 1.父组件，引用子组件 ，并使用v-model绑定数据 父组件代码： <template> <div> <child v-model="obj" ></child> </div> </
阅读全文
posted @ 2021-01-07 00:56
摘要：setup函数是用于定义变量和方法的 1.引入ref 和 reactive 模块 import {ref, reactive} from 'vue' ref 模块是用来声明简单数据类型的，例如,string , number ,boolean 等 reactive 模块是用来声明复杂数据类型的，例如
阅读全文
posted @ 2020-12-29 20:29
摘要：使用vite创建vue3.0项目 npm init vite-app project3 yarn yarn dev 就这可以了 下面是另外一种创建方式： 1.命令 vue create xxx // xxx 是项目名称 2.选项 （1） （2）上下按键，移到这里，选择vue项目的版本 （3）选择vu
阅读全文
posted @ 2020-12-01 06:48
摘要：1.升级 npm i -g @vue/cli 2.查看版本 vue --version 后来发现，这根本是不行的。。。。。 执行了升级命令，还是原来的版本。。 最终的解决办法是，删除vue-cli，重新安装 那么怎么彻底删除vue-cli呢？输入以下命令，然后得到vue的安装目录，全部文件删除！ w
阅读全文
posted @ 2020-12-01 06:06
摘要：设置了keep-alive的路由，不会触发生命周期。 要把keep-alive设置为false，才会触发生命周期。
阅读全文
posted @ 2020-05-29 07:18
摘要：这样写就可以了 @click="test(...arguments,1)" 例子： <template> <div> <button @click="test(...arguments,1)">点击</button> </div> </template> <script> export defaul
阅读全文
posted @ 2020-05-04 16:55
摘要：// vant覆盖默认样式的写法 <style lang="scss" scoped> ::v-deep .van-popup { background: transparent; color: #fff; } </style>
阅读全文
posted @ 2020-04-28 18:52
摘要：html <p ref="p">这是文字</p> <button @click="copy">点击复制上面内容</button> js data() { return { copyText: "" }; }, methods: { copy() { this.copyText = this.$ref
阅读全文
posted @ 2020-04-28 09:08
摘要：html <div class="test" @touchstart="gtouchstart()">按啊</div> js data(){ return { timeOutEvent: 0 ,// 长按事件定时器 }} methods: { gtouchstart () { // 开始触摸 thi
阅读全文
posted @ 2020-04-28 08:52
摘要：vue使用 vue-awesome-swiper制作轮播图。 1.访问github，搜索vue-awesome-swiper，查看用法。 第一个坑：github居然访问不了。 解决办法：参考别人 https://www.cnblogs.com/Owen-ET/p/10868620.html 其实访不
阅读全文
posted @ 2020-04-04 03:00
摘要：弄了一晚上太坑了！！！！ 1.在阿里图标库下载图标 2.下载的解压后，选取四个字体文件 3.在src/assets文件夹下新建一个叫iconfont的文件夹，把这个四个字体文件放进去 4.在src/assets/文件夹下新建一个叫styles的文件夹，把iconfont.css放进去 5.在main
阅读全文
posted @ 2020-04-03 22:31
摘要：1.安装lib-flexible插件 npm i --save-dev lib-flexible 2.在main.js里引入 import 'lib-flexible' 3.安装postcss-px2rem插件 npm i --save-dev postcss-px2rem 4.新建vue.conf
阅读全文
posted @ 2020-04-03 17:04
摘要：vue子传父，本来是以为是要通过触发一个事件，才能传值到父组件的。 结果原来可以不用的。别人说vuex，太麻烦了。 其实可以不用。父组件必须异步的把值传给子组件就可以了，例如axios里的请求，或者设置setTimeout 先说下场景： 子组件created的时候就请求一些数据，请求来的数据，要传给
阅读全文
posted @ 2020-03-16 07:03
摘要：vue绑定类，是通过绑定class，class的内容是一个对象。 :class="{red:true,green:false}" 如果是true，就显示该类的样式，如果是false，就不显示该类的样式。 动态切换类，就是通过方法，改变绑定的true/false的值。 例子： 点击div实现颜色切换
阅读全文
posted @ 2020-02-27 14:14
摘要：在vue里，修改数组长度，可以分成两个情况 情况一：把数组长度改为0 情况二：把数组长度改为大于0的其他数字 对于情况一，把数组长度改为0，就是清空数组。vue里清空数组的两个方法，如下： 情况二，举个例子 效果：
阅读全文
posted @ 2019-10-29 00:00
摘要：组件A里包含组件B，组件B里包含组件C，组件C的值要传值给组件A，那么就要用$listeners传值。 $listeners跟子传父差不多 1.在孙组件里定义事件，通过$emit把值传出去。 2.在子组件中定义v-on="$listerners" 3.父组件通过传过来的自定义事件，获取孙组件的值
阅读全文
posted @ 2019-10-20 23:26
摘要：有一个组件A，包含了组件B，组件B包含了组件C，那么组件A就是父组件，组件B就是子组件，组件C就是孙组件。 $attrs可以把父组件的值传给孙组件 1.在引用的子组件里绑定要传的值 2.在引用的孙组件里用v-bind绑定$attrs 3.在孙组件里打印出this.$attrs,可以获取到父组件的数据
阅读全文
posted @ 2019-10-20 19:20
摘要：1.新建bus.js import Vue from 'vue' export default new Vue 2.在需要传值和接受值的vue文件中，各自引入bus.js import bus from '../util/bus' 3.定义传值的方法，使用bus.$emit('methodName'
阅读全文
posted @ 2019-10-18 22:06
