VUE
记录使用VUE过程中的操作
@Arielle。
这个作者很懒,什么都没留下…
展开
-
【VUE】-Vuex学习与使用
Vuex学习与使用什么是Vuex?什么时候使用?Vuex核心概念安装与使用什么是Vuex?Vuex 是一个专门为 Vue.js 应用程序开发的状态管理模式,使用插件的形式引进项目中集中存储和管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化每一个 Vuex 应用的核心就是 store(仓库),new Vue.store({…}),“store”基本上就是一个容器,...原创 2020-02-09 21:22:49 · 400 阅读 · 1 评论 -
【VUE】- Duplicate keys detected:'0'
项目爆红-Duplicate keys detected:'0'问题描述问题出现原因具体问题与解决方案:问题描述出现了[Vue warn]: Duplicate keys detected: ‘0’. This may cause an update error(错误,检测到重复的key值:”0“,这可能会导致更新错误)问题出现原因我们在使用v-for循环遍历数据的时候,都要必须加上一个...原创 2020-01-22 10:18:01 · 2836 阅读 · 2 评论 -
【VUE】- 前端封装之父子组件传值
前端代码进行抽象与封装离不开父子组件传值问题,做的过程中总有梳理不清楚的时候,在此总结一波,一方面是自己梳理梳理思路,另外一方面有需要的伙伴们也可以瞅一瞅,本文是从开始到最后实现数据的一个操作过程;父组件向子组件传值1、可抽离的静态页面首先是看一下自己的静态页面有哪些相似之处可以被抽象出来,如下面这个页面,看似不一样,实则都是一样的,只是图标和文字内容不一致,OK了解后我们可以开始设计静态页...原创 2019-12-09 08:26:35 · 730 阅读 · 0 评论 -
【VUE】- import ...与import{ }的区别
前端项目引入文件的过程中我们会发现一个问题,有的引入文件中是直接引入,而有的地方是加了花括号的,那么这两者有什么区别,都是什么时候使用呢?一、文件引入方式首先我们看一下这两者不同引入文件的方式:说到这两种方式我们需要了解,vue中文件引入的几种方式,第一种引入方式:组件引入(自定义组件或第三方组件),如下://引入组件import momoTemplate from "../../c...原创 2019-12-05 21:44:42 · 5947 阅读 · 0 评论 -
【VUE】- 树形视图
项目中用到了父子结构嵌套,层级缩进样式,就想到了组织结构的形式,于是乎就去vue官网查看关于组织结构的展现形式的说明及实例,在官网的基础上进行实践...原创 2019-12-01 21:33:12 · 389 阅读 · 0 评论 -
【VUE】- 路由切换时,始终回到页面最顶部
今天的总结是解决两个小问题的过程,项目初步完成后,组内测试时发现了两个常见却又易被忽视的问题,一是标题不固定,随鼠标移动做移动,二是页面滚动行为问题,具体如下面动图描述;修改前:一、标题栏固定一个个解决首先来看一下这个标题栏移动的问题,解决方案如下-设置标题栏定位Position:absolute:生成绝对定位的元素,元素的位置通过"“1eft",“top”,"right"以及"bot...原创 2019-11-24 21:19:00 · 2455 阅读 · 5 评论 -
【VUE】-钩子函数
beforeCreatecreatedmountedcomputedwatch原创 2019-10-30 10:10:22 · 221 阅读 · 3 评论 -
【VUE】-点击预览图片
1、安装npm install v-viewer//安装npm install v-viewercnpm install v-viewer2、引入import 'viewerjs/dist/viewer.css'import Viewer from 'v-viewer'import Vue from 'vue'Vue.use(Viewer)3、绑定 v-viewer...原创 2019-10-20 21:04:34 · 228 阅读 · 3 评论 -
【VUE】- 随机颜色显示
在开始颜色设置之前,首先我们需要知道Style与:Style的用法有什么不同;一、:Style的用法:1、动态绑定:是v-bind的缩写,是为了动态绑定数据, 加上了冒号是为了动态绑定数据,等号后面可以写变量。style="{'background-color':colorlists[Math.floor(Math.random()*10)],'float':index%2===0?'...原创 2019-09-30 21:46:07 · 4442 阅读 · 4 评论 -
【VUE】-跨页面传参
一、普通页面传参 去掉index参数即可二、设计索引页面传参(list)1、answerlist页面第一步绑定方法:第二步书写方法:2、answerdetails页面 第一步定义方法接受参数:![在这里插入图片描述](https://img-blog.csdnimg.cn/20190915220345306.png?x-oss-process=image/water...原创 2019-09-28 16:07:40 · 526 阅读 · 7 评论