vue
关注
分享
扫一扫
文章平均质量分 66
悟世君子
发上等愿，结中等缘，享下等福 择高处立，寻平处坐，向宽处行
展开
-
vue3 ts setup 组合式API 使用教程
vue3中新增了组合式API，本文讲解组合式API setup 的使用。原创 2024-03-04 15:31:19 · 1485 阅读 · 0 评论 -
vue 依赖注入使用教程
为什么会出现依赖注入呢？其实它是要解决 Prop 逐级透传问题Prop 逐级透传问题，即通常情况下，当我们需要从父组件向子组件传递数据时，会使用 props，如果只是父传子，这样层级不深的结构，是比较简单的；如果是层级非常深，祖太爷、太爷、爷、父、子、孙、重孙组件......，这样多层级嵌套的组件，形成了一颗巨大的组件树，此时，如果重孙组件需要祖太爷组件中的部分数据，在这种情况下，如果仅使用 props 则必须将其沿着组件链逐级传递下去，这会非常麻烦。原创 2023-02-28 13:51:27 · 3444 阅读 · 0 评论 -
vue3 setup 使用教程
vue3 中新增了 setup，它的出现是为了解决组件内容庞大后，理解和维护组件变得困难的问题。即 vue 中 data、computed、methods、watch 等内容非常多以后，同一业务逻辑的 data 中的数据和 methods 中的方法在 vue 文件中“相隔甚远”，看代码时，经常需要根据 data 中的数据去搜索找到对应的 methods 方法，上下跳跃查看代码，非常不方便。而在 setup 中，则可以把 data 中的数据和 methods 方法写在相临的位置，方便查看和维护。本文详细介绍原创 2022-02-18 17:32:50 · 21148 阅读 · 10 评论 -
vue 动态组件使用教程
vue 动态组件的使用，下面进行介绍1、基本使用新建组件 Article.vue<template> <div> <p>黄州东南三十里为沙湖,亦曰螺师店。予买田其间,因往相田得疾。</p> <p>闻麻桥人庞安常善医而聋。遂往求疗。</p> <p>安常虽聋,而颖悟绝人,以纸画字,书不数字,辄深了人意。</p> <p&原创 2022-02-16 11:15:14 · 4216 阅读 · 1 评论 -
vue 插槽 slot 使用教程
在 vue 中使用插槽 slot，内容如下1、直接使用新建组件 Article<template> <div> 日期:2022-01-15 <slot></slot> </div></template>新建 Learn，并在 Learn 中使用 ArticleLearn.vue 和Article.vue 在同一文件夹下<template> .原创 2022-02-15 19:26:39 · 3667 阅读 · 0 评论 -
vue props中定义多属性对象
vue 在 props 中定义多属性对象，语法如下例如定义 formValidate 对象，且 formValidate 中含有属性 city 和 name，默认 city 和 name 都是空formValidate: { type: Object, default: ()=>{ return { city: '', name: '' } }}测试下面以View UI （i原创 2021-10-19 18:49:05 · 4195 阅读 · 0 评论 -
vue3 配置路由
使用 vue3 配置路由，步骤如下1、安装路由npm install vue-router@4原创 2021-06-10 20:36:22 · 13218 阅读 · 29 评论 -
创建 vue3 项目
创建 vue3 项目，需要安装 @vue/cli，如果之前的电脑里安装了 vue-cli，可以选择卸载 vue-cli 或者同时保留vue-cli 和 @vue/cli，如果想同时保留@vue/cli原创 2021-06-10 14:31:28 · 503 阅读 · 0 评论 -
报错 找不到 core-js 下的es6.regexp.constructor
报错：Error: Cannot find module 'core-js/modules/es6.regexp.constructor详细如下图报错原因：core-js 没有安装成功解决办法：单独安装一次执行cnpm install core-js@2或npm install core-js@2原创 2020-06-04 19:54:28 · 1049 阅读 · 0 评论 -
vue 前端通过代理解决跨域问题
前后端分离进行项目开发，跨域问题不可避免，解决方式有多种，可以后端解决，也可以前端解决，本文介绍前端如何解决跨域问题vue前端解决跨域问题，可以通过 webpack的代理进行解决首先找到设置代理的地方，在项目的 config文件夹下的 index.js文件里，找到proxyTable 设置配置如下proxyTable: { '/api':{ ...原创 2020-03-22 15:14:05 · 2803 阅读 · 0 评论 -
vuex 使用教程
vuex 介绍：官网解释，Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化在 vue 项目中使用vuex，步骤如下1、项目安装 vuexnpm install vuex --save或cnpm install vuex --save2、创建一个 store...原创 2020-02-10 21:14:52 · 1200 阅读 · 0 评论 -
vue 项目添加滚动监听事件
代码如下<template> <div> <p v-for="index in 100" :key="index">滚动监听</p> </div></template><script>export default { methods: { scro...原创 2019-12-26 11:09:34 · 1809 阅读 · 0 评论 -
name: "NavigationDuplicated", message: "Navigating to current location ("/") is not allowed", stack:
vue-router 报错name: "NavigationDuplicated", message: "Navigating to current location ("/") is not allowed", stack: "Error报错详细内容如下log.js?4244:23 [HMR] Waiting for update signal from WDS...vue-rou...原创 2019-12-25 22:32:28 · 2354 阅读 · 0 评论 -
Avoid using non-primitive value as key, use string/number value instead.
vue 项目使用 v-for渲染时报错：Avoid using non-primitive value as key, use string/number value instead.报错原因：避免使用非基本值作为键，而是使用字符串/数字值；即不要用对象或是数组作为 key，用 string 或 number 作为 key报错代码当 item为对象时，就会出现这种报错，将其改...原创 2019-12-16 10:19:41 · 2606 阅读 · 0 评论 -
谷歌浏览器安装 vue 调试工具 vue devtools
谷歌浏览器安装 vue 调试插件 vue devtools，对于调试 vue 项目非常方便，本文介绍如何安装1、在 github 下载vue devtools这里可以使用 git 克隆git clone https://github.com/vuejs/vue-devtools或者直接到网站下载vue devtools 插件地址：https://github.com...原创 2019-12-10 22:15:22 · 1260 阅读 · 0 评论 -
报错 'vue' 不是内部或外部命令，也不是可运行的程序或批处理文件
报错如下图报错原因：vue.cmd 没有配置环境变量解决办法：找到vue.cmd 文件所在的文件夹位置，并配置环境变量，即可这里vue.cmd 文件在D:\system\nvm\v10.15.3\node_global 路径将D:\system\nvm\v10.15.3\node_global 路径添加环境变量新建系统环境变量 VUE = D:\sys...原创 2019-05-14 10:12:42 · 10853 阅读 · 0 评论 -
Use eslint-disable-next-line to ignore the next line. Use eslint-disable to ignore all warn
报错内容error: Too many blank lines at the end of file. Max of 0 allowed (no-multiple-empty-lines) at src\view\product\index.vue:107:1: 105 | } 106 | </script>> 107 | | ^ 108 |...原创 2019-05-22 22:54:29 · 9175 阅读 · 4 评论 -
vue 项目中使用 jquery
在 vue 项目中使用jquery，具体步骤如下1、npm 安装 jquery命令如下，@ 后边指定安装的 jquery 版本npm install jquery@3.2.1不加 @ 会安装最新版本npm install jquery命令执行成功后，会在package.json 文件中自动生成"jquery": "^3.2.1",2、在 web...原创 2019-06-05 12:17:36 · 2825 阅读 · 0 评论 -
vue 全局使用 axios
vue 全局使用 axios，可以直接在 main.js 中引入axios；也可以对axios 进行封装，封装之后再引入到 main.js 中。总之要想全局使用，就得引入到 main.js 中，才行1、安装 axiosnpm install axios --save2、直接引入到 main.js 中，代码如下// 引入axiosimport axios fro...原创 2019-05-29 11:51:06 · 1743 阅读 · 0 评论 -
vue 父子组件通信
vue 父子组件通信，如下图父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息子组件的 props 选项能够接收来自父组件数据，但由于 props 是单向绑定的，所以只能是父组件向子组件传递，不能子组件向父组件传递子组件通过触发事件来通知父组件改变数据代码示例如下首先定义父组件parent-component.vue<...原创 2019-05-29 21:46:35 · 392 阅读 · 0 评论 -
vue 实时监听表单数据
vue 实时监听表单数据，代码如下<template> <div> <input type="text" v-model="name"> </div></template><script> export default { data (){ r...原创 2019-05-29 21:57:13 · 6129 阅读 · 1 评论 -
vue-cli 创建 vue 2.X 项目
1、全局安装 vue-clinpm install -g vue-cli2、创建存放项目的工作区文件夹 project3、在 project 文件夹打开 cmd 窗口执行如下命令，创建名为 finance 的项目vue init webpack financevue-cli 会以交互的方式问你是否需要安装相关插件，如 vue-router，ESLint 等，这里可根...原创 2019-06-17 14:15:35 · 7251 阅读 · 0 评论 -
vue 项目中使用 iview
1、安装 iviewnpm install iview --save2、在 main.js 中进行配置将 iview 引入mian.js ，再 Vue.use(iView)import Vue from 'vue';import VueRouter from 'vue-router';import App from 'components/app.vue';import ...原创 2019-06-17 14:26:03 · 1164 阅读 · 0 评论 -
vue 项目报错 You may use special comments to disable some warnings.
报错如下解决办法：注释掉eslint 规则部分代码原创 2019-06-17 14:50:11 · 8348 阅读 · 1 评论 -
vue 项目报错 !!vue-style-loader!css-loader?{"sourceMap":true}!../..
报错具体内容：报错原因：项目中 style 使用了less-loader解决办法：执行如下命令安装less-loadernpm install less less-loader --save-dev原创 2019-06-17 18:26:08 · 5862 阅读 · 1 评论 -
vue 处理日期格式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/vue.min.js" ><...原创 2019-07-03 17:41:08 · 3400 阅读 · 0 评论 -
axios 配置公共请求前缀
axios 配置公共请求前缀，使用 axios 的baseURL 属性axios.defaults.baseURL = 'http://localhost/'原创 2019-09-01 19:56:53 · 5466 阅读 · 0 评论 -
vue遍历二维数组
代码如下:&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt原创 2018-08-16 16:44:58 · 16276 阅读 · 0 评论