vue
longfei815
前端,python技术分享,学习,共同进步!
展开
-
vue框架中components下面的组件显示不出来
如果你的components下面的组件内容显示不出来,请仔细对照上面图片的位置是否正确。vue框架中components下面的组件显现出来。原创 2022-11-23 14:39:26 · 1306 阅读 · 0 评论 -
Vue中提示框慢慢显示和慢慢消失方法
用transition标签把需要慢慢显示的组件包起来。Vue中提示框慢慢显示和慢慢消失方法。原创 2022-09-24 21:48:59 · 2099 阅读 · 0 评论 -
Vue项目中手机号码验证
输入错误的号码,弹出提示窗口!Vue项目中手机号码验证。原创 2022-09-24 14:55:37 · 981 阅读 · 0 评论 -
Vue中获取手机验证码倒计时的写法
Vue中获取手机验证码倒计时的写法:点击方法:命名变量:使用方法:原创 2022-09-23 21:03:50 · 77 阅读 · 0 评论 -
Vue中关于重复点击同一个路由出现的报错问题解决
【代码】关于重复点击同一个路由出现的报错问题解决。原创 2022-09-23 20:25:42 · 303 阅读 · 0 评论 -
Vuex的使用方法——点击登录按钮弹出登录对话框
Vuex的使用方法——点击登录按钮弹出登录对话框。原创 2022-09-23 17:35:23 · 756 阅读 · 0 评论 -
Vue项目预览
项目目录:main.jsApp.vueHome.vueGood.vueUser.vueError.vueHeader.vueCrumb.vueLogin.vueToast.vueCart.vueList.vueglobal.css.env.dev.env.prodREADME.md。原创 2022-09-20 11:01:36 · 299 阅读 · 0 评论 -
Vue中全局导航守卫和组件内守卫
Vue中全局导航守卫。原创 2022-09-16 15:30:21 · 165 阅读 · 0 评论 -
190-Vue中环境变量的配置
比如我现在需要production环境,就执行 npm run production。总而言之就是,你需要哪个环境变量,就 【npm run 对应的环境变量】 就完事了!另外需要在vue.config.js里面配置一下代理:(如果有代理的话)在开发的时候一般会有是三个环境:开发环境 测试环境 线上环境。在package.json中添加不同环境对应的执行语句。VUE_APP_BASE_URL=对应的环境地址。首页你需要哪个环境,就执行哪个环境的命令语句。VUE_APP_LI_SI=“注备名称”原创 2022-08-22 11:42:25 · 614 阅读 · 0 评论 -
189-Vue2中修改数组单个元素的问题
189-Vue2中修改数组单个元素的问题。原创 2022-08-20 17:42:10 · 278 阅读 · 0 评论 -
188-Vue中$nextTick的两种格式——获取标签属性
188-Vue中$nextTick的两种格式——获取标签属性。原创 2022-08-20 17:17:17 · 132 阅读 · 0 评论 -
185-Vue中Axios的使用方法——get和post携带参数方法——请求数据并进行渲染
前端首先需要安装axios插件:npm i axios。前端通过命令:npm run serve 启动项目。185-Vue中Axios的使用方法。后端数据如下:app.js代码。原创 2022-08-19 16:00:53 · 1304 阅读 · 0 评论 -
184-Vue中图片资源导入方式
但这里记住,**在模板中,背景图不可以使用相对路径直接引入**,只能通过。对于一张图片而言,我可以直接src引入相对路径,我还可以使用模块化的方。式引入,无论是require,还是import都可以。184-Vue中图片资源导入方式。1、src的相对路径和@写法,3、require写法。2、import写法。原创 2022-08-19 15:45:57 · 1694 阅读 · 0 评论 -
183-Vue中图片的引入——Axios(重点)——$nextTick——修改数组元素的解决方案——环境变量
185-Vue中图片的引入——Axios(重点)——$nextTick——修改数组元素的解决方案——环境变量原创 2022-08-19 10:46:27 · 141 阅读 · 0 评论 -
180-Vue路由实例——tabbar路由跳转——路由嵌套
其它的四个组件,类同,只不过是,把template标签里面的文字,分别写为:分类,购物车,我的页面,404。router/index.js代码:这里设置路由跳转路径。此处设置的有嵌套路由。180-Vue路由实例——tabbar路由跳转——路由嵌套。最终的效果在最上面。...原创 2022-08-16 14:53:33 · 1159 阅读 · 0 评论 -
170-Vue-router介绍
170-Vue-router介绍。原创 2022-08-15 17:13:52 · 102 阅读 · 0 评论 -
168-Vue中vuex里面按照功能模块化最后一次拆分
分别拆分成了四个文件:state.js getters.js mutations.js actions.js。这篇文章只是将下面的各个功能进一步拆分成各个文件:(这是拆分前的)168-Vue中vuex里面按照功能模块化最后一次拆分。原创 2022-08-14 17:20:50 · 168 阅读 · 0 评论 -
166-Vuex数据按功能模块化
166-Vuex数据按功能模块化,功能还是一样,同步按钮加异步按钮:首先看目录:没有模块化之前,代码是在store/index.js里面写着:模块化之后,代码在store/chanNum/index.js里面写着:而store/index.js代码则改写成:模块化之前,组件里面,数据的调用方法:模块化之后的调用方法:最终可以达到同样的效果:...原创 2022-08-14 16:33:06 · 125 阅读 · 0 评论 -
Vuex中commit和dispatch的区别
Vuex中commit和dispatch的区别原创 2022-07-26 10:26:54 · 1002 阅读 · 0 评论 -
前端框架vue项目——结构文件介绍——项目运行流程
用vue和ue-cli搭建的前端项目是很多企业项目的选择,所以了解项目的结构和项目如何运行是非常有必要的,会给我们平时的工作带来很大的帮助。main.js是我们的入口文件,整个项目工程入口,用于全局配置,主要作用是初始化vue实例并使用需要的插件。......原创 2022-07-16 17:27:56 · 1917 阅读 · 0 评论 -
npm ERR! code EEXIST 报错!npm install -g @vue/cli报错!
删除C\Users\**\AppData\Roaming下的npm和npm-cache文件夹。后来我查看了,npm的版本,发现,这个版本不支持最新版的nodejs-16.15.1。再次执行[email protected],安装成功了!然后想着,卸载了,再重新安装,但是同样也是报错,卸载不了!接着,我安装Npm-6.14.14也报错。网上找了,很多方法,试了,都没有用。接下来再安装vue-cli,成功了!如果觉得有用,请点赞,收藏,加关注!安装了几遍,都是这样报错。这中间走了不少弯路。...原创 2022-07-16 15:11:20 · 3240 阅读 · 0 评论 -
vscode 新建自定义代码段——省去频繁敲初始代码的烦恼!
vscode 新建自定义代码段——省去频繁敲初始代码的烦恼!然后按照下图操作: 点击:新建全局代码片段文件,回车在输入框里面输入:hvm.json。hvm这是文件名,可以自己定义,后缀一定是.json。然后再回车,进入下一步:全选,清除里面的所有内容,把下面代码粘贴进去: 如下图: 然后关闭即可。新建test.html文件:直接输入:hv回车即可输入初始代码。 省去了频繁输入出始什的烦恼!...原创 2022-06-19 16:22:51 · 1686 阅读 · 4 评论 -
13-v-model指令-双向数据绑定
v-model怎么使用? 需要配合表单使用。用户在输入数据的时候,相当于在修改数据里面的txtVal.也就是拿到txtVal,就是拿到用户输入的值。原创 2022-06-16 11:52:28 · 67 阅读 · 0 评论 -
12-v-for的应用
item 是数组里的每一个元素,在这里是对象!原创 2022-06-16 10:14:47 · 47 阅读 · 0 评论 -
09=v-if和v-show指令使用方法
v-if的值为true和false,决定其所在的标签是否可以显示。原创 2022-06-15 11:41:09 · 60 阅读 · 0 评论 -
10-v-if指令使用-点击收藏和取消收藏的实现
10-v-if指令使用-点击收藏和取消收藏的实现原创 2022-06-15 11:30:45 · 701 阅读 · 0 评论 -
Vue开发环境 + Express后端服务实现前后端分离
一、介绍Express框架是一个基于node.js的web应用框架,能够帮你创建一个从前端到后端功能完整的网站;Vue是一个流行的前端框架,主要是用来构建用户界面的,并且具有组件化,响应式等特点;所以理解为 express负责后端,vue负责前端,它俩之间使用HTTP来进行数据交换。二、开始搭建新建文件夹Express_Vue.在终商打开后端 - express环境搭建1. 安装 express框架npm install -g express2. ...原创 2022-05-23 11:44:08 · 5138 阅读 · 5 评论 -
vue中express搭建的node服务器接口
首先,新建文件夹test_api_2,进入文件夹,安装express。如下图所示:在文件夹在我们创建自己的express文件夹执行命令express --view=ejs mynodeExpress按照提示进入mynodeExpress文件夹下载依赖包 npm i文件目录为:bin下面的www是我们的执行node服务入口文件node|_modules是依赖包 比如fs板块 cookice-parser body-parser模块包public是存放静态文件的 ...原创 2022-05-20 11:03:40 · 855 阅读 · 0 评论 -
vue使用mock进行后端数据模拟
我们从头开始,教你一步一步使用mock进行后端数据模拟。1、首先我们创建vue项目:通过vue create test_mock命令:我们这里选择第三个:Manually select features,回车这里通过键盘上的上下键上下移动,通过空格键选择。我们选择Babel,Router, Vuex这三个。这里选择3.x 回车。这里选择Y,回车。这里选择默认回车。这里还是n,回车。最后项目创建完成。我们通过cd test_mock进入...原创 2022-04-18 16:33:36 · 2086 阅读 · 5 评论 -
Vue全家桶+Node.js全栈开发Xmall商城 - 1.5 Xmall商城首页轮播图实现
element是一个很不错的网站,上面有很多插件,可供我们复制相关代码使用,我们只需要安装element插件,并且在使用的时候,导入相关的组件就可以了。Xmall商城的轮播图就采用了这种方法。下面是相关的代码:views/Home/index.vue代码:<template> <div class="home"> <!-- 轮播图 --> <div class="banner">原创 2022-04-11 14:47:00 · 1076 阅读 · 0 评论 -
Vue全家桶+Node.js全栈开发Xmall商城 - 1.4 Xmall商城导航组件实现
项目相关的素材放在文章的低部,下载下来即可查看。下面是项目目录:目录1.4 Xmall商城导航组件实现5步骤:1.4 Xmall商城导航组件实现第1步:在App.vue组件里面导入app组件样式,并设置style。1.4 Xmall商城导航组件实现第2步:在router/index.js里面导入Goods组件和Thanks组件,并挂载。1.4 Xmall商城导航组件实现第3步:在views文件夹下面分别新建两个文件夹Goods和Thanks,并分别新建组件,index.vue。1.4原创 2022-04-08 17:23:48 · 964 阅读 · 0 评论 -
Vue全家桶+Node.js全栈开发Xmall商城 - 1.3 嵌套路由控制导航组件的显示
首先需要添加一些素材:MHeader.vue代码有些多,稍后会放在文件里面,还有上面的图片素材。https://download.csdn.net/download/jolinoy/85089713https://download.csdn.net/download/jolinoy/85089713代码及其它素材,请查看上面链接。1.3 嵌套路由控制导航组件的显示第1步:在router/index.js里面,导入Home组件,并挂载路由。1.3 嵌套路由控制导航组件的显示第2步:在r.原创 2022-04-07 17:42:10 · 969 阅读 · 0 评论 -
Vue全家桶+Node.js全栈开发Xmall商城 - 1.2 初始化项目和项目插件依赖下载
测试项目:新建一个空文件夹test1通过命令:vue create xmall创建项目xmall。原创 2022-04-05 09:42:22 · 866 阅读 · 0 评论 -
--legacy-peer-deps 作用
在NPM v7中,现在默认安装peerDependencies。在很多情况下,这会导致版本冲突,从而中断安装过程。--legacy-peer-deps标志是在v7中引入的,目的是绕过peerDependency自动安装;它告诉 NPM 忽略项目中引入的各个modules之间的相同modules但不同版本的问题并继续安装,保证各个引入的依赖之间对自身所使用的不同版本modules共存。...原创 2022-04-04 12:07:12 · 23956 阅读 · 2 评论 -
npm ERR: code ERESOLVE 处理方法
今天在安装sass的时候报错:PS E:\VUEJS 2.6\test2\xmall> npm install -D sass-loader node-sassnpm ERR! code ERESOLVEnpm ERR! ERESOLVE could not resolvenpm ERR!npm ERR! While resolving: [email protected] ERR! Found: [email protected] ERR! node_modules/vuenpm转载 2022-04-04 09:39:28 · 46092 阅读 · 9 评论 -
第4章 Vue全家桶(vue-router+vuex) - 4.4 动态路由匹配和路由组件复用
下面是项目目录:User.vue代码:// User.vue里面的内容 <template> <div> 用户页面 {{$route.params.id}} </div></template> <script> export default { //当路由参数变化时 /user/1切换到/user/2原来的组件实例会被复用 //因为两个路由渲染了同个组件原创 2022-03-31 11:36:14 · 1230 阅读 · 0 评论 -
第4章 Vue全家桶(vue-router+vuex) - 4.3 命名路由 动态路由 静态路由
App.vue代码:// App.vue里面的内容 <template> <div id="app"> <nav> <!-- //<nav> 标签定义导航链接的部分 --> <!-- router_link相当于a标签,to属性相当于a标签的href --> <!-- <router-link to="/">Home</router-link> | 这是静态原创 2022-03-31 11:29:47 · 178 阅读 · 0 评论 -
第4章 Vue全家桶(vue-router+vuex) - 4.2 vue-router的基本使用
index.js// index.js里面的内容 import Vue from 'vue'// 1.导入import VueRouter from 'vue-router'// 2.模块化机制,使用Routerimport HomeView from '../views/HomeView.vue'// 3.创建路由器对象 Vue.use(VueRouter) const routes = [ { path: '/', name: 'home', c.原创 2022-03-31 11:19:56 · 138 阅读 · 0 评论 -
第4章 Vue全家桶(vue-router+vuex) - 4.1 vue-router的介绍和下载
介绍Vue Router 是 Vue.js 官⽅的路由管理器。它和 Vue.js 的核⼼深度集 成,让构建单⻚⾯应⽤变得易如反掌。包含的功能有: 嵌套的路由/视图表 模块化的、基于组件的路由配置 路由参数、查询、通配符 基于 Vue.js 过渡系统的视图过渡效果 细粒度的导航控制 带有⾃动激活的 CSS class 的链接 HTML5 历史模式或 hash 模式,在 IE9 中⾃动降级 ⾃定义的滚动条⾏为起步⽤ Vue.js + Vue Router 创建单⻚应⽤,是⾮常简单的。使⽤ Vue.j原创 2022-03-31 09:19:27 · 236 阅读 · 0 评论 -
mock模拟后端数据基本使用方法
项目目录:此项目中安装了router和vuex两个插件。并且需要安装mockjs插件,如下图:通过:vue add mockjs 命令安装。安装之后将以下代码放入AboutViews.vue里面:AboutViews.vue代码如下:<template> <div class="about"> <h1>This is an about page</h1> </div></template>原创 2022-03-18 17:14:00 · 1233 阅读 · 0 评论