vue前端专栏
关注
分享
扫一扫
学习vue的点点滴滴
qq_37591637
2018/9/19开通博客，遇事录
展开
-
vue3 页面引入组件
注意这里的 name: "Rabbitmq"，要与下面引用的时候一致。坑二、路径不要写错了。原创 2024-07-18 10:10:58 · 495 阅读 · 0 评论 -
vue 实现下拉框的数据是树状结构
【代码】vue 实现下拉框的数据是树状结构。原创 2024-07-16 16:22:11 · 499 阅读 · 0 评论 -
error @vitejs/plugin-vue-jsx@3.1.0: The engine “node“ is incompatible with this module. Expected ver
升级node版本，不行，因为还有其他的依赖需要更高的版本。说我的node版本太低了，需要升高版本。原创 2024-06-05 13:35:28 · 364 阅读 · 0 评论 -
vue.js vue v-for循环遍历如何动态绑定id
html页面的代码如下<body> <!-- 返回的按钮 --> <div id="allli"><ul v-for="(item,index) in sites"><li>{{item.name}}</li><li :id="step(index)" ><img :id="st...原创 2019-04-07 17:58:18 · 16215 阅读 · 1 评论 -
vue将ajax返回的json数据循环遍历到html页面上
前提1、下载开发版本的vue.js，这样可以看到报什么错误，生产版本是不报错误的2、ajax作为第三方接口，可以返回后台的数据要点vue只要在script里面实例化一次就可以了以下是本人开发项目实践成功的代码js部分讲解实例化vue,var ap=new Vue({ el: '#allpost', data: { sites:[] }, ...原创 2019-04-02 07:58:58 · 17908 阅读 · 2 评论 -
[Vue warn]: Error compiling template: Cannot use v-for on stateful component root element because it
错误信息如下[Vue warn]: Error compiling template: Cannot use v-for on stateful component root element because it renders multiple elements. 1 | <div id="mpost" v-for="s in sites"> | ^^^^^^^^^^^^^^^^...原创 2019-04-02 07:42:49 · 2849 阅读 · 0 评论 -
[Vue warn]: Error in created hook: "TypeError: dom is null"
报错信息如下错误原因就是dom（一些html标签）还没有渲染，导致dom是null的mouted是html渲染以后的方法，只能说你的图表节点如echarts还没有渲染就调用了mouted里面的方法了；...原创 2019-09-21 16:32:56 · 4937 阅读 · 1 评论 -
Vue取消eslint语法限制
我的qq 2038373094由于ESlint的语法要求太苛刻了，总是报一大堆错误；但是功能是没有影响的，所以最好关闭eslint语法限制 解决方案在build/webpack.base.conf.js文件中，注释或者删除掉：module->rules中有关eslint的规则...原创 2019-05-09 08:57:18 · 3984 阅读 · 0 评论 -
Module build failed: Error: Failed to load plugin html: Cannot find module 'eslint-plugin-html'
报错信息如下解决方案原创 2019-05-09 07:42:34 · 7013 阅读 · 0 评论 -
vscode ESLint格式不正确老是报错 more than 1 blank line not allowed
报错背景 ESLint格式太严谨，老是报错 ！解决方案：让ESLint自动纠正格式1、安装ESLint2、安装vetur3、package.json里面有eslint配置参数4、.eslintrc.js文件配置如下module.exports = { root: true, parser: 'babel-eslint', ...原创 2019-05-09 07:35:12 · 6511 阅读 · 4 评论 -
vue v-for循环回来的数据动态绑定id
v-for循环遍历html页面的时候，希望绑定的id可以是step0,step1,step2,step3这样的，如下图所示做法如下html页面1、step(index)是一个函数，返回"step"+index2、<div:id="">是一种vue简化的写法，不然会有警告 <div id="box"><div v-for="(value...原创 2019-04-05 10:50:11 · 3994 阅读 · 0 评论 -
[HPM] Error occurred while trying to proxy request //dgs/schart.action from 192.168.1.101:8080 to ht
报错信息如下报错原因config文件夹里面的inedx.js文件的proxyTable配置有问题解决方案改成localhost原创 2019-09-23 08:40:31 · 4076 阅读 · 1 评论 -
vue中v-model是干嘛用的？
格式<input v-model="value1"/>什么意思？1、value1必须是data里面定义的数据；如下radio1一样2、如果value1初始化的时候是 12，那么输入框里面显示的就是123、当你在输入框里面输入23的时候，这个时候value1的值也变成了23；4、value1的值影响input；同样input也影响value1的值；...原创 2019-09-20 09:12:31 · 8288 阅读 · 1 评论 -
vue项目中点击事件的写法
在jsp或者是html里面，添加点击事件的代码如下onclick="getDate()"<button onclick="getDate()">搜索</button>在vue项目中，添加点击事件的代码如下@click="方法名()"<el-button type="primary" icon="el-icon-search" @click...原创 2019-09-20 09:03:20 · 15680 阅读 · 1 评论 -
vue项目通过点击按钮动态增加组件，并且给组件里面的参数传值
第一种、父子组件都在一个文件里面效果如下代码如下 <!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue 测试实例 - 菜鸟教程(runoob.com)</title><script src="https://cdn.static...原创 2019-05-14 09:40:32 · 8709 阅读 · 0 评论 -
vue 通过按钮点击动态添加组件
效果如下 思路 v-for循环+数组组件第一步、定义一个组件，这个组件里面是一个html代码Vue.component('dom', { template: '<div>我是一个组件</div>'})第二步、在页面上用v-for循环遍历一个空的数组第三步、在这个里面放一个定义的组件<div v-for="(d,index)...原创 2019-05-14 08:28:14 · 43690 阅读 · 5 评论 -
vue 通过按钮动态添加输入框
效果图如下 思路：1、有一个数组counter,是空的2、在页面上循环遍历这个数组（当然页面上显示的肯定是什么都没有）3、点击按钮，就会添加元素进去...原创 2019-05-14 08:14:15 · 11785 阅读 · 1 评论 -
VScode vue工程项目入门小白必看
我的qq 2038373094前提nodejs+webpack+vue-cli脚手架 都搭建好了 https://blog.csdn.net/qq_37591637/article/details/89944336WORK是项目的名称build里面是webpack的文件config是配置项目的一些配置信息node_modules 是nodejs（里面有vue...原创 2019-05-09 10:46:27 · 2411 阅读 · 0 评论 -
vue 如何让img标签的src属性动态绑定
正确显示如下 <img :src="s.userlogo" />原创 2019-03-29 18:58:51 · 3129 阅读 · 0 评论 -
vue项目把鼠标放在上面显示消息
需求如下1、vue项目（一般都用到了element-ui框架）2、把鼠标放在上面显示消息3、这个消息框要美化实现的效果方案一、使用v-bind:title=""1、如果是方法赋值：v-bind:title="{{app}}" <div class="item" style="background-color:#ce72ef" v-bind:title="{{...原创 2019-09-24 09:43:22 · 15655 阅读 · 0 评论 -
vue Element-ui运用table组件并且使用用v-for，结果数据不显示
错误vue中运用了Element-ui组件table,同时使用了v-for="(item,index) in mydata"错误原因table循环遍历的方式是如下所示的，有自己的规则要么使用如下的遍历方式如果你的tableData是如下所示，那么不需要prop怎么来循环遍历呢？使用scope.row获取元素就可以了要么使用以下的自定义遍历方式&l...原创 2019-09-16 15:30:14 · 34880 阅读 · 2 评论 -
vue项目设置文本文字从右边开始充满
css样式如下.ms{text-align: right;}原创 2019-05-14 10:45:07 · 7935 阅读 · 0 评论 -
Vue项目+ssh框架实现在线聊天功能
我的qq 2038373094效果图如下 核心部分websocket编程向后台发送消息 <template><el-container> <el-header > </el-header> <el-main> <div class="cht"> <div v-f...原创 2019-05-14 14:14:59 · 2362 阅读 · 1 评论 -
一个html页面如何引入多个element ui组件
index.html页面<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>主页<...原创 2019-05-09 15:45:32 · 16581 阅读 · 0 评论 -
Do not use built-in or reserved HTML elements as component id: head
vue项目在使用组件的时候报了如下错误Do not use built-in or reserved HTML elements as component id: head错误代码如下错误原因head是特殊关键字，在components里面不能被使用解决方案换一个其他的名字如hd就可以了...原创 2019-05-09 11:38:31 · 10731 阅读 · 0 评论 -
SyntaxError: export declarations may only appear at top level of a module
我的qq 2038373094错误背景1、我直接复制vue element官网的代码到了.js文件里面2、项目是一个文件夹下面有html有js文件我是vue的初学者，刚刚接触vue，看了官方的模板，然后复制了文件上传的代码，但是报错了错误原因1、官网的代码应该放在.vue后缀名的文件里面2、.vue文件应该打包成.js文件里面3、最后.js文件在html...原创 2019-05-09 11:17:11 · 14079 阅读 · 1 评论 -
vue项目怎么把方法返回值或者变量值作为div标签的值
知识点主要用到的标签是v-html=""注意的点如果是变量 v-html="变量名"如果是方法 v-html="方法名(有无参数)"应用如下1、变量赋值2、方法赋值原创 2019-09-24 09:54:57 · 14097 阅读 · 0 评论 -
Vue项目实现vue element组件走马灯效果
我的qq 2038373094效果如下（由于不支持动态图，我就截图了）除了实现走马灯的效果1、自适应插入图片的高度2、距离左侧20%;.vue文件如下<template> <el-carousel :interval="5000" arrow="always" class="d_jump" :height="imgHeight+'px...原创 2019-05-10 09:08:02 · 6155 阅读 · 1 评论 -
vue项目如何去除地址栏的http://localhost:8080/#/中的/#/
解决方案1、打开src下面的router文件夹里面的index.js或者是router.js2、把mode模式改成history就可以了3、不影响任何功能export default new Router({mode: 'history',...原创 2019-05-10 09:08:10 · 10718 阅读 · 0 评论 -
vue实现鼠标移入移出显示或者隐藏div
我的qq 2038373094效果如下html代码<li class="dropdown" v-else @mouseenter="enter" @mouseleave="leave"><a> {{user}} </a> <ul v-show="seen" id="others"> <li>...原创 2019-05-07 14:11:00 · 18500 阅读 · 0 评论 -
Tip: built files are meant to be served over an HTTP server. Opening index.html over file:// won't
vue-cli项目打包报错Tip: built files are meant to be served over an HTTP server. Opening index.html over file:// won't work.报错原因因为vue-cli的默认配置中, publishPath是用绝对目录, 所以dist文件夹里的文件必须放在服务器的根目录, 如果你想本地打开的...原创 2019-09-24 11:38:58 · 24144 阅读 · 10 评论 -
vue文件字体颜色都变成黑白的
解决方案安装vetur插件就可以了原创 2019-09-12 15:48:13 · 5802 阅读 · 2 评论 -
vue element组件之步骤条组件的应用
效果如下代码如下<template> <div class="body"> <Head/> <div class="tbody"> <el-steps :active="active" finish-status="success"> <el-step title="个人信息">&...原创 2019-05-11 13:26:16 · 3854 阅读 · 0 评论 -
vue项目如何去除路由跳转的链接下划线
问题描述解决方案原创 2019-05-11 12:14:13 · 6170 阅读 · 1 评论 -
vue 使用element组件 实现用户的注册登录功能以及根据登录状态显示或隐藏状态栏的相关菜单
我的qq 2038373094效果如下vue项目环境搭建篇 搭建vue项目{1、nodejs2、vue-cli脚手架3、webpack打包}详细教程看 https://blog.csdn.net/qq_37591637/article/details/89944336初级入门篇对vue项目目录都不懂的人：VScode vue工程项目入门小白...原创 2019-05-11 11:37:11 · 8377 阅读 · 1 评论 -
vue路由的跳转 this is undefined
我的qq 2038373094报错信息this is undefined解决方案function会改变this指向并指向全局window,如果不改变this指向 ，这里要使用箭头函数把function 改成=>...原创 2019-05-11 09:43:31 · 4604 阅读 · 0 评论 -
vue element 如何把校验之后的表单数据通过ajax传给后台
我的qq 2038373094前提axios 能够让vue前端和你的服务器后台可以连接上，前后台可以传输静态的数据vue实战——vue中发送AJAX请求 https://blog.csdn.net/qq_37591637/article/details/90047745表单的html代码 <el-form :model="ruleForm" status-...原创 2019-05-10 11:57:33 · 7192 阅读 · 0 评论 -
Vue项目 axios post方法传参后台接收不到参数
我的qq 2038373094问题描述1、页面上显示的参数是有值的2、但是后台接受的参数是null解决方案1、采用 let param = new URLSearchParams()把参数封装在param里面param.append('username', 'admin'),param.append('password', 'admin') ,...原创 2019-05-10 10:18:52 · 13472 阅读 · 3 评论 -
Error in v-on handler: "TypeError: __WEBPACK_IMPORTED_MODULE_1_axois___default.a.post is not a funct
报错信息如下解决方案加this原创 2019-05-10 08:39:26 · 13432 阅读 · 0 评论 -
vue clic项目实现把后台数据库的数据循环遍历在页面上
我的qq 2038373094数据库里面的数据 页面效果 我是一名全栈工程师 后台：java的ssh框架（甲方要求）前台：vue框架vue文件<template><div class="auser"> <!-- 头部 --> <adn/> <div class="datas"&g...原创 2019-05-12 15:05:55 · 4215 阅读 · 0 评论