Vue
文章平均质量分 58
第一阶段:入门vue
第二阶段:深入学习vue
第三阶段:技术突破
第四阶段:答疑解难
第五阶段:深入探讨vue技术,vue的发展方向,代码贡献等
叨唠
弘德、博学、敏行、敢先
展开
-
项目中缺失node_modules文件
在自己开发项目的时候,莫名其妙的缺失了node_modules文件,我的解决办法是在项目文件夹下执行指令结果: 同时也增加了package.json和package-lock.json文件 ...原创 2018-11-22 14:27:34 · 12553 阅读 · 4 评论 -
vuex的mutations
vuex 的严格模式strict: true下,不允许组件修改state中的值,若需要修改,在vuex的mutations属性中进行修改。注意:只能在mutations下的函数进行修改,如果mutations下的函数的函数进行修改也是会报错的(1)mutations属性中接收两个参数,state就是vuex中的state,addValue是组件传过来的值 mutations: {...原创 2019-03-27 11:24:03 · 340 阅读 · 0 评论 -
vuex中的actions
actions用来处理mutations中的异步操作,触发mutations中的函数1. 组件中触发actions中的函数:此处用dispatch触发函数this.$store.dispatch('changeP', this.addValue) //触发actions中的changeP函数2. actions中触发mutations中的函数:注意:ctx是上下文,就是Store,...原创 2019-03-29 11:12:42 · 8106 阅读 · 0 评论 -
vuex中的modules
vuex中将数据模块化1. 在vuex中将组件模块化,注意:加属性:namespaced:true;命名空间const downloade = { namespaced: true, //命名空间为true state: { personList: [], }, getters: { newPerson (state, getter...原创 2019-03-29 14:12:00 · 1946 阅读 · 0 评论 -
组件基础——Vue.js
1. 基本实例 <div id="components-demo"> <button-counter></button-counter> </div> <script> Vue.component('button-counter', { data: fun...原创 2018-11-06 18:03:31 · 224 阅读 · 0 评论 -
vuex中getters
vuex中的getters类似于计算属性computed,对数据池state中的值进行处理(1)在组件中将值添加到state的personList属性中<template><div> <input type="text" v-model="addValue"> <button @click="add">添加</button&...原创 2019-03-26 22:45:02 · 360 阅读 · 0 评论 -
vuex中的state和mapState
vuex是Vue中的数据仓库,用来存储数据的,Vue中每个组件都可以获取和修改vuex中的值。1. 添加vuex插件2.项目中会自动生成store.js文件(1)state:陈述、声明。声明变量的1)该值在组件中的使用:(2)第二种写法:组件中引入:import { mapState } from 'vuex'store.js中的state的属性...原创 2019-03-26 15:11:47 · 893 阅读 · 0 评论 -
组件中函数的执行顺序
1. 生命周期函数除了beforeCreate,其他的都是在Vue实例创建完成之后执行2. 组件中data是一个函数,每次路由切换回来时,都会执行data函数,并会初始化data中的值(1)data中的数据还有一个特点:如果值是原始值不是响应式的。比如下面的代码中,通过点击事件使vuex中的this.$store.state.login发生变化,但是data中的storeValue是原始,...原创 2019-03-26 11:01:31 · 561 阅读 · 0 评论 -
Vue中路由懒加载
某个路由被展示的时候,才会加载该路由的资源,而不是一下子把所有需要的资源都通过网络加载出来写法:在router.js中引入路由的时候资源加载情况:webpack打包的时候,会自动给每个js文件分配序列号在academic文件中的,Response选项中html代码中有link标签,href=“/0.js”,rel="prefetch":预加载,用户在访问网页时,在网络请求闲置...原创 2019-03-24 15:22:36 · 819 阅读 · 0 评论 -
Vue中路由源信息
路由源信息:存在父子路由关系的组件,在子路由组件中可以获取、修改父路由设置的值(1)在router.js中设置meta属性(对象),该对象内的属性和属性值自定义,即在父路由Community的路由中设置属性login(2)这里设置的对象meta可以在该路由组件中使用,也可以在它的子路由组件中使用在子路由Personal路由组件中,获取login并将其修改<script...原创 2019-03-24 14:32:32 · 606 阅读 · 0 评论 -
Vue中导航守卫
导航守卫有三种:1. 全局守卫:在router.js中,对router对象进行守卫设置beforeEach函数,router内所有的路径出入都要被守卫盘问 router.beforeEach((to, from, next) => { if(to.path == '/community/academic') { //对全局进行守卫,对所有的路径都进行了盘问 c...原创 2019-03-24 13:48:05 · 329 阅读 · 0 评论 -
Vue中router-view的复用
1. router-view的复用:一个路由页面显示多个路由组件比如:home路由页面,同时显示Home路由组件和Academic路由组件router.js中配置: { path: '/home', name: 'home', components: { default: Home,//首页默认显示Home路由组件 ...原创 2019-03-24 00:16:53 · 854 阅读 · 0 评论 -
Vue中如果不是已经配置好的路由(错误的路由),跳转到指定路径——redirect
在router.js中配置:当输入没哟配置的路径时,直接跳转到home路径对应页面,且路径也是home路径 { path: '*',//除了已经配置好路由 redirect: '/home' }redirect也可以为一个函数:(1)接收一个参数为toto的值:举例: { path: '*',//除了已经配...原创 2019-03-23 23:58:51 · 1949 阅读 · 0 评论 -
Vue中用户输入无效地址,跳转到错误提示页面
1. 在动态路由中,有的路径是无效路径,可以让无效的路劲跳转到错误提示页面组件的$router属性的原型上有一些方法(this.$router)(1)go方法(2)replace:用新的路径替换错误路径,同时创建错误页面的组件a——b(不存在的路径)——c(用c取代了b);所以路径中就是a——c(3)push:a——b(不存在的路径)——c(在b后面添加了c);所以路径就是...原创 2019-03-23 23:36:43 · 3119 阅读 · 0 评论 -
Vue中动态路由
(1)在router.js 中配置动态路由,注意:路径path后面加id就是动态添加值路由:注意:id 是个动态值 { path: '/questions/:id', name: 'questions', component: Questions }引入该路由://下面引入动态路由import Questions from ...原创 2019-03-22 23:33:56 · 1188 阅读 · 0 评论 -
Vue路由中的router-link-exact-active和router-link-active
1.router-link-exact-active和router-link-active这两个类名是Vue路由自带的(1)router-link-exact-active当路由到哪里时,该类名就添加到对应的路由标签上比如:当点击About时,路由就跳转到About对应的页面此时,看该路由标签的类名:(2) 当点击Community的子路由时,该类名就会到子路由上...原创 2019-03-21 14:12:56 · 13597 阅读 · 0 评论 -
Vue嵌套路由
1. 嵌套路由就是路由下还有路由,即子路由。写法:在router.js中对应的父路由的children属性下写子路由import Vue from 'vue'import Router from 'vue-router'//下面的路径引入import Home from './views/Home.vue'import About from './views/About.vue'i...原创 2019-03-21 13:32:51 · 400 阅读 · 0 评论 -
Vue路由(router)基础知识
1.(1)安装路由(2)在main.js文件中创建路由并引入组件import Vue from 'vue'import App from './App.vue'// import router from './router'Vue.config.productionTip = false//路由设置import Router from 'vue-router' /...原创 2019-03-20 23:49:09 · 1280 阅读 · 0 评论 -
vue中遍历对象
vue中遍历对象的方法就是JavaScript的方法,有多种方法:第一种:invue中在计算属性中,定义一个函数letters,因为要把letters用作数组,所以在letters函数中,先申明了letters = [ ]通过in遍历cities对象,将对象的属性push到letters中。cities的结构:...原创 2018-12-06 14:57:47 · 24227 阅读 · 0 评论 -
vue中touch事件的使用,使兄弟组件联动,函数节流
1. 对touch事件的理解:当手指点下标签时,触发touchstart事件当手指滑动时,触发touchmove事件当手指抬起时,触发touchend事件注意:点击事件会同时触发touchstart和touchend事件注意:不管怎么滑动,或者滑动到哪里,事件对象都是该dom;而不是说滑动到别的标签后,触发的就是别的标签的滑动事件。但是:滑动到别的位置,事件对象中的位置属...原创 2018-12-06 14:26:33 · 1383 阅读 · 0 评论 -
vue中兄弟组件之间的联动,兄弟组件之间的传值
兄弟组件之间的传值,使得兄弟组件之间可以联动,相互操作方法1:借助父组件,让两个兄弟组件可以联动,子组件A将值传递给父组件,父组件再将值传递给子组件B第一步:子组件A传值给父组件通过$emit将e.target.innerText传递给父组件<template> <div class="initail"> <ul> &l...原创 2018-12-05 12:32:59 · 24689 阅读 · 3 评论 -
vue中$emit的理解
子组件通过$emit向父组件传递信息,使父组件触发methods方法,同时,信息中可以携带值,传递给父组件,父组件的methods方法可以对值进行处理。vue官方文档中对$emit有详细说明补充内容:父组件中绑定的事件默认是自定义事件,所以需要通过子组件$emit去触发,但是原始事件(click等),可以通过@click.native直接触发;项目中的父子组件的写法(1)只触发父组...原创 2018-12-05 11:09:05 · 2528 阅读 · 0 评论 -
项目开发中的样式布局实例
1. 盒子margin-left和margin-top的设置,使得背景是灰色,而灰色部分真是大盒子的背景颜色要实现的样式:应该用padding,这样颜色就和盒子颜色一样。2. 红心是个图片,通过line-height = height让红心和文在垂直居中的时候,红心还有往下,我们可以通过margin-top上下移动红心,让它和文字水平对齐。3. 让“今日预定”这个绿色的...原创 2018-11-30 16:35:39 · 300 阅读 · 0 评论 -
评分五角心的显示
方法1:五角星的图片,根据评分,上下移动一定距离,方法2:加载icon图标,设置黄色和灰色 效果:原创 2018-11-30 18:37:05 · 428 阅读 · 0 评论 -
vue中用axios进行数据请求
一、vue-cli 2.01. 安装axios插件npm指令:npm install axios --saveyarn指令:yarn add axios2. 在组件中引入,可以在单个组件中引入,只请求该组件所需要的数据,也可以在父组件中引入,请求该父组件下所有子组件需要的数据在mounted周期函数中执行方法A,方法A是在methods对象中定义的,该方法的功能是:让axi...原创 2018-11-30 18:09:08 · 6185 阅读 · 1 评论 -
smartGit的操作、文字上边框对齐、vue中弹窗组件、全局组件的引入
1. smartGit的基础操作——切换分支提交代码(1)在自己的branch上开发功能,然后将代码commit到本地仓库(2)切换到master上,pull最新的master到本地,确保muster是最新的(3)切换到branch上,对master执行merge操作,选解决冲突后,将代码提交到branch上,此时:branch的本地和远程是一致的切换到master上,对bra...原创 2018-11-28 10:05:39 · 331 阅读 · 0 评论 -
(6)用vue写去哪网——轮播图组件
1. 用他人的组件,还不如自己有能力写一个轻量级的符合自己项目的轮播图组件,哎,但是js忘了好多,不会写啊,等以后有能力再写。2. 使用GitHub上最火热的一个轮播图组件:vue-awesome-swiper(1)有npm的下载方式:我用的是yarn下载的:yarn add vue-awesome-swiper@2.6.7下载到项目后,在yarn.lock中多了该项:...原创 2018-11-24 17:25:04 · 720 阅读 · 0 评论 -
(5)用vue写去哪网——iconfont的使用、路径别名、css变量
1. iconfont的使用在iconfont官网选好自己项目中使用的svg图标,将这些图标添加到指定项目中,然后点击下载到本地,解压后,可用的文件是:iconfont.css和iconfont.eot、svg、ttf、woff这四种字体,将iconfont.css文件和其他的第三方css文件放在一起,将四种字体文件放在一个名为iconfont的文件夹中,这样做就是归个类而已。需要注意的是...原创 2018-11-23 17:15:05 · 473 阅读 · 0 评论 -
(4)用vue写去哪网——引入第三方文件或插件
1. 引入reset.css文件将reset.css文件放在静态文件夹assets中,它的引入也是有Vue实例main.js 引入的注意:main.js是入口文件2. 引入border.css文件引入方法和reset.css一样3. 为了解决click事件在移动端有时候点击会出现300ms延迟,引入一个插件\包——fastclick在入口文件main.js中引入该插件,...原创 2018-11-22 20:00:38 · 324 阅读 · 0 评论 -
(3)用vue写去哪网——单文件组件代码结构
1. 首页文件:index.html<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0">原创 2018-11-22 14:07:37 · 362 阅读 · 0 评论 -
(2)用vue写项目——项目文件结构
README.md项目描述说明文件package.json 安装依赖的包index.html 首页模板,项目的首页postcssrc.js:是post的配置项gitignore:有些文件不需要用git上传,不需要上传eslintrc.js:代码规范,按eslint标准eslintignore:在下面这些文件夹的文件,是不受eslint检测的editorconfi...原创 2018-11-22 12:09:35 · 372 阅读 · 0 评论 -
(1)用vue写项目——项目准备
方法一:1. 下载安装nodejs和git2. 全局安装vue脚手架vue-cli3. 执行命令创建一个基于webpack打包工具的vue项目的文件夹命令会进入该项目的配置选项:Project name 项目名字 quna.com quna.com Project description 项目描述 A Vue.js projec...原创 2018-11-22 11:36:36 · 1815 阅读 · 0 评论 -
vue中用组件封装过渡动画
组件中要有props接收一个值,比如:show;组件的template中transition和slot的结合,可以接收父组件中的标签;过渡效果通过js钩子函数实现。这样就可以实现自己封装过渡动画,在项目中复用。<body> <div id="demo"> <button @click="show = !show">add item</bu...原创 2018-11-21 14:36:38 · 501 阅读 · 0 评论 -
vue中列表增删时的动画过渡效果
用transition-group 包裹标签,注意没有name属性,要使用v-enter等类 <style> .v-enter, .v-leave-to { opacity: 0 } .v-enter-active, .v-leave-active { transition: opacity 2s } ...原创 2018-11-21 12:19:23 · 704 阅读 · 2 评论 -
vue中组件的过渡动画
1. 和多个元素的过渡一样,用组件来替换transition中包裹的标签 <style> .fade-enter, .fade-leave-to { opacity: 0 } .fade-enter-active, .fade-leave-active { transition: opacity 2s }...原创 2018-11-21 11:54:11 · 273 阅读 · 0 评论 -
vue中多个元素的动画效果
1. 多个标签被transition包裹,并且用v-if 和 v-else <style> .fade-enter, .fade-leave-to { opacity: 0 } .fade-enter-active, .fade-leave-active { transition: opacity 2s }...原创 2018-11-21 11:35:37 · 733 阅读 · 0 评论 -
vue中动画函数钩子js动画
1. 动画开始:@before-enter @before-leave 动画过程: @enter @leave 在这个过程中有done方法,表示动画结束,done方法执行时,就会触发动画结束函数 动画结束:@after-enter @after-leave注意:动画变化,不是过渡。 <div i...原创 2018-11-21 11:09:46 · 408 阅读 · 0 评论 -
vue中过渡和动画结合
动画、过渡、页面加载时就有动画 <style> .de{ width: 100px; height: 100px; background: green; } .fade-leave-active { transition: opacity 1s; } .fade-leave-to { ...原创 2018-11-20 18:34:00 · 166 阅读 · 0 评论 -
页面刷新加载时,就有动画效果
1. 页面加载时就有动画效果,transition appear appear-active-class注意:引入第三方库animate.css库<body> <div id="demo"> <button @click="show = !show">click me</button> <transition原创 2018-11-20 18:10:42 · 4210 阅读 · 0 评论 -
vue中动画关键帧keyframes 和 animation 和animate动画库
(1) <style> @keyframes fontScale { 0% { font-size: 30px; } 100% { font-size: 50px; } } .fade-leave-active { animation: fontScale 3s...原创 2018-11-20 17:46:31 · 2794 阅读 · 0 评论