Vue
文章平均质量分 59
学习vuejs的时候做的一些记录
什么都干的派森
满招损 谦受益
展开
-
Vue2脚手架搭建+项目基础依赖安装
使用方法可以参考这篇文章。使用方法可以参考这篇文章。使用方法可以参考这篇文章。原创 2023-12-07 20:35:50 · 769 阅读 · 5 评论 -
Vue渲染MarkDown
node.js安装【支持npm命令】可以参考这篇文档 ↓。原创 2023-11-08 11:13:58 · 675 阅读 · 1 评论 -
node.js安装【支持npm命令】
我这边用的是vue2,对应下面这几个node.js的版本应该都行。不配置镜像可能会导致npm下载时间过长或者根本没法下载的情况。选好安装目录,下一步下一步一直点就行了。下载这个 .msi 文件。原创 2023-11-08 11:13:05 · 170 阅读 · 0 评论 -
Vue使用Echarts建立知识图谱
【代码】Vue使用Echarts建立知识图谱。原创 2023-10-19 11:19:06 · 1091 阅读 · 8 评论 -
Vue常用方法汇总【更新中】
https://blog.csdn.net/weixin_43721000/article/details/125017785https://blog.csdn.net/weixin_43721000/article/details/125527254https://blog.csdn.net/weixin_43721000/article/details/123684151https://blog.csdn.net/weixin_43721000/article/details/128629382http原创 2023-04-11 14:27:39 · 4281 阅读 · 65 评论 -
Vue父组件数据变化子组件不能及时响应的解决办法【watch监听】
针对子组件不跟随父组件的值进行更新的这个问题,根据父组件传入的是值还是对象,可以分成以下两种解决办法。原创 2023-01-17 16:25:57 · 7045 阅读 · 23 评论 -
使用electron将vue项目打包成exe
node.js 版本要在 17+建议使用 17.9.1 的 node 和 8.11.0 的 npmnode和npm的版本对应关系如下。原创 2023-01-09 20:18:27 · 1866 阅读 · 7 评论 -
FastApi+Vue实现WebSockets服务端推送
费老鼻子劲了main.js 导入 websocket 方法app.vue的 2.FastApi部分创建 /utils/WebSocketManager.py创建 /server.py三、测试启动vue项目,访问 http://127.0.0.1:8010/ 【根据vue具体启动路径决定,也可能不是8010端口】F12打开控制台可看到如下内容每五秒钟会打印一次心跳检测结果【前后端通过websocket完成一次信息传递与接收】打开python控制台,原创 2022-12-03 17:05:45 · 2114 阅读 · 5 评论 -
Vue 配置全局变量
文章目录1.创建config文件2.挂载到全局3.使用变量原创 2022-11-18 17:20:41 · 1453 阅读 · 15 评论 -
Vue input输入框卡死的解决办法
我把 vuex 全局变量绑定到 v-model 上,然后在页面挂载时通过代码修改 input 框中的内容,最后在页面上输入任意值 input 框就卡住了。原创 2022-09-16 16:56:32 · 1349 阅读 · 5 评论 -
Vue配置路径别名【多路径访问同一页面】
根路径下创建 vue.config.js 文件,内容如下。ps:别名可以配置多个,以字典形式补充添加。原创 2022-09-16 14:22:13 · 839 阅读 · 7 评论 -
Vue-router创建子路由的方法【路由嵌套】
路由嵌套原创 2022-06-29 20:05:32 · 897 阅读 · 4 评论 -
Vue使用axios发送请求并实现简单封装
二、配置main.js中加入如下内容原创 2022-06-29 18:53:40 · 1028 阅读 · 4 评论 -
Vue声明式路由导航和编程式路由导航的优缺点及实现方法
文章目录前言路由实现1.目标2.前置条件3.声明式路由导航实现<1>写路由组件<2>写路由文件<3>实现路由<4>测试4.编程式路由导航实现前言声明式路由导航直接写在html中,结构简单使用方便,但是只能放在<router-link>标签中使用,<router-link>标签会将路由转成<a>标签,通过点击跳转路由,因此局限性也非常大编程式路由导航需要写在js中,结构也不算复杂,优势在于非常灵活,不受固定原创 2022-05-28 22:12:02 · 6347 阅读 · 4 评论 -
VueRouter安装使用教程
文章目录前言一、安装插件二、引入依赖前言2022年2月7日以后,vue-router的默认版本更新为4了vue2 对应 vue-router3vue3 对应 vue-router4根据需求安装一、安装插件# vue2对应版本npm i vue-router@3# vue3对应版本npm i vue-router@4二、引入依赖main.js加入如下代码import VueRouter from 'vue-router'...原创 2022-05-28 21:41:37 · 3785 阅读 · 7 评论 -
在Docker中使用Nginx部署Vue项目
文章目录一、前置需求1.liunx环境2.安装Docker二、部署方法1.打包Vue项目2.Docker拉取Nginx镜像3.创建一个打包镜像的目录4.上传Vue项目5.编写Nginx配置文件6.编写Dockerfile7.创建镜像8.启动容器三、访问测试一、前置需求1.liunx环境本人用的 Centos72.安装Docker参考这篇文章https://blog.csdn.net/weixin_43721000/article/details/124237932二、部署方法1.打包Vu原创 2022-04-18 00:27:35 · 5582 阅读 · 7 评论 -
图片链接在img标签中无法加载的解决办法
文章目录一、问题描述二、解决办法三、结果四、补充一、问题描述img标签代码如下<img src="https://img3.doubanio.com/view/subject/s/public/s29449796.jpg">页面加载不出来,报403但是复制链接到浏览器中又可以访问二、解决办法在页面头部加入一个 meta 标签<meta name="referrer" content="no-referrer">三、结果四、补充好像还有一种方法就原创 2022-04-01 19:15:16 · 3881 阅读 · 4 评论 -
Vuex安装
文章目录一、注意事项1.前置条件2.版本依赖二、安装1.安装vuex2.创建 store/index.js 文件3.main.js 中引入 store/index.js一、注意事项1.前置条件安装Vuex之前需要先安装vuecli脚手架和node环境,也可以直接用HbuilderX打开一个vue项目,这样就环境和脚手架就都有了2.版本依赖vue2的项目使用vuex3,vue3的项目使用vuex4二、安装接下来都以vue2的项目为例1.安装vuex@后面指定版本号npm i vuex@原创 2022-03-23 15:45:24 · 3625 阅读 · 1 评论 -
Vue默认插槽、具名插槽、作用域插槽的定义及使用方法
文章目录应用场景三种插槽的定义使用方法1.默认插槽2.具名插槽3.作用域插槽应用场景插槽的作用是在子组件中某个位置插入父组件的自定义html结构和data数据三种插槽的定义插槽分为三种:默认插槽 具名插槽 作用域插槽1.默认插槽【定义:默认插槽是将父组件的结构和数据插入子组件中,默认插槽只有一个插入位置,要插入的html结构和data数据必须在父组件中,不过css可以在子组件中】【简述:将父组件的自定义html和data插入子组件的对应位置】【特点:父组件决定结构和数据】2.具名插槽原创 2022-03-21 13:18:32 · 2359 阅读 · 4 评论 -
Vue插件使用方法+elementUI插件引入案例
文章目录1.应用场景2.使用方法1.使用自定义插件1.创建js文件2.在 main.js 中引入自定义的js文件2.使用第三方插件【elementUI】1.安装node.js和vue-cli脚手架2.输入命令 npm i element-ui -S3.在 main.js 中引入 elementUI 插件1.应用场景为vue添加全局功能,比如添加全局的方法和属性、混入全局组件、添加全局资源(指令、过滤器、过渡等)、添加第三方的类库(element-ui等)2.使用方法1.使用自定义插件1.创建j原创 2022-03-20 18:05:18 · 2127 阅读 · 3 评论 -
Vue组件公用方法提取【mixin】
文章目录1.应用场景2.实现方法1.提取js共用方法文件2.引入3.注意事项1.应用场景多个组件共用一个方法时可以用 mixin 抽取到一个js文件中,作为共用方法2.实现方法1.提取js共用方法文件export const common = { // 组件共用属性 ---------------------------------- data() { return { age: 18 // 设置一个共用属性 } }, // -----------原创 2022-03-19 22:12:33 · 1612 阅读 · 5 评论 -
Vue 父子组件传值方法
文章目录1.简单声明接收2.接收数据的同时进行 类型限制3.接收数据的同时对 数据类型、必要性、默认值 进行限制父组件代码↓<template> <div> <div>父组件</div> <Student :name="name" :age="age"></Student> </div></template><script> // 引入组件 import Student f原创 2022-03-19 19:22:08 · 2974 阅读 · 3 评论 -
Vue入门(一)—— vue-cli脚手架安装
1.安装node.jswindows用户直接去node官方网站(国内)下载后,下一步下一步下一步就安装完了,并且安装的时候自动配置好了npm命令的路径。2.npm换源否则安装太慢了,执行命令:npm install express --registry=https://registry.npm.taobao.org此处更换成了淘宝源,还有其他的国内源,如下:淘宝np...原创 2020-02-28 19:40:14 · 3468 阅读 · 3 评论 -
Vue入门(二)—— vue项目创建
标题原创 2020-02-28 20:06:32 · 3433 阅读 · 7 评论 -
Vue入门(三)—— vue项目初始化配置
使用vscode或hbuilderx等ide打开创建好的项目:结构如下在src中:app.vue 是所有组件的跟组件main.js 是项目的打包入口文件router.js 是路由配置文件上面都是废话,了解一下就行,接下来开始自定义配置。一.启动项目时采用指定端口,并自动打开浏览器1.在项目根目录创建文件vue.config.js2.写入如下代码:module.exports ...原创 2020-02-29 00:54:07 · 4036 阅读 · 6 评论 -
Vue入门(四)—— 配置app.vue根组件的全局css样式
1.一般的做法是在src/assets目录下新建目录css,在css目录中新建文件global.css,内容如下:/* 全局样式表 */html, body, #app { height: 100%; margin: 0; padding: 0;}2.打开main.js添加如下内容:// 自定义全局cssimport './assets/css/global.css'这样你...原创 2020-02-29 12:19:14 · 8370 阅读 · 3 评论 -
Vue入门(五)—— 创建主页,并配置路由
1.在component目录下新建home.vue,代码如下:<template> <div> 主页 </div></template><script>export default {}</script><style lang="less" scoped></style&g...原创 2020-02-29 12:42:02 · 3813 阅读 · 5 评论 -
Vue入门(六)—— 路由转跳
路由转跳的方法有两种:1.编程式在方法中调用// 转跳至/homethis.$router.push('/home')// 前进一步this.$router.go(1)// 后退一步this.$router.go(-1)// 跳转至/user,不保留历史记录this.$router.replace{path:'/user'}// 转跳并传参,相当于post请求,页面跳转时参数...原创 2020-02-29 13:10:17 · 3360 阅读 · 5 评论 -
Vue入门(七)—— 导航守卫
举个简单的例子,用代码说明const router = new VueRouter({ routes})// 导航守卫 start// 挂载导航守卫router.beforeEach( (to, from, next) => { // to 将要访问的路径 // from 从哪个路径跳转而来 // next 是一个函数,表示放行,有两个用法:1....原创 2020-02-29 13:30:26 · 3225 阅读 · 5 评论 -
Vue入门(八)—— 配置axios全局请求根路径,并向后端发送请求
1.查看项目是否包含axios,如果没有就安装依赖,打开图形界面工具,在“运行依赖”中搜索 axios 并安装安装完毕后继续2.打开main.js完成三步:(1)导包(2)配置全局请求根路径(3)挂载到vue// axiosimport axios from 'axios'// 配置请求根路径axios.defaults.baseURL = 'http://127.0.0.1:8...原创 2020-02-29 14:18:58 · 6688 阅读 · 3 评论 -
Vue入门(九)—— 配置字体图标
1.首先需要下载字体图标,这里是阿里图标库地址https://www.iconfont.cn/找到合适的图标下载2.在项目目录src/assets下新建font目录,将下载好的文件放到这里3.打开main.js导入字体图标// 字体图标import './assets/font/iconfont.css'4.使用字体图标<div class="iconfont icon-ad...原创 2020-02-29 14:37:44 · 3302 阅读 · 7 评论 -
Vue入门(十)—— session缓存
1.添加缓存:window.sessionStorage.setItem('key', 'value')2.获取缓存window.sessionStorage.getItem('key');2.删除缓存// 删除指定缓存window.sessionStorage.removeItem('key');// 清空缓存window.sessionStorage.clear();...原创 2020-02-29 14:44:15 · 4010 阅读 · 8 评论 -
vue基础
目录1.子组件props初始化方式1.子组件props初始化方式props: { // 单类型 propA: Number, // 多个可能的类型 propB: [String, Number], // 必填的字符串 propC: { type: String, required: true }, // 带有默认值的数字 propD: { type: Number, default: 100 }, // 带有默认值的对象 propE: { type: Obj原创 2020-05-21 14:23:10 · 4079 阅读 · 9 评论