vue.js
路不在自己脚下
这个作者很懒,什么都没留下…
展开
-
vue-cli 3.0 安装和创建项目教程
下载安装 npm install -g vue@cli 删除了 vue list 创建项目 vue create 项目名 启动项目 npm run serve原创 2019-04-21 00:02:02 · 89 阅读 · 0 评论 -
购物车商品数量改变时同步到vuex里(购物车功能五)
正在酝酿中。。。。。。原创 2019-05-09 23:17:08 · 1204 阅读 · 0 评论 -
vue里删除购物车商品(购物车功能六)
1.删除按钮绑定删除商品方法remove(购物车商品列表页)2.mutations里定义删除购物车列表商品方法(store.js里)3.在购物车商品列表页里定义的remove方法里删除商品3-1:删除当前组件里的商品3-3:删除存储在vuex里的商品...原创 2019-05-10 19:56:14 · 4345 阅读 · 1 评论 -
vue购物车里商品状态(购物车功能七)
1.getters里定义方法获取存储在state里的商品选中状态2.把商品选中状态绑定到按钮上3.给购物车商品选中按钮绑定change事件selectedChanged4.(购物车商品列表页)在selectedChanged方法操作mutations里定义的updateGoogsSelected方法//把一个对象(商品id和商品选中状态selected)作为updateGoogsSe...原创 2019-05-10 21:13:04 · 1477 阅读 · 0 评论 -
node.js从MongoDB数据里操作数据
注意:前提是安装了node.js,mongodb数据库,mongoose1.在service(后端目录) > schema目录下新建Goods.js文件(定义骨架schema)2.service > database > init.js(配置数据库连接)const mongoose = require('mongoose')// 如果没有smileVue数据库则会自动创...原创 2019-05-20 23:32:50 · 443 阅读 · 1 评论 -
vue购物车里的结算(购物车功能八)
1.在store.js里的getters里定义getGoodsCountAndAmount方法计算选中后的商品总数量和总价2.把计算出来的商品总数量和总价渲染到购物车商品列表页面原创 2019-05-10 23:31:19 · 947 阅读 · 0 评论 -
vue页面返回按钮(购物车功能九)
场景:首页头部显示返回按钮,其他路由页面头部则显示返回按钮1.App.vue里给返回按钮绑定方法goBack2.App.vue里定义路由返回方法3.App.vue定义路由开关flag默认为false(即隐藏返回按钮)4.App.vue通过v-show="flag"来显示和隐藏返回按钮5.App.vue监听路由变化6.因为flag默认为false则其他路由页面头部的返回按钮会被...原创 2019-05-11 00:07:47 · 1435 阅读 · 0 评论 -
vue页面从右侧滑出左侧消失特效
<style lang="scss"> html{ font-size: calc( 100vw / 7.5 ) } // 页面从右侧滑出左侧消失特效 #app{ width: 100%; // padding-top: 46px; padding-bottom: 50px; overflow-x: hidden; ...原创 2019-05-11 16:20:26 · 3853 阅读 · 0 评论 -
vue点击跳转到详情页
1商品组件页面GoodsInfo.vue(点击该组件跳转到详情页) <template> <div class="goods-info" @click="goGoodsPage()"> <div class="goods-image"> <img v-lazy="goodsImage"> ...原创 2019-05-21 22:56:55 · 24267 阅读 · 3 评论 -
vue.js里实现吸顶效果
html 元素:<div class='container' ref='topTab'> <div class="absolute" :class='{fixed:isFixed}'> <!-- tab--> </div> <div> <!-- content -->...转载 2019-05-23 15:08:17 · 1308 阅读 · 0 评论 -
vue生命周期说明
vue生命周期说明转载 2019-05-29 00:32:16 · 137 阅读 · 0 评论 -
uni-app tab切换(vue可使用)
<template> <view class="content"> <!-- 头部 --> <view class="navbar"> <view v-for="(item, index) in navList" :key="index" class="nav-item" :class="{ current: tabCurren...原创 2019-06-27 16:11:52 · 23836 阅读 · 11 评论 -
vue 路由模板
1.项目大了点话,都在一个路由文件里配置路由会显得臃肿不移维护,所以把路由配置单独抽离到一个文件里文件路径:src > router > router.jsimport Home from '@/views/Home.vue'export const routes =[ { path: '/', redirect: '/home' }, { ...原创 2019-07-28 17:32:07 · 853 阅读 · 0 评论 -
vue父组件和子组件数据传递
1、父组件向子组件传递数据父组件:<template> <div class="parent"> <p>父组件:{{ msg }}</p> <Child message="Hello, I am parent!"></Child> </div></template>&l...转载 2019-08-06 23:32:14 · 149 阅读 · 0 评论 -
vue element NavMenu 左侧导航栏
子组件: leftMenu.vue<template> <div> <!-- 根据实际情况做修改 --> <el-submenu v-for="item in navlist" :key="item.adminMenu.id" v-show="item.adminMenu.menuType=='l...转载 2019-08-16 01:00:41 · 3115 阅读 · 0 评论 -
加入购物车里的商品数据渲染到购物车列表页面(购物车功能四)
1.获取加入购物车的商品数据data () {return {goodslist: []},created: {this.getGoodsList();}2.购物车列表页面渲染加入购物车的商品数据原创 2019-05-09 20:47:54 · 4180 阅读 · 0 评论 -
vue里操作dom(购物车功能一)
1.通过ref属性定义dom标识2.通过 $refs.标识名 来操作dom转载 2019-05-07 10:47:15 · 201 阅读 · 0 评论 -
vue购物车本地存储(购物车功能三)
1.购物车数据设计2.点击加入购物车2-1.在GoodsInfo.vue添加购物车点击事件2-2:mutations里定义一个addToCar方法并带参数: addToCar(state,goodsInfo){}3.将购物车数据本地存储4.本地有存储数据则获取,没有则赋予一个空数组...原创 2019-05-09 00:29:35 · 2849 阅读 · 1 评论 -
vue干货收集
验证码插件vue-monoplasty-slide-verify: https://github.com/monoplasty/vue-monoplasty-slide-verify验证码插件vue2-verify,自适应兼容移动端: https://github.com/mizuka-wu/vue2-verify网易易盾验证插件(支持滑动拼图,文字点选,短信验证): http://dun.1...原创 2019-04-26 18:33:10 · 206 阅读 · 0 评论 -
vant 底部导航组件的实现(tabbar)
<template> <van-tabbar v-model="active" class="active_tab"> <van-tabbar-item v-for="(item,index) in tabbars" :key="index" @click="tab(index,item.name)" >...转载 2019-04-22 22:41:58 · 18275 阅读 · 11 评论 -
vue分页轮播
使用了有赞vant ui库轮播组件<template> <div class="icons"> <van-swipe :loop="false" indicator-color="#fff"> <van-swipe-item v-for="(page, index) in pages" :key="ind...原创 2019-05-02 21:43:49 · 896 阅读 · 2 评论 -
vue.js页面从右侧滑出特效
<template> <div id="app"> <Headers></Headers> <transition> <router-view/> </transition> <FooterBars></FooterBars> </d...原创 2019-05-02 22:08:02 · 7364 阅读 · 1 评论 -
vue路由跳转时更改页面title
一、router文件夹下的index文件中给每个path添加meta:{}:export default new Router({ routes: [ { path: '/', name: 'index', component: index, meta: { title: 'title1' } }, { path: '/studentIn...转载 2019-04-29 18:34:38 · 736 阅读 · 0 评论 -
vue返回上一页
方法一:<!--返回按钮--><div class="backTo"> <span @click="back">返回</span></div>2.在方法体内现价back方法methods:{ back(){ this.$router.go(-1);//返回上一层 },},注:后退:...转载 2019-04-29 23:12:08 · 2917 阅读 · 0 评论 -
vue里的倒计时
场景: 点击按钮开始倒计时1.定义倒计时时间computeTime(默认为0)2.设置定时器(点击按钮的时候需判断是否正在倒计时,如果在倒计时则点击按钮的时候不会再倒计时)3. html结构// @click.prevent是阻止表单的的默认事件(默认提交)...转载 2019-05-05 17:50:40 · 1252 阅读 · 0 评论 -
输入框密码隐藏与显示
效果图:html结构:// showPwd在data里定义(默认为false)转载 2019-05-05 18:16:23 · 1309 阅读 · 0 评论 -
vue 列表页跳转详情页获取id的方法以及详情页通过id获取数据
vue 列表页跳转详情页获取id的方法以及详情页通过id获取数据2018年12月17日 20:19:00 荔枝吖 阅读数:1644 1.先在router.js中配置路由{ path: '/movieDetail/:movieId', name: 'movieDetail', component:movieDetail }2.获取详情页的id,并...转载 2019-05-05 20:48:44 · 6986 阅读 · 0 评论 -
Vue实现路由进入商品详情页面二
一、路由首先需要配置路由,就是点击good组件进入goodDetail组件 配置路由如下 { path: '/goodDetail', component:goodDetail }同时在good组件中写入如下点击事件,路由中加入查询参数,也就是商品的id//点击路由到商品详细信息页 selectGood(){ router.push...转载 2019-05-05 20:53:03 · 2113 阅读 · 0 评论 -
vue跳转传参方式
一、直接在路由中写参数<li v-for="article in articles" @click="getDescribe(article.id)"> getDescribe(id) {// 直接调用$router.push 实现携带参数的跳转 this.$router.push({ path: `/describe/${id}`, }...转载 2019-05-05 21:08:27 · 7560 阅读 · 2 评论 -
Vue项目上线部署的那些坑
96 SplendorZhang 0.1 2017.07.07 21:50* 字数 669 阅读 10120评论 3喜欢 10 最近公司的前端项目要上线,这才发现原来在开发环境跑的很流畅的代码在生产环境中遇到很多坑,在此做一个总结,以免日后再走弯路。 跨域问题: 从开发环境切换到生产环境首先面临的是跨域的问题,开发时为了简单就直接...转载 2019-05-06 13:36:00 · 1484 阅读 · 0 评论 -
vuex的使用(购物车功能二)
通过mutations操作state里的数据、1.mutations里定义一个方法2.调用.mutations里定义的increment方法(组件都可通过commit来调用):原创 2019-05-08 22:17:19 · 231 阅读 · 0 评论 -
vue-axios的使用
1.安装vue-axiosnpm install --save axios vue-axios2.main.js里全局引入vue-axiosimport axios from 'axios'import VueAxios from 'vue-axios'Vue.use(VueAxios, axios);3.vue.congfig.js里设置proxyTable实现跨域请求devS...原创 2019-04-30 23:47:59 · 216 阅读 · 0 评论 -
vue通过点击或悬停实现slideToggole效果
<template> <div id="app"> <div class="slide-toggole"> <button @click="show = !show">slideToggle效果</button> <transition name="ul"> <ul v...原创 2019-09-05 23:50:47 · 648 阅读 · 0 评论