![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue.js
宝拉不想努力了
沉淀ing……
展开
-
element 表单校验上传图片及富文本(vue2)
element 表单校验上传图片及富文本(vue2)原创 2023-01-13 13:24:43 · 2062 阅读 · 0 评论 -
vue3生命周期
生命周期图谱典型生命周期1 beforeCreate在实例初始化之后、进行数据侦听和事件/侦听器的配置之前同步调用。2 created在实例创建完成后被立即同步调用。在这一步中,实例已完成对选项的处理,意味着以下内容已被配置完毕:数据侦听、计算属性、方法、事件/侦听器的回调函数。然而,挂载阶段还没开始,且 $el property 目前尚不可用。3 beforeMount在挂载开始之前被调用:相关的 render 函数首次被调用。该钩子在服务器端渲染期间不被调用。原创 2021-12-07 18:15:58 · 1274 阅读 · 0 评论 -
vue3 ts setup父子组件传值
问题描述:使用<script lang="ts" setup>标签 获取ref总是找不到,起初我以为是传染子组件先后顺序问题 增加一个setTimeout 和nexttick,但是还是找不到ref。查看资料看到这种写法增加了三个语法糖(父子组件通信)使用defineEmit,defineProps,defineExpose这里我主要是想父组件 调用子组件的方法,所以使用defineEmit还有获取ref所以使用defineExpose父组件<template> <原创 2021-12-07 16:06:46 · 3031 阅读 · 0 评论 -
vue3遇到问题整理(不定期更新)
1.is="vue:script"<div is="vue:script" src="https://p.bokecc.com/player?newversion=true" type="text/javascript" />2.Volar vscode中插件的安装使用3.reatvie,ref,unref,toRef/toRefs/isRefreatvie对应用类型数据进行包裹,使其称为响应式的数据,vue不建议使用原对象(应用类型数据),而直接使用包裹后的数据,因为原创 2021-11-24 15:46:47 · 1568 阅读 · 0 评论 -
vue3 update:modelValue使用
v-model中update:modelValuev-model的主要原因是由于value和input事件可能另有它用,那么我们可不可以直接使用另外的属性和方法,而不需要去通过model进行定义。vue3中就实现了这个功能,v-model绑定的不再是value,而是modelValue,接收的方法也不再是input,而是update:modelValue写法:<ChildComponent v-model:title="title" />//或者<ChildCompone原创 2021-11-22 17:18:04 · 40362 阅读 · 0 评论 -
vue keep-alive机制
使用场景:在开发中某些情况我们希望继续保持组件的状态,而不是销毁掉,这个时候我们就可以使用一个内置组件:keep-alive使用:通常我们可以配置整个页面缓存或只让特定的某个组件保持缓存信息,配置了keepalive的路由或者组件,只会在页面初始化的时候执行created->mounted生命周期,第二次及以后再进入该页面将不会执行改生命周期,而是会去读取缓存信息1.keep-alive属性keep-alive有一些属性:include - string | RegExp | Array。原创 2021-11-22 16:38:16 · 653 阅读 · 0 评论 -
vue动态组件的实现和传值
动态组件的实现和传值1.动态组件的实现动态组件是使用 component 组件,通过一个特殊的attribute is 来实现<template> <div> <button v-for="tab in tabs" :key="tab" :class="{ active: currentTab === tab }" @click="tabClick(tab)" > {{ tab }}原创 2021-11-22 16:05:54 · 5738 阅读 · 0 评论 -
vue3 template
template 使用情况1. 根据某个状态渲染多个模板的 v-if v-else2. 插槽的场景插槽:子组件写法:name="title" <slot name="title" v-bind="{ row: typeItem, index: index }"> <div class="menuItemBox">{{ typeItem.name }}</div></slot>父组件调用写法:<template #tit原创 2021-11-19 15:36:33 · 3340 阅读 · 0 评论 -
sessionStorage
1.设置(变量名,变量值)window.sessionStorage.setItem('title', JSON.stringify(row))2.取值 window.sessionStorage.getItem('title') || '{}'3.使用之后需要在卸载的生命周期中清除该缓存onUnmounted(() => { window.sessionStorage.removeItem('title')})...原创 2021-11-10 15:37:33 · 1307 阅读 · 0 评论 -
vue3脚手架安装
一.准备1.官网链接 安装node检查node 版本node -v2.全局安装vue-cli3.0脚手架卸载:如果已经全局安装了旧版本的vue-cli(1.x 或 2.x),需要先卸载:npm uninstall vue-cli -g安装:npm install -g @vue/cli查看vue版本:vue -V3.创建vue3项目二.创建vue3项目1.创建 项目名称 编写 vue create proname注意:项目名称不支持大写字母2.输入命令选择选项(原创 2021-07-08 11:37:11 · 5187 阅读 · 2 评论 -
ts+vue3 elementUI表单提交编辑
需求:因为有些有唯一性校验的字段,如果没被编辑并且传了;后端更新时会失败;所以只传需要变更的字段。在提交表单使用http的put请求进行数据更新时,只提交表单中被修改的数据,而不是提交整个表单分析:获取表单数据时clone一份作为原始数据rawData在提交表单前将表单数据 formData 和 rawData 的数据进行比较将差异存放到新的对象 diffData 中,在提交表单时提交就行了<!-- 编辑模态框 --> <el-dialog tit原创 2021-03-01 21:56:22 · 2630 阅读 · 0 评论 -
npm run dev启动项目报错
npm run dev启动项目报错报错内容如下:查看package.json,搜索scripts这里是用的serve,所以启动项目指令为:npm run serve当查看package.json的scripts中包含dev,如下如所示,则运行指令为npm run dev原创 2021-01-20 14:25:18 · 2051 阅读 · 0 评论 -
js横竖屏切换,js(vue vuex)开启全面屏虚拟按键处空白处理
1.js横竖屏切换renderResize: function () { // 判断横竖屏 let width = document.documentElement.clientWidth let height = document.documentElement.clientHeight if(width > height||width < height) {//条件一横屏,条件二竖屏 // alert('横屏'); location. reload(); } }2原创 2020-11-12 09:46:35 · 871 阅读 · 1 评论 -
visibilitychange使用
visibilitychange浏览器标签页被隐藏或显示的时候会触发visibilitychange事件.使用场景:背景音乐在使用home键退出的时候或者切换到其他app的时候音:乐应该停止播放。使用vue在生命周期onHide中调用该方法,注意:我的音乐播放使用的是插件,相当于子组件,在子组件中onhide是无效的,需要在调用该子组件的位置即父组件的生命周期的onHide中调用#####代码:子组件:audioPlay() { this.$emit('update:play', tru原创 2020-11-10 17:55:36 · 1467 阅读 · 0 评论 -
js获取当前时间(vue uniapp中使用)
<template> <view> <view class="test"> <view>日期选择 - 示例</view> {{date}} <button type="primary" @click="onShowDatePicker('date')">选择日期</button> </view> <mx-date-picker :show="showPicker" :type原创 2020-11-09 16:20:33 · 1062 阅读 · 0 评论 -
VUEX
官网 链接mapStateindex.js写法一:import Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex);const store = new Vuex.Store({ state: { count0: 3 }});import { mapState } from 'vuex';new Vue({ el: '#app', store, data() {原创 2020-10-21 17:54:28 · 144 阅读 · 0 评论 -
vue动画(uniapp版)
<template> <view> <!-- 1.单元素/组件的过渡 简单使用 --> <button v-on:click="show = !show">简单使用</button> <transition name="fade"> <p v-if="show">hello</p> </transition> <button v-on原创 2020-10-19 11:13:32 · 2116 阅读 · 2 评论 -
uniapp初体验
1…配置应用发布时,需要在manifest.json中修改h5配置目录结构:pages 业务页面文件存放的目录static 静态文件目录(images之类)App.vue App 全局应用配置main.js 初始化入口文件manifest.json 多端配置信息pages.json 配置页面路由、导航等信息,类似原生小程序的 app.json2.插件配置选择菜单 【工具】 >> 【插件安装】建议安装这些:NPM内置浏览器内置终端App真机运行uni-app编译原创 2020-10-12 17:34:48 · 1055 阅读 · 0 评论 -
[Book]Vue.js权威指南(脸谱)第五章表单控件绑定
第五章表单控件绑定在web应用中,经常使用表单向服务端提交一些数据,而在表单中绑定一些如input、change等事件对用户输入的数据进行校验、更新等操作。在vue.js中、我们可以使用v-model指令同步用户输入的数据到vue实例data属性中,同时会对radio、CheckBox、select等原生表单组件提供一些语法糖使表单操作更加容易。一.基本用法text<div i...原创 2019-11-15 14:06:55 · 161 阅读 · 0 评论 -
[Book]Vue.js权威指南(脸谱)第四章计算属性
第四章计算属性一.什么是计算属性计算属性:当其依赖属性的值发生变化时,这个属性的值会自动更新,与之相关的DOM部分也会同步自动更新。computed中的getter<div id="app"> 我的全名:{{fullName}} <br> 我的年龄:{{age}}岁</div><script> var ...原创 2019-11-14 15:35:21 · 144 阅读 · 0 评论 -
[Book]Vue.js权威指南(脸谱)第三章指令
第三章 指令指令:是特殊的带有前缀v- 的特性。指令的值限定为绑定表达式,指令的职责就是当其表达式的值改变时把某些特殊的行为应用在DOM上一. 内部指令.内置指令1.v-if根据表达式的值在DOM中生成或移除一个元素。当赋值为false则对应的元素会从DOM中移除,否则对应元素的一个克隆将被重新插入DOM中。(这也是v-if和v-show的一个区别)<!DOCTYPE html&...原创 2019-11-07 14:20:46 · 181 阅读 · 0 评论 -
[Book]Vue.js权威指南(脸谱)第一章遇见vue.js&第二章数据绑定
第一章遇见vue.js一.MVX模式1.MVC:Model(模型),Controller(控制器),View(视图)。View一般都是通过Controller来和Model进行联系。Controller是Model和View的协调者,View和Model不直接联系。基本联系都是单向的。用户通过Controller来操作Model以达到View的变化。2.MVP(代表Riot.js...原创 2019-11-06 15:25:12 · 208 阅读 · 0 评论 -
vue和布局遇到的问题
显示竖直方向的滚动条第一种固定高度+overflow-y: auto;展示如下:<div class="card" style="width: 100%;margin:0 auto; height: 280px;overflow-y: auto;"> <ul class="list-group list-group-flush" v-for="detai...原创 2019-11-06 10:46:11 · 445 阅读 · 0 评论 -
使用Vue配合插件实现进度条和提示信息功能
1.bootstrap4 中progress和tooltip使用该插件我只是实现progress进度条功能,提示信息没有显示出来,原因可能是bootstrap和elementui插件混在一起优先级下降,或者是因为我是想在该页面中点击按钮弹出的模态框中显示的进度条,这样dom节点层级过高使用不便。现在展示我实现的功能:展示如下:简单介绍一下bootstrap4中的progress和tool...原创 2019-10-29 11:34:59 · 2886 阅读 · 0 评论 -
使用vue绑定数据结合bootstrap实现功能
今天使用bootstrap4中的progress滚动条插件,实现数据绑定他对应的width数值从而实现填充的显示。我的data 参数格式是数值型要结合vuestyle绑定样式参考使用,参考文档首先做出css样式:<div class="progress"> <div class="progress-bar" role="progressbar" style="w...原创 2019-10-28 16:25:07 · 871 阅读 · 0 评论 -
前台使用vue和ElementUI后台SpringBoot和Maven实现简单的增删改查
前台使用vue和ElementUI后台SpringBoot和Maven实现简单的增删改查vue_SpringBoot使用vue和ElementUI搭建前台,SpringBoot搭建后台,完成基本数据的增删改查前台在main.js引入elementUI组件import ElementUI from 'element-ui'import 'element-ui/lib/theme-ch...原创 2019-07-25 15:27:29 · 2415 阅读 · 1 评论 -
vue报错:v-for报错:Elements in iteration expect to have 'v-bind:key' directives解决方法
<ul> <li v-for="pwd in pwds" >{{pwd}}</li> </ul>报错信息提示: 缺少 绑定修改代码: <ul> <li v-for="pwd in pwds" :key="pwd">{{pwd}}</li> </ul&...原创 2019-07-10 21:49:53 · 1178 阅读 · 0 评论 -
Chrome浏览器console控制台不打印任何js错误信息
手欠在Chrome控制台在错误信息,右键:Hide messages from vue看不到 报错信息这里删除成 默认的Filter报错就出现了原创 2019-07-08 16:08:15 · 13348 阅读 · 5 评论 -
浅析Vue中computed与method的区别
其实官方文档对这个已经说的很清楚了,笔者不过是在其基础上进行归纳总结,各位看官还是先去读一下官方文档吧1.computed区别于method的两个核心在官方文档中,强调了computed区别于method最重要的两点computed是属性调用,而methods是函数调用computed带有缓存功能,而methods不是OK,下面我们看一个具体的例子<!--HTML部分--...转载 2019-06-03 16:03:52 · 273 阅读 · 0 评论 -
vue脚手架安装
1)安装webpacknpm init --yesnpm i webpack webpack-cli --save-dev2)安装vuenpm install vue -gnpm install vue-cli -gvue -V3)创建vue项目vue init webpack test一定要选择路由功能;做相关选择时,对测试相关的一些选项,y/n可选择n避免测试用的一些文件...原创 2019-05-15 16:50:07 · 310 阅读 · 0 评论 -
vue报错:vue.js:634 [Vue warn]: Cannot find element: #app
编译代码很简单<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> <!--<s...原创 2019-04-09 21:48:33 · 18297 阅读 · 8 评论