vue
vue有关知识。
KLW75
笔记存放处,仅供参考。
展开
-
input 在vue中 双向绑定数据没有实时生效
在使用vue 的双向绑定数据到input 中 有可能会出现 绑定的数据变化了,但是页面中的数据没有变化。这个时候数据没有实时生效。这个时候需要使用this.$set 的方式或绑定到data里边的一个字符串,就是在data中定义出这个字符串。this.$set(target,key,value); 使用简介,this.$set(target,key,value);解释一下各个参数。target,要更改的数据源(对象啊数组啊);key:要更改的具体数据名称,数据源里面的哪个值。原创 2022-03-18 14:51:55 · 2235 阅读 · 0 评论 -
vue slot插槽 与具名插槽
使用的时候,要再引用组件的时候,把想要传递的数据,使用插值表达式的方式,放到页面中<div> {{具体的值}}</div>在子组件中使用 <slot></slot>标签接收数据。<div> <slot></slot></div>具名插槽具名插槽这里可以传递很多数据,可以让传递的数据在不用标签的情况时显示。父 slot 属性<div slot='a'>原创 2022-01-25 21:54:22 · 789 阅读 · 0 评论 -
Vue 计算属性computed
计算属性是通过一些数据算出一个新的数据,例如求和,求平均数,等计算,都可以使用计算属性。计算属性与data、method是平级。computed:{ getvalue(){ return 值 }}计算属性是必须有return 返回值,声明的时候是一个方法。计算属性调用的时候不是方法调用,是普通的变量调用,所以直接使用{{getvalue}} 计算属性中的名称。计算属性可以调用其他计算属性。可以直接把其他的计算属性作为值来使用。可以使用计算属性进项判原创 2022-01-25 21:35:58 · 1139 阅读 · 0 评论 -
vue 过滤器 filters 全局过滤器
私有过滤器文章链接vue 过滤器 filters_KLW75-CSDN博客重点:在vue 3.x 中,过滤器已移除,且不再支持。取而代之的是,我们建议用方法调用或计算属性来替换它们。全局过滤器需要在main.js中定义。Vue.filter('tofix',function(val,data){ return })tofix 是过滤器名字。val 是过滤器 控制的元素,data 调用过滤器时候,传递的参数。得到的值需要return出去。页面使用的时..原创 2022-01-25 21:22:46 · 1120 阅读 · 0 评论 -
vue 3.x 的生命周期函数与vue2的变化
vue3 中取消了,beforeCreate与 created 这两个生命周期函数,其他的生命周期函数也发生了改变。图标中左侧是vue2中的名称,右侧是对应的vue3中的名称。beforeMount onBeforeMount mounted onMounted beforeUpdate onBeforeUpdate updated onUpdated beforeDestory onBeforeUnmount destoryed onUnmo原创 2022-01-24 22:34:20 · 789 阅读 · 0 评论 -
uni-app 兼容不同平台
uni-app,针对不同的平台可以写不同的代码使用 以 #ifdef 或 #ifndef 加 %PLATFORM% 开头,以 #endif 结尾。就可以控制简介:#ifdef:if defined 仅在某平台存在 #ifndef:if not defined 除了某平台均存在 %PLATFORM%:平台名称平台名称都有值 生效条件 VUE3 HBuilderX 3.2.0+详情 APP-PLUS App APP-PLUS-NVUE或APP-NVUE.转载 2022-01-19 21:34:53 · 665 阅读 · 0 评论 -
Composition API 的 setup 函数 (vue 3.x)
setup()是 composition API 的入口函数。只要特点有三个1. setup 函数类似于生命周期,它在 beforeCreate 生命周期 之前自动调用。2.setup函数中,没有this3.setup 函数中的数据或者方法都要return出去。使用var或者let定义的数据都不具有响应式功能,不具有双向绑定的功能,要定义响应式数据,来进行使用。...原创 2022-01-17 20:55:21 · 213 阅读 · 0 评论 -
vue 3.0 中的composition API简介
Composition API 又叫作组合式 API 。在vue2 中,功能开发需要分散到data属性,methods 属性以及computed 属性中。每一个功能模块的开发至少需要分散到data属性与methods属性,这种形式 叫做 Options API 随着项目的扩大,功能模块会分散到各个属性中,导致可读性与可维护性差。很难进行代码复用。Composition API 主要解决以上问题,可以把每个功能都写在一起,或者单独写在函数中,不会出现功能分散的问题,这样就提高了代码的可读性与可维护原创 2022-01-17 20:37:12 · 713 阅读 · 0 评论 -
vue 3.x与vue2.x 中 main.js的部分区别
vue 3.x的目录结构与vue2.x的目录结果大体一致,但是main.js 文件发生变化vue3.x中import { createApp } from 'vue'import App from './App.vue'import router from './router'import store from './store'createApp(App).use(store).use(router).mount('#app')vue2.x中import Vue from '原创 2022-01-17 20:30:38 · 944 阅读 · 0 评论 -
vue axios 获取数据
这里说一下有关axios 的简单介绍axios 用的是promise 语法,所以使用.then 获取 成功的数据,res就是最终需要的数据。this.$axios.get("请求地址").then(res=>{});请求方式一般有2种,get post有时候也会有add 与delete 。传递参数在params里面添加有需要的数据。可以这么传递this.$axios.get("请求地址",{ params:{ id:1 } }原创 2022-01-15 22:29:44 · 3609 阅读 · 0 评论 -
vue 有关侦听器的使用
vue中可以使用侦听器来判断数据是否变化。watch:{ a(){ //a是页面中的变量 a的值如果变化,这里就会执行 }}原创 2022-01-13 14:05:41 · 196 阅读 · 0 评论 -
vue 过滤器 filters
视图层<div> {{a|tofixed}}</div>scriptfilters:{ tofixed(val){ returen val }}filters 属性用于存放过滤器,和data 与methods 平级过滤器是一个方法,可以传递参数,第一个参数是固定的,表示要处理的变量,是必须有return属性的。过滤器 使用的竖线又称为管道符,竖线后面就是过滤器的名字。...原创 2022-01-11 21:46:02 · 411 阅读 · 0 评论 -
vue-cli 如何运行
npm run dev 执行了什么。在终端输入 npm run dev 之后 ,最终执行的文件是index.html 所以首先打开 index.html.index.html 文件 理论上运行只会展示空白页面。但是实际上 webpack 在index.html中自动引入了main.js。所以,当运行 npm run dev时后,会自动的在index.html 页面中引入main.jsmain.js文件在main.js中,引入了Vue.js、 App.vue、 router.js使原创 2022-01-11 20:51:53 · 929 阅读 · 0 评论 -
Vue 父组件向子组件传递方法(事件)子组件通过$emit 来触发父组件中的一个事件
Vue 父组件向子组件传递方法基本步骤有两步1、是在父组件中,通过 v-on 自定义事件传递给组组件2、在子组件中通过 this.$emit( ) 触发父组件的方法。父组件< test @父组件绑定的名称=‘父组件触发的方法’>子组件this.$emit('父组件中绑定的名称')...原创 2022-01-09 21:51:59 · 4651 阅读 · 2 评论 -
vue 动画 不生效
vue中使用动画。1.要用transition 标签包裹,需要添加动画的元素。2. 添加两组 css样式。没有生效 是不是没有用标签包裹。原创 2022-01-08 14:53:28 · 1254 阅读 · 0 评论 -
vue2 生命周期简单使用总结
vue 的不同生命周期 有不同的特征。这里简单总结。beforeCreate 在vue 实例创建之前, 数据与方法没有初始化,在这里不能调用。created 中 数据与方法银镜进行初始化完成了,可以在页面中调用了。可以在这里发送ajax请求。beforeMount 数据在内存中渲染,没有真实的挂载到页面中。mounted 数据渲染完成们已经挂载到页面中,vue的实例创建完成。beforeUpdate vue只是在内存中完成了编译,没有真的挂载到真实页面中。updated原创 2022-01-08 14:42:04 · 662 阅读 · 0 评论 -
vue 遍历对象
可以使用v-for 遍历对象,在M层定义普通对象,举例:data 内容data:{ obj:{ id:1, name:'名称', des:'des内容', content:'具体内容' }}这个时候,用 v-for 遍历可以遍历对象。<div v-for="(val,key,i) in obj" :key = "i">遍历对象是以键 - 值对形式, 第一个参数 表示值,第二个表示键,第三个是原创 2022-01-05 21:22:46 · 17505 阅读 · 0 评论 -
vue 中的 v-cloak的使用( Vue 实例编译结束时,从绑定的 HTML 元素上被移除)
在使用v-if的时候,发现页面在未加载完成的时候,页面里本应该隐藏的内容在页面上一闪而过。使用v-cloak解决这个问题,这里总结一下 v-cloak 的用法。v-cloak 指令设置样式会在 Vue 实例编译结束时,从绑定的 HTML 元素上被移除。(网络加载慢的时候可以使用)页面闪烁问题解决方式页面中 div 样式是<div class="show...原创 2019-12-04 15:33:30 · 329 阅读 · 0 评论 -
银行卡号格式化内容
代码内容:this.num是获取的银行卡号。方法名: { get() { return this.num.replace(/\s/g, '').replace(/\D/g, '').replace( /(\d{4})(?=\d)/g, '$1 ') }, set(val) { this.num = val; } },原创 2021-08-04 16:10:19 · 243 阅读 · 0 评论 -
vue中几种路由跳转的区别(this.$router.push、replace、go)
this.$router.push跳转到指定url路径history栈中添加一个记录,点击后退会返回到上一个页面(可以理解为记住了从哪里来的)this.$router.push({name: ' 路由name ', params: {传递值的名字: 传递的值}})this.$router.replace 跳转到指定url路径 没有在history栈中添加一个记录,点击后退会返回到上上页面(可以理解为没记住自己从哪儿跳转的)this.$router.go(n)向前或者向后跳转n个页面,...原创 2021-07-29 23:19:15 · 719 阅读 · 1 评论 -
vue实现多选功能(不使用插件)
uni-app开发中需要使用多选,但是插件不适用的情况下循环生成列表。页面样式中这么写<view :class="{ 选中的样式css类名:存放选中状态的数组名.includes(index)}" v-for="(item,index) in 循环的数组" :key="item.index" @click="点击事件(index)"> </view>点击事件方法内的写法。index很重要方法中这么写if (存放点击状态的数组名字.includes(in原创 2021-07-21 18:53:54 · 1018 阅读 · 0 评论 -
前端数组去重的方法。使用indexOf
把代码中的汉字用对应的数组名代替可以实现var 新的用来放没有重复的数组的名字 = []; var index = 0; for(var i=0;i<原来数组名.length;i++){ if(新的数组名.indexOf(原来数组名[i]) == -1){ 新的数组名[index] = 原来数组名[i]; index++; }} console.log(新的数组名);打印就看见新的数组内容了。...原创 2021-07-21 18:46:12 · 295 阅读 · 0 评论 -
vue 报错:TypeError: Cannot read property ‘path‘ of undefined
npm install yarn在cmd里面运行这条命令安装yarn原创 2021-07-15 18:06:56 · 4263 阅读 · 0 评论 -
uni-app 编写小程序分享
在页面的button中 需要添加上open-type="share"。<button @click="turn" open-type="share"> 立即分享</button>在页面的方法中填写注意不是在methods的下一级,与methodsonload都是同级。下面的代码是分享图片的写法onShareAppMessage(res) { return { title: '微信小程序测试分享', // path: '/p..原创 2021-07-09 10:54:11 · 221 阅读 · 0 评论 -
css 解决因为书名号不满一行就换行情况
有时候,会因为《》里面动态添加数据,因为外层的书名号导致不满一行就换行。例如这样的写法。<span>《{{text}}》</span>修正这个情况,使用::before 与 ::after<span>{{text}}</span>样式cssspan::before{ display: inline; content: "《" } span::after{ display: in原创 2021-07-08 19:08:54 · 2002 阅读 · 0 评论 -
uni-app 中文档阅读倒计时
文章很长,文章下面的倒计时按钮,倒计时的时候不能点击,倒计时结束,按钮能点击的效果倒计时事件// 按钮的倒计时 countdown() { const that = this //修改倒计时时间 这里写了10s that.time = 10 const fn = setInterval(function() { //每一秒自减一 that.time-- if (that.time == 0)原创 2021-07-08 19:03:13 · 610 阅读 · 0 评论 -
vue 路由跳转报错 Cannot read property ‘push‘ of undefined 可能的解决办法
vue 中跳转路由 报错Cannot read property 'push' of undefined。请检查pages.json 和router/index.js 两个文件中是不是有你填写的路径。在 router/index.js 文件中要 path 必须跟pages.json中的地址对应 前面必须有/符号{ path: '/pages/index', name: 'index', },pages.json文件中{ "p...原创 2021-07-06 21:34:25 · 8765 阅读 · 0 评论 -
vue 中动态绑定 placeholder的值
在页面中使用:placeholder 绑定一个名称 <input type="text" :placeholder="绑定的值的名称" />在数据部分data(){ return{ 名称: '具体的值',//将input的placeholder绑定上这个属性 ,绑定这个值 }}这个值具体为什么,视情况而定,还可以监听一个值的变化,然后根据那个值的变化,变化绑定的值的具体内容例如watch: { 监听的值: function(.原创 2021-07-02 23:29:21 · 6645 阅读 · 5 评论 -
vue 三元表达式 动态添加类(动态绑定样式)
可以使用三元表达式 ,根据条件,来给div 添加类名。例如满足条件的时候,添加类名1,不满足条件的时候,添加类名2。<div :class="[条件表达式? '类名1' : '类名2']">测试1</div>还可以在这个基础上使用,三元表达式的嵌套。除了动态添加的类名,再加上一个固定的类名的写法,满足条件动态添加类1,不满足条件,不动态添加类。(因为第二个位置为空)<div :class="[条件 ? '类1' : '','确定一定会使用的类名'].原创 2021-07-02 23:06:54 · 5039 阅读 · 0 评论 -
elementui组件使用@click.native时,绑定的事件会触发2次的问题
事件冒泡机制导致,使用.prevent阻止默认事件,可以解决这个问题。参考文章https://blog.csdn.net/SilenceJude/article/details/90240420原创 2019-07-15 13:41:58 · 3992 阅读 · 4 评论 -
xxx : 无法加载文件 C:\Users\XXX\xxx\xxx\npm\xxx.xxx,因为在此系统上禁止运行脚本(使用vscode 使用 vue时候出现报错系统上禁止运行脚本)
问题出在 PowerShell 上面。没有用管理员权限运行PowerShell因为 vscode 默认是使用 PowerShell 所以报错。解决办法:鼠标放到 win 标志上右键。找到点击。如果 有弹窗,请允许。输入 set-ExecutionPolicy RemoteSigned 然后回车。再输入 A 。如下图。这样再进vscode 就不在报错了。...原创 2021-01-26 15:45:44 · 218 阅读 · 0 评论 -
无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保路径正确,然后再试一次
输入npm 报错的情况可能有这几种情况没有安装npm 没有安装node环境 可以点击node官网 进行下载安装 全局安装,没有加入系统环境变量Path中。 没有使用管理员权限。可以试着用管理员权限打开编辑器。补充说明可以尝试的办法。可以把npm升级到最新版本再试一下。或者重新装node环境。...原创 2021-01-26 15:35:19 · 3568 阅读 · 0 评论 -
window.location.search.substring(1);的含义
一句话总结window.location.search.substring(1)是截取当前 url 地址?后面所有的内容。解释:window.location对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。window.location 对象所包含的属性中 search表示从问号 (?) 开始的 URL(查询部分)所以window.location.search表示包含?的所有内容。window.location.search.subst...原创 2020-09-27 15:22:57 · 5441 阅读 · 0 评论 -
Vue JS 的乘法精确计算问题,出现很多位小数的问题与原因
出现问题的原因计算机把小数转换成二级制,会出现无限循环的情况。再把无限循环的二级制转化成十进制的时候,变成了一个无限循环的数字。在处理双精度浮点数的小数部分最多支持 52 位,所以转换成十进制之后,就出现了很多位小数的存在。解决办法Vue.prototype.NumberMul = function(arg1, arg2) { var m = 0; var s1 = arg1.toString(); var s2 = arg2.toString(); try转载 2020-09-14 17:13:11 · 5807 阅读 · 0 评论 -
vue 在ajax success回调函数中 this 的使用问题。
在success回调函数中,直接使用this 会有失效的问题。原因:this指的是ajax对象,而不是当前的vue实例。解决办法:在使用之前 将this.变量赋值给新的变量,再在回调函数中使用。var that = this;当然也可以使用箭头函数。原因:箭头函数内部的this是词法作用域,由上下文确定。所以这里的箭头函数指向的函数内部的this已经绑定了外部的vue实例。...原创 2020-09-11 16:59:34 · 2108 阅读 · 0 评论 -
使用 vant 的时候 #icon=““ 缩写插槽使用失效的解决办法。
使用vant 组件的时候,有可能会碰到#icon="",这样的形式,这是vue中插槽的缩写形式。<template #icon="props"></template>这样的写法失效的话。很大的可能是引入的 vue 版本与 vant 的版本过低。解决办法,使用最新版的 vant 和vue 的版本<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.10/lib/index.cs.原创 2020-09-07 09:29:57 · 2756 阅读 · 2 评论 -
修改 vant 弹窗Dialog 组件调用是确认按钮与取消按钮的文字
Props有关props 两个属性confirm-button-text 与cancel-button-text 。confirm-button-text 确认按钮显示内容cancel-button-text 取消按钮显示内容<van-dialog class="" confirm-button-text="这里输入确认按钮的文字" cancel-button-text="这里输入取消按钮显示的文字" title="这里是标题" show-cancel-button v-...原创 2020-09-03 10:58:57 · 9079 阅读 · 0 评论 -
vue 获取 指定元素的高度宽度等(使用vue中的 ref 获取到的是 dom 元素高度或者宽度)
使用 vue 的时候,想要获得一个指定的元素的高度时,可以使用 vue 中的ref 。当 ref 加在普通的元素上,使用 this.ref.name 获取到的是 dom 元素示例写在 页面 html 部分的<div ref="init"></div> 写在 页面 方法 部分这里的offsetHeight 是返回元素的宽度(包括元素宽度、内边距和边框,不包括外边距)let height= this.$refs.init.offsetHeight...原创 2020-07-14 15:45:12 · 58762 阅读 · 8 评论 -
使用 vant 上传压缩图片的方法
这里的 afterRead 方法 是vant上传自带方法,见文档 https://youzan.github.io/vant/#/zh-CN/uploaderafterRead(file) { this.$toast.loading("识别中"); //判断图片的大小,单位是字节 if (file.file.size > 1048576) { console.log('压缩执行') let canvas = document.cre.原创 2020-07-10 16:05:38 · 948 阅读 · 0 评论 -
vant 上传组件 中 使用 base64转化功能时各个属性的含义 图片base64 原文件 文件大小。
vant 上传组件具备图片 转化为base64 的功能,需要可以直接用如果你 方法 afterRead(file) 传过来的值名字为 file,那么file.content即为base64 格式的图片file.file 为未转化格式的文件file.file.size为未转化格式的文件的大小这里记录一下,之前还自己费力去转化base64 再转换到原来的格式、...原创 2020-07-02 16:27:53 · 2146 阅读 · 0 评论