vue.js
关注
分享
扫一扫
文章平均质量分 56
vue.js
cdgogo
这个作者很懒，什么都没留下…
展开
-
简单的购物车案例
效果图：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <原创 2021-08-07 19:32:11 · 121 阅读 · 0 评论 -
【uni-app】发送验证码60s倒计时
<view class="item flex align-items-center"> <view class="title">新手机号</view> <view class="newPhone"><input type="text" value="" v-model="newPhone" /></view> <view v-if="showText == true" class="sendCodeBtn" @click..原创 2021-07-23 18:14:35 · 2205 阅读 · 0 评论 -
【vue】根据不同的状态渲染不同的值和class
效果图：<view class="list"> <view class="item flex justify-between align-items-center" v-for="(item, index) in list" :key="index"> <view class="name">{{ item.name }}</view> <view class="time">{{ item.time }}</view>原创 2021-07-28 22:21:30 · 1996 阅读 · 0 评论 -
mockjs在vue中的使用
前后端分工协作是一个非常高效的做法，但是有时前后端分离不彻底会很痛苦。前后端应该是异步进行的，进度互不影响，但是在没有mock的时候，前端却严重依赖后端的接口，总会苦苦等待后端接口出来才能继续开发。为了解决这个问题，大神就造了一个轮子，供大家使用–mock.js关于mock.js，官网描述：1.前后端分离2.不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据3.数据类型丰富4.通过随机数据，模拟各种场景1、安装mockjsnpm install mockjs//或 在开.原创 2020-10-31 14:40:40 · 699 阅读 · 1 评论 -
vue中使用swiper插件（版本3）
安装指定版本npm install vue-awesome-swiper@3 --save-dev组件中使用<template> <div class="home"> <!-- <h1>首页</h1> --> <navBar class="navBar"> <span slot="center">购物街</span> </navBar> <原创 2020-09-09 23:17:43 · 5233 阅读 · 4 评论 -
vue的生命周期（详细）
生命周期图：可以理解vue生命周期就是指vue实例从创建到销毁的过程，在vue中分为8个阶段：创建前/后，载入前/后，更新前/后，销毁前/后。一、创建（实例）1、beforeCreate：这个阶段实例已经初始化，只是数据观察与事件机制尚未形成，不能获取DOM节点（没有data，没有el）使用场景：因为此时data和methods都拿不到，所以通常在实例以外使用2、created：实例已经创建，仍然不能获取DOM节点（有data，没有el）使用场景：模板渲染成html前调用，此时可以获取data原创 2020-09-04 22:12:14 · 24859 阅读 · 0 评论 -
vue-cli4.0 快速搭建项目
搭建项目之前，请确认好你自己已经安装过node, npm, vue cli。没安装的可以参考下面的链接安装。如何安装node?安装好node默认已经安装好npm了，所以不用单独安装了。如何安装vue cli?剧场环境已搭建好，开始表演！1. 进入一个目录，创建项目对应命令：vue create project-one2. 我们这里选择手动配置按 ↓ 选择“Manually select features”，再按 Enter3. 选择你需要的配置项通过↑ ↓ 箭头选择你要配置的项，按原创 2020-08-31 20:43:07 · 255 阅读 · 0 评论 -
Vuex
概念和作用解析Vuex是做什么的？管理什么状态？单界面到多界面状态管理切换原创 2020-08-27 23:31:25 · 91 阅读 · 0 评论 -
路由中$route 和 $router 的区别
$route$route对象表示当前的路由信息，包含了当前 URL 解析得到的信息。包含当前的路径，参数，query对象等。1、$route.path字符串，对应当前路由的路径，总是解析为绝对路径，如 “/foo/bar”。2、$route.params一个 key/value 对象，包含了 动态片段 和 全匹配片段，如果没有路由参数，就是一个空对象。3.$route.query一个 key/value 对象，表示 URL 查询参数。例如，对于路径 /foo?user=1，则有 $rou原创 2020-08-24 21:48:38 · 573 阅读 · 0 评论 -
vue基础知识
v-if 和 v-show的区别在切换 v-if 块时，Vue.js 有一个局部编译/卸载过程，因为 v-if 之中的模板也可能包括数据绑定或子组件。v-if 是真实的条件渲染，因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。相比之下，v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。一般来说，v-if 有更高的切换消耗而 v-原创 2020-08-24 21:10:46 · 207 阅读 · 0 评论 -
导航遍历并激活当前样式的方法
路由配置：方法一：通过props属性传参，判断当前路由是否跟props参数相同。导航公共组件Header.vue首页（父组件）：列表页（父组件）：。。。（以此类推）方法二：通过获取当前路由方法三：$route.name.indexOf(val) == -1方法四：在主入口文件App.vue的style中设置.router-link-active{ color:red;}方法五：在总路由js文件中设置linkActiveClass1、在总路由js文件中,和rout.原创 2020-08-23 15:25:05 · 145 阅读 · 0 评论 -
vue-cli4引入jquery和bootstrap
引入jquery1、下载jquerynpm install jquery --save-dev2、vue.config.js中webpack配置configureWebpack添加jquery插件在项目根目录下创建文件vue.config.js，与package.json同级。const webpack = require("webpack");module.exports = { configureWebpack: { //支持jquery plugin原创 2020-08-22 13:55:36 · 708 阅读 · 1 评论 -
vue-cli2中引入Bootstrap和jQuery
引入jQuery1、 引入jquerynpm install jquery --save-dev2、在项目根目录下的build目录下找到 webpack.base.conf.js 文件，在开头使用以下代码:const webpack = require('webpack')然后在module.exports中添加一段代码： plugins: [ new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery",原创 2020-08-20 15:41:11 · 488 阅读 · 0 评论 -
promise的介绍和基本使用
Promise是异步编程的一种解决方案，在ES6中Promise被列为了正式规范，统一了用法，原生提供了Promise对象。原创 2020-08-16 15:53:05 · 361 阅读 · 0 评论 -
axios框架的使用（网络请求相关）
安装用 npm:npm install axios用 bower:bower install axios用 cdn:<script src="https://unpkg.com/axios/dist/axios.min.js"></script>使用// 1、axios的基本使用(默认请求是get)axios({ url:'http://123.207.32.32:8000/home/multidata' // method:'get',}).the原创 2020-08-11 17:59:52 · 261 阅读 · 0 评论 -
文件路径的引用问题（配置文件路径vue.config.js）
在项目根目录下创建vue.config.js文件const path = require('path');//引入path模块function resolve(dir){ return path.join(__dirname,dir)//path.join(__dirname)设置绝对路径}module.exports={ chainWebpack:(config)=>{ config.resolve.alias //set第一个参数原创 2020-08-09 14:05:36 · 2420 阅读 · 1 评论 -
封装TabBar组件
实现思路：步骤一：TabBar和TabBarItem的组件封装做到这，可以发现页面的基本布局已经实现了，但是item的点击活跃状态还没实现步骤二：给TabBarItem传入active图片为了防止替换的内容直接整个替换掉插槽，从而插槽上定义的样式等也被替换影响，最好在插槽外定义一个div包裹步骤三：TabBarItem和路由的结合效果步骤四：TabBarItem的颜色控制...原创 2020-08-09 12:23:54 · 311 阅读 · 0 评论 -
＜slot＞插槽的使用方式
插槽的基本使用<slot></slot>插槽的默认值 <slot><button></button></slot>如果插入过个值，同时放入到组件进行替换时，一起作为替换元素具名插槽的使用原创 2020-08-08 12:55:54 · 638 阅读 · 0 评论 -
vue-router 参数传递及获取参数的方法
一、query方式原创 2020-08-08 11:08:33 · 712 阅读 · 0 评论 -
vue-router 路由的嵌套使用方法
注意： 嵌套路由中以“/”开头的嵌套路径会被当作根路径，所以子路由上不用加“/”;在生成路由时，主路由上的path会被自动添加到子路由之前，所以子路由上的path不用在重新声明主路由上的path了。参考：https://www.cnblogs.com/vickylinj/p/10900349.html...原创 2020-08-08 00:17:37 · 295 阅读 · 0 评论 -
vue-router 路由的懒加载原理及方式
参考：https://www.cnblogs.com/hutuzhu/p/10407258.html原创 2020-08-07 21:57:48 · 4165 阅读 · 1 评论 -
＜router-link＞动态路由传参并接收参数
注意：在子组件中 获取参数的时候是$route.params而不是$router 这很重要~~~通过@click方法传参跳转参考：https://www.cnblogs.com/qiu2841/p/11018190.html原创 2020-08-07 20:26:05 · 2889 阅读 · 0 评论 -
＜router-link＞属性详解
<router-link>组件支持用户在具有路由功能的应用中点击导航。通过to属性指定目标地址，默认渲染为带有正确连接的 <a> 标签，可以通过配置tag属性生成别的标签。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的css类名<router-link>组件的属性有：to 、replace、 append、 tag、 active-class、 exact 、 event、 exact-active-classto（必选参数）：类型string.原创 2020-08-07 17:24:57 · 27638 阅读 · 0 评论