学习Vue遇坑之路
Grimoire_ll
这个作者很懒,什么都没留下…
展开
-
Vue学习(四)——前后端交互模式
Vue学习(四)——前后端交互模式一、前后端交互模式1、接口调用的方法(1)原生ajax(2)基于Jquery的ajax(3)fetch(4)axios2、HTTP请求方式(1)GET 查询(2)POST 添加(3)PUT 修改(4)DELETE 删除二、Promise用法promise是异步编程的一种解决方案,从语法上讲,Promise是一个对象,从它可以获取异步操作的消息使用Promise主要的好处:(1)可以避免多层异步调用嵌套问题(回调函数)原创 2021-04-12 21:00:18 · 1279 阅读 · 0 评论 -
Vue学习(三)——前端路由
Vue学习(三)——前端路由一、路由一个完整的URL由几部分组成http://www.aspxfans.com:8080/news/index.asp?boardID=5&ID=24618&page=1#name(1) 协议部分:该URL的协议部分为“http:”,这代表网页使用的是HTTP协议。在Internet中可以使用多种协议,如HTTP,FTP等等本例中使用的是HTTP协议。在"HTTP"后面的“//”为分隔符(2) 域名部分:该URL的域名部分为“www.aspxfans原创 2021-04-12 16:20:31 · 219 阅读 · 0 评论 -
Vue学习(二)——Vue的双向绑定原理
Vue学习(二)——Vue的双向绑定原理VUe双向绑定的流程图如下:1、Vue双向绑定的原理:vue双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的,具体的实现方式如下:(1)首先对数据进行劫持监听,所以需要设置一个监听器Observer,用来监听所有的属性。如果属性发生了变化,就需要告诉订阅者Watcher看是否需要更新。因为订阅者是有很多个的,所以我们需要一个消息订阅器Dep来专门收集这些订阅者,然后再监听器Observer和监听器Watcher之间进行统一的管理。(2)接着我们还原创 2021-04-12 13:21:38 · 2294 阅读 · 0 评论 -
Vuex学习(二) ——vuex过程
Vuex学习(二) ——vuex过程一、vuex过程action 消息模块state 存储数据view 组件视图通信流程:一个组件发送消息,消息被action模块捕获,并根据消息类型,处理数据,action将新的数据传递给state去存储,state中的数据发生了改变,将新的数据传递给另一个组件在vuex中,把action分为两类:一类是同步消息:mutation 为了可测试一类是异步消息:action原创 2021-04-12 03:27:09 · 349 阅读 · 0 评论 -
Vuex学习(一) ——Vuex基础
Vuex学习(一) ——Vuex基础一、Vuex概述(一)组件之间共享数据的方法(1)父向子传值:v-bind属性绑定(2)子向父传值:v-on事件绑定(3)兄弟组件之间的共享数据:EventBus$on 接受数据的那个组件$emit 发送数据的那个组件以上的数据传值的方法只适用于小范围的数据共享,而大范围或者频繁的数据共享就使用Vuex(二)Vuex1、Vuex是什么Vuex是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间数据的共享2、使用Vuex统一管理状态的好处原创 2021-04-12 02:49:05 · 201 阅读 · 0 评论 -
Vue中计算属性computed和方法的区别
Vue中计算属性computed和方法的区别计算属性conputed和设置一个方法得到的最终结果尽管是一样,的,但是区别在于:计算属性是基于它们的响应式依赖进行缓存的,只在相关响应式依赖发生依赖改变时,它们才会重新求值。如果设计的值没有发生变化,多次访问计算属性会立即返回之前的计算结果,而不必再次执行函数...原创 2021-04-12 01:16:54 · 139 阅读 · 0 评论 -
Vue引入 mavon-editor 编辑器的详细步骤
Vue引入 mavon-editor 编辑器的详细步骤一、编辑器的引入如果你的项目之前没有安装过该编辑器,那就得先安装编辑器在自己的项目的根目录执行下列命令: npm install mavon-editor --save之后等待安装成功,如图:二、在vue项目的src/main.js注册点开main.js,全局注册,并且导入mavon-editor样式import 'mavon-editor/dist/css/index.css'import mavonEditor from 'm原创 2021-03-25 01:16:01 · 1681 阅读 · 0 评论 -
Vue学习(一)——Vue基础知识总结
Vue基础知识总结(一)el用于指定一个页面中已存在的DOM元素来挂载实例,它可以是HTMLElement,也可以是CSS选择器1、生命周期每个Vue实例创建时,都会经历一系列的初始化过程,同时也是调用响应的生命周期钩子,我们可以利用这些钩子,在合适的时机执行我们的业务逻辑。(1)created 实例创建完成后调用,这个阶段完成了数据的观测,但尚未挂载(2)mounted: el挂载到实例上后调用,一般我们的第一个业务逻辑从这里开始(3)beforeDestroy: 实例销毁之前使用,主要用原创 2021-03-10 23:00:23 · 378 阅读 · 0 评论 -
Vue:排查通过id跳转页面,页面正常跳转,接口正常调用,并且能在控制台打印数据,但页面没有数据显示的过程
Vue:排查通过id跳转页面,页面正常跳转,接口正常调用,并且能在控制台打印数据,但页面没有数据显示的过程1、date(){}大括号里面没有return{} data() { return { notice: {}, }; },2、动态路由的切换不会触发钩子函数的执行,所以不会发请求,就没有数据了所以加入监听 watch:{ 'route':'getNoticeDetail', },3、以上两个方法从网上搜到的,但数据依旧没有显示最后才发现是我原创 2021-03-03 16:33:08 · 974 阅读 · 1 评论 -
Vue 通过 vue 的 router 传递参数两种方式总结
Vue: 通过 vue 的 router 传递参数两种方式总结通过 vue 的 router 传递参数,通俗说法例如:通过id进行页面跳转并获取数据的方法总结(一)命名路由传参,即使用params形式如下:this.$router.push({ name: 'editor', params: { id: 1 }})这种方法的name是指路由中定义的那个name,而不是页面路径。跳转到的页面路由不会包含任何参数信息。刷新后就会丢失。(二)查询传参形式如下:this.$router.push(原创 2021-03-03 02:54:48 · 949 阅读 · 0 评论 -
小小经验:Vue中计算属性computed没有被触发的排查
小小经验:Vue中计算属性computed没有被触发的排查vue中的计算属性可以绑定动态变量,当页面有变化时,计算属性就会自动更新data中定义了相互独立并且不影响的变量问题:computed中定义的一个动态变量在相关的属性发生变化时,并没有发生相对应地发生变化比如,我点击全选或者商品的单选时,商品的总件数或者总价都没有发生变化计算属性的代码: computed: { totalNum: function () { let total = 0; console.原创 2021-02-28 19:15:38 · 7396 阅读 · 0 评论 -
Vue中计算属性computed和侦听属性watch的区别
Vue中计算属性computed和侦听属性watch的区别1、计算属性:computed(1)使用场景:模板中的表达式常用于简单的运算,当模板中的表达式过长或者其逻辑复杂时,会难以维护,计算属性就是解决该类问题(2)用法:简单用法:在一个计算属性中可以完成各种复杂的逻辑,包括计算、函数调用,只要最终返回一个计算结果即可。复杂一丢丢的用法:计算属性可以依赖多个Vue实例的数据,只要其中任一个数据发生变化,计算属性就会重新执行,视图也会更新。例如:<div style="float: ri原创 2021-02-28 18:43:22 · 262 阅读 · 0 评论 -
购物车页面实现
购物车页面实现<template> <el-container> <el-header style="margin-bottom: 10px"> <div> <el-card class="cart-header" shadow="nover">我的购物袋</el-card> </div> </el-header> <el-main&g原创 2021-02-27 18:46:28 · 228 阅读 · 0 评论 -
解决Vue中根据字符串的长度控制显示数字部分显示省略号
解决Vue中根据字符串的长度控制显示数字部分显示省略号问题:例如上面的简介的字太多,只要一行其他的显省略号解决方法:利用Vue中过滤器filter处理1、设计过滤器<span>{{ item.abs | handleText }}item.abs 显示的文字handleText 设置的过滤器2、定义过滤器filters: { handleText(value){ if(!value) return '' if(value.length &原创 2021-02-21 00:09:02 · 825 阅读 · 0 评论 -
新学Vue:解决新建组件后,导入组件出现 Can‘t resolve ‘.commonAbout ‘ in ‘Gworkspacecoteasrccomponents‘问题
新学Vue:解决新建组件后,导入组件出现 Can’t resolve './common/About ’ in 'G:\workspace\cotea\src\components’问题问题描述:原因:引用路径不对我的文件结构:解决方法:1、其实这个导入方法也是对的,但是我用了就是报第一个错误import About from "./common/About"2、网上大部分都是说把 ./ 改成 ../ 但还是错哒,显示第一个错误import About from "../commo原创 2021-02-20 18:29:33 · 7837 阅读 · 0 评论