Vue
关注
分享
扫一扫
Vue
深蓝冰河
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
vue,的M、V、VM分别代表什么
M、V、VM分别代表什么?M: model，数据部分，即dataV: view，视图，即html部分vm: viewmodel，vue实例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t.原创 2022-03-05 10:27:53 · 4846 阅读 · 0 评论 -
快速删除node_modules文件夹
前言当安装了较多模块后，node_modules目录下的文件会很多，直接删除整个目录会很慢，下面介绍些快速删除node_modules目录的方法。方法一：使用rimraf模块的命令在全局安装rimraf模块，然后通过其命令来快速删除node_modules目录：npm install rimraf -grimraf node_modules方法二：使用命令来删除目录Windows下使用rmdir命令首先在cmd窗口中进入到node_modules文件夹所在的路径，接着执行命令：rmdir原创 2021-03-12 11:07:00 · 1001 阅读 · 0 评论 -
跨域问题及解决方案：jsonp解决跨域、ajax解决跨域、vue的跨域解决方案
一.什么是跨域跨域问题的出现是因为浏览器的同源策略问题，所谓同源:就是两个页面具有相同的协议（protocol），主机（host）和端口号（port），它是浏览器最核心也是最基本的功能，如果没有同源策略我们的浏览器将会十分的不安全，随时都可能受到攻击。当我们请求一个接口的时候，出现如：Access-Control-Allow-Origin 字眼的时候说明请求跨域了二.如何解决跨域问题1.使用jsonp实现:网页通过script标签向服务器请求json数据，服务器受到请求后，将数据放在一个指定名字原创 2021-03-11 22:46:06 · 471 阅读 · 0 评论 -
vue基础一：计算属性computed基础用法实现单向数据关联、监视器实现单向数据关联、计算属性的get,set用法实现数据双向关联、回调函数三要素及何时用怎样用
https://www.bilibili.com/video/BV1hb411K7Ud?p=61.计算属性computed基础用法：实现单向绑定<div id='app'> 姓<input placeholder="First Name" v-model='firstName'><br/> 名<input placeholder="Last Name" v-model='lastName'><br/> <!-- 1.计算属性的原创 2021-03-10 16:13:44 · 269 阅读 · 0 评论 -
对象的get/set用法、利用对象的get/set实现类似vue v-model的双向数据绑定
1.get/set用法// js对象的getter和setter用法var obj={ msg:'hello',// 当[读取]对象的属性时，自动调用get关键字对应的方法 get fn(){ return this.msg //通常直接返回属性 },// 当[设置]对象的属性(obj.msg)时，自动调用set关键字对应的方法 set fn(_msg){//接收属性将要设置的值 this.msg=_msg }}// 以下两种都一样可读取obj的属性msgconsole.l原创 2021-03-09 23:04:37 · 836 阅读 · 0 评论 -
vue管理后台实战一：图形化创建，管理，运行项目、安装element、axios、less
1)图形化初始界面vue ui2)创建–create新项目填写项目名、git 初始记录下一步3）预设：选择手动，功能里打开如下5个：choose vue versionbabel （必须）router （路由）Lint / Formatter（格式校验）使用配置文件（babelrc-将插件的配置保存在各自的配置文件 (比如 ‘.babelrc’) 中)4）配置项如下：Eslint standard config（标准配置）Lint and save：每次保存时检查代码格式5原创 2021-02-01 17:29:52 · 265 阅读 · 0 评论 -
vue外卖二十六：打包并生成报告以优化代码库【完结】
一、打包并生成报告命令vue 脚手架提供了一个用于可视化分析打包文件的包 webpack-bundle-analyzer和配置命令如下：完成后会在根目录下生成一个build文件夹，即打包文件npm run build --report之后会生成一个报告：可查看哪些包比较大，从而进行修改,如下图，面积越大说明对应库体积较大，可进行换库，或其它优化操作；...原创 2020-12-16 20:51:08 · 253 阅读 · 0 评论 -
vue外卖二十五：优化：路由懒加载，实现打包时拆分app.js为多个、图片懒加载、
一、路由懒加载，实现打包时拆分app.js为多个当完成项目进行打包后npm run build，会把自己写的所有js代码放入【app.js】里；npm run serve/npm run dev开发运行时，则在内存中打包成app.js；当各个页面的js代码逻辑非常多时，会造成运行慢，卡此时，使用路由懒加载写法，打包时，可把app.js根据不同页面拆分成多个如1.js、2.js等等。开发运行时也会打包拆分成1.js。。。一般只在主页面上用此方法使用懒加载效果如下：懒加载写法 route原创 2020-12-16 20:38:39 · 2209 阅读 · 0 评论 -
vue外卖二十四：功能完善：时间戳格式化filter、缓存路由组件对象、路由后退push改replace，解决多嵌套路由页面点返回多次无法一次退出到上一个页面民
一、时间戳格式化filter评价列表页面的发布时间：1469281964000，格式化为人可看懂的时间1）新建文件并创建一个filter实例 src/filter/index.jsimport Vue from 'vue'// 【1】将时间戳转日期格式的过滤器Vue.filter('date-format', (dataStr) => { var time = new Date(dataStr); function timeAdd0(str) {原创 2020-12-16 17:35:08 · 231 阅读 · 0 评论 -
vue外卖二十三：搜索页：搜索商家列表ajax请求编写+放入vuex+获取、有数据时显示数据，无数据时显示暂无结果、li标签换成店铺访问链接，tag把router-link转Li+to传参2种写法
一、搜索商家列表ajax请求编写+放入vuex+获取1）准备及获取state page/search/search.vue<!-- 【3】阻止默认提交事件,用search方法代替 --> <form class="search_form" @submit.prevent="search"> <!--【1】绑定数据 --> <input type="search" placeholder="请输入商家名称" class="searc原创 2020-12-16 17:02:49 · 761 阅读 · 0 评论 -
vue外卖二十二：商家详情-商家列表
<template> <div class="shop-info"> <div class="info-content"> <section class="section"> <h3 class="section-title">配送信息</h3> <div class="delivery"> <div> <s原创 2020-12-16 11:02:31 · 783 阅读 · 0 评论 -
vue外卖二十一：商家详情-评价列表-条件过滤显示评价：只显示好评/差评+显示只带内容评价、用getters生成好评数量新状态
一、基本数据标识设计shop/ratings/ratings.vue1）data数据设计data(){ return{ showText:true, //条件1：只显示带文字的评价 ratingType:2, //条件2：评价显示类型：0满意，1不满意，2全部 } }2）事件及样式类设计知识点：绑定样式可写成：:class="{on:showText}其中on为样式，showText为数据也可写成：:class="showT原创 2020-12-15 14:53:24 · 729 阅读 · 0 评论 -
vue外卖二十：商家详情-评价列表：评价列表接口模拟-vuex获取完整数据链流程、滑动better-scroll
一、评价列表接口模拟-获取完整数据链流程1）数据模拟mockjs src/mock/mockServer.js/*使用mockjs提供mock数据接口 */import Mock from 'mockjs'import data from './data.json'// 返回goods的接口Mock.mock('/shop_goods', {code:0, data: data.goods})// 【1】返回ratings的ajax请求接口，为0表示成功，data.ratings,在da原创 2020-12-14 18:23:24 · 341 阅读 · 0 评论 -
vue外卖十九：商家详情-底部购物车组件，购物车相关vuex状态设计、相关计算、清空购物车+滚动购物车
一、购物车基础1）购物车状态设计cartFoods+mutationstore/state.js// 所有要管理的状态数据：从页面需求分析出来，最好和api/index.js里的命名相同export default{ latitude: 40.10038, // 纬度 longitude: 116.36867, // 经度 address: {}, //地址相关信息对象 categorys: [], // 食品分类数组 shops: [], // 商家数组 userI原创 2020-12-12 20:41:46 · 1282 阅读 · 0 评论 -
vue外卖十八：商家详情-食物详情：用ref获取食物详情组件的方法来显示/隐藏子组件、props向子组件传当前食物对象用于显示、@click.stop阻止外层元素的点击事件，让当前点击事件始终有效
1）编写显示隐藏当前组件显示/隐藏方法<template><!-- v-if显示隐藏当前组件--> <div class="food" v-if="isShow">methods: { toggleShow () { this.isShow = !this.isShow } },2）结合ref调用子组件的显示隐藏方法src/pages/shops/goods/goods.vue知识点：1.ref标示.原创 2020-12-11 18:31:03 · 422 阅读 · 0 评论 -
vue外卖十七：商家详情-cartControl组件：购物车加减商品组件及功能
一、基础页面1.创建静态页面+接收props传值src/components/CartControl/cartControl.vue<template> <div class="cartcontrol"> <div class="iconfont icon-remove_circle_outline"></div> <div class="cart-count">1</div> <div cla原创 2020-12-09 16:50:57 · 935 阅读 · 0 评论 -
vue外卖十六：商家-食物列表：用滑动库better-scroll滑动列表、收集列表位移、各子列表top值
一、基础页面+基本滑动功能1）基础页面+逻辑（见附件）2）滑动库：better-scroll官方文档：https://better-scroll.github.io/docs/zh-CN/guidegit ：https://github.com/ustbhuangyi/better-scroll2.1安装cnpm install @better-scroll/core --save// oryarn add @better-scroll/core2.2使用shop/goods/g原创 2020-12-07 18:17:10 · 540 阅读 · 1 评论 -
什么是钩子函数
钩子函数：钩子函数：钩子函数是在一个事件触发的时候，在系统级捕获到了他，然后做一些操作。一段用以处理系统消息的程序。“钩子”就是在某个阶段给你一个做某些处理的机会。钩子函数： 1、是个函数，在系统消息触发时被系统调用 2、不是用户自己触发的钩子函数的名称是确定的，当系统消息触发，自动会调用。例如react的componentWillUpdate函数，用户只需要编写componentWillUpdate的函数体，当组件状态改变要更新时，系统就会调用componentWillUpdate。常见的钩子函原创 2020-12-05 18:00:20 · 17035 阅读 · 0 评论 -
vue外卖十五：商家详情-头部组件shopHeader:动态绑定样式内背景、访问多层+异步渲染的数据对象，报错、vue加动画、结合data数组 动态展示不同类名
1）知识点：动画1.1动态绑定样式内背景<!-- 【1】绑定动态样式 --> <nav class="shop-nav" :style="{backgroundImage: `url(${info.bgImg})`}">1.2访问多层+异步渲染的数据对象，报错【2】此处v-if用于解决报错：Property or method “info” is not defined on the instance but referenced during render.原原创 2020-12-04 14:22:30 · 683 阅读 · 0 评论 -
复制stylus样式后报错：expected “indent“, got “eos“
问题：复制stylus样式后报错意外缩进原因：stylus中混用了tab(\t)和空格(’ ')导致stylus无法正常编译sublime解决：ctrl+shift+p 进入设置搜索框 输入：settings然后在右侧框框中添加："translate_tabs_to_spaces": true重新复制粘贴刚才样式如还不行，重启编辑器即可vscode解决：Editor: insert spaces设为 true，Editor：detect Indentation设为 fals原创 2020-12-04 11:17:35 · 769 阅读 · 0 评论 -
vue外卖十四：商家详情：用mockjs模拟api数据接口
一、1）安装mockjs官网：mockjs.com文档：https://github.com/nuysoft/Mock/wiki/Getting-Startedhttp://mockjs.com/examples.htmlcnpm install mockjs --save2）创建目录/文件2.1使用mockjs形成数据src/mock/mockServer.js/*使用mockjs提供mock数据接口 */import Mock from 'mockjs'import data原创 2020-12-04 10:31:22 · 488 阅读 · 0 评论 -
vue外卖十三：店铺详情:页面路由子组件创建使用、页面框架构建、多tab样式
店铺详情自首页商家列表点入一、设计/创建店铺详情路由组件、头部组件框架分析页面结构设计出目录结构1）创建店铺详情的 目录/文件Shop│ Shop.vue├─Goods│ Goods.vue├─Info│ Info.vue└─Rating Rating.vue2）建立路由/子路由新知识点：export default 导出重命名：import {default as ShopGoods} from '../pages/Shop/G.原创 2020-12-03 16:12:27 · 414 阅读 · 3 评论 -
Vue外卖十二：mint-ui安装+配置+使用、mint-ui退出登录按钮+退出功能+确认弹窗组件、
一、使用 mint-ui1) 主页:文档：https://www.w3cschool.cn/mintui/官方：http://mint-ui.github.io/#!/zh-cn2) 安装:cnpm install --save mint-ui3) 实现按需打包1. 下载cnpm install --save-dev babel-plugin-component2. 修改 babel 配置打开文件 .bablerc 加入如下代码"plugins": ["transform-runtime原创 2020-12-01 16:39:21 · 469 阅读 · 0 评论 -
Vue外卖十一：登录成功信息显示、浏览器cookie+后端session登录状态保持
一、登录后显示1）Msite.vue头部登录后信息<TopHeader :title='address.name'> <!-- 【1】点图标跳转到搜索页 --> <router-link to="/search" class="header_search" slot='left'> <i class="iconfont icon-sousuo"></i> </router-link> <!-- 【3】状态中原创 2020-12-01 12:42:25 · 657 阅读 · 0 评论 -
Vue外卖十-2：登录请求：图形验证码获取、短信前台验证/用户名密码前台验证+登录读取、vuex状态的写+读
一、图形验证1）图形验证码获取<img class="get_verification" //直接请求验证码 src="http://localhost:4000/captcha" alt="captcha" //点击时再请求一次验证码 @click="getCaptacha"> methods:{...略过//获取图形验证码 getCaptacha(){ // 每次请求地址要不同才能进原创 2020-11-29 16:58:14 · 1114 阅读 · 0 评论 -
Vue外卖十：登录页面：切换表单、获取验证码灰变黑,倒计时、显示隐藏密码、登录前台验证
pages/login.vue1.点击 短信登录/密码登录 切换到正确表单<div class="login_header_title"> <!-- 登录方式切换2 --> <a href="javascript:;" :class="{on:loginWay}" @click="loginWay=true">短信登录</a> <a href="javascript:;" :class="{on:!loginWay}" @click="logi原创 2020-11-26 14:20:18 · 966 阅读 · 0 评论 -
Vue外卖八：vuex的配置、状态的管理state,修改mutations,提交actions使用、首页的数据逻辑写入、vuex状态读取、1维数组改2维数组
一、准备vuex文档：https://vuex.vuejs.org/zh/guide/vuex实操：https://blog.youkuaiyun.com/u010132177/article/details/1037445541.dos命令创建store文件夹/文件src/storemd storecd storeecho export default{}>actions.jsecho export default{}>getters.jsecho export default{}>原创 2020-11-18 16:16:08 · 732 阅读 · 0 评论 -
Vue外卖七：ajax请求函数编写（用axios），配置代理用于跨域访问后端
1.ajax请求模块src/api/ajax.js/*ajax请求函数模块返回值: promise对象(异步返回的数据是: response.data) */import Axios from 'axios'export default function ajax(url='',data={},type='GET'){ return new Promise(function(resolve,reject){ let promise if(type==='GET'){ let d原创 2020-11-16 19:35:50 · 231 阅读 · 0 评论 -
Vue外卖六：抽取首页附近商家的列表作为单独组件、登录/注册页面静态样式，路由挂载，路由返回上一页，路由的meta应用：指定页面显示底部导航
一、抽取首页商家列表作为单独组件1.抽取商家列表组件src/components/shoplist/shoplist.vue同时不要忘记把msite下的images/shop | stars拿来<template> <div class="shop_container"> <ul class="shop_list"> <li class="shop_li border-1px">原创 2020-11-09 17:11:22 · 465 阅读 · 0 评论 -
Vue外卖五：首页图标导航加滑动分页swiper6用法
swiper相关文档官网 www.swiper.com.cns3使用说明 3.swiper.com.cn/usage/index.htmls6使用 www.swiper.com.cn/usage/index.html配置Api文档 www.swiper.com.cn/api/pagination/362.htmlvue专有用法 https://github.com/surmon-china/vue-awesome-swiper1.安装swiper因为原创 2020-11-07 17:33:42 · 463 阅读 · 1 评论 -
vue外卖四：抽取公共组件TopHeader——slot的使用、父传子值
一、抽取公共组件TopHeader.vue1.从Msite.vue抽取头部标题到src/components/TopHeader/TopHeader.vue知识点1. 子组件接收父组件传值模板内留下接收位置：<!--1.接收父组件传值，名为title--><span class="header_title_text ellipsis">{{title}}</span>script设置接收值的类型，注意首字母大写//2.接收父组件传的值为title,原创 2020-11-07 11:19:20 · 513 阅读 · 0 评论 -
vue外卖二：引入/配置路由、底部固定导航按钮+样式+路由跳转
一、引入+配置路由1.安装路由// 不单单是生产环境部署，所以安装后，会在package.json内记录cnpm install vue-router --save2.写路由文件src/router/index.jsimport Vue from 'vue'import VueRouter from 'vue-router'import Msite from '../pages/Msite/Msite.vue'import Order from '../pages/Order/Order原创 2020-10-30 09:26:30 · 646 阅读 · 0 评论 -
vue外卖一：vue-cli搭建项目、编码测试、打包发布项目、矢量图标、stylus、分析结构、矢量字体图标、render es6写法、dos建文件/夹、reset.css、移动端头部、0.3s延迟
一、使用 vue-cli(脚手架)搭建项目Vue-cli是 vue 官方提供的用于搭建基于 vue+webpack+es6 项目的脚手架工具在线文档: https://github.com/vuejs/vue-cli3) 操作:npm install -g vue-clivue init webpack gshopcd gshopnpm installnpm run dev #具体在package.json里查看或修改此命令访问: localhost:8080二、编码测试与打包发布原创 2020-10-28 17:10:14 · 463 阅读 · 0 评论 -
NPM概述及使用简介
什么是 NPMnpm之于Node，就像pip之于Python,gem之于Ruby,composer之于PHP。npm是Node官方提供的包管理工具，他已经成了Node包的标准发布平台，用于Node包的发布、传播、依赖控制。npm提供了命令行工具，使你可以方便地下载、安装、升级、删除包，也可以让你作为开发者发布并维护包。为什么要使用 NPMnpm是随同Node一起安装的包管理工具，能解决No...原创 2019-12-31 11:30:20 · 3049 阅读 · 0 评论 -
十、Vue：Vuex实现data(){}内数据多个组件间共享
一、概述官方文档：https://vuex.vuejs.org/zh/installation.html1.1vuex有什么用Vuex：实现data(){}内数据多个组件间共享一种解决方案（类似react的redux）1.2什么情况下使用vuex 虽然 Vuex 可以帮助我们管理共享状态，但也附带了更多的概念和框架。这需要对短期和长期效益进行权衡。 如果您不打算开发大型单页应用，使用 ...原创 2019-12-31 10:02:54 · 1637 阅读 · 0 评论 -
九、响应式发：rem和less（适配移动端）
一、响应式开发响应式开发优先适配移动端又兼容到pc端1.1安装less依赖cnpm install less less-loader --save-dev//记录到devDependencies中，因为这是我们在开发中使用的而非在生产中使用(当然，也可以不加--save-dev)1.2 添加配置到 build/webpack.base.conf.js【配置】,{ //加less...原创 2019-12-28 14:41:39 · 331 阅读 · 0 评论 -
八、Vue-lazyload
一、Vue懒加载文档：https://github.com/hilongjw/vue-lazyload1.安装cnpm i vue-lazyload -S或npm i vue-lazyload -S2.实例导入配置等操作 src/main.jsimport Vue from 'vue'import App from './App'import router from './r...原创 2019-12-26 15:29:09 · 433 阅读 · 0 评论 -
七、Vue组件库：Element、Swiper（轮播专用组件）
一、vue的Element组件库官网：https://element.eleme.cn/#/zh-CN1.1安装推荐安装方法：首先要进入项目目录cnpm i element-ui -S 或npm i element-ui -S1.1.2 CDN安装直接引入无需安装：<!-- 引入样式 --><link rel="stylesheet" href="http...原创 2019-12-26 14:57:27 · 8504 阅读 · 0 评论 -
六、Vue-Router：基础路由处理、路由提取成单独文件、路由嵌套、路由传参数、路由高亮、html5的history使用
一、vue-router的安装【官网】：https://cn.vuejs.org/v2/guide/routing.html【router文档】：https://router.vuejs.org/zh/1.1直接下载 / CDNhttps://unpkg.com/vue-router/dist/vue-router.jsUnpkg.com 提供了基于 NPM 的 CDN 链接。上面的链接...原创 2019-12-25 16:39:36 · 739 阅读 · 0 评论 -
Vue点到子路由，父级，无法高亮问题解决
[问题] Vue点到子路由，父级，无法高亮【原因】多是因为链接简写相对路径没有写完整导致【解决】把子路由的router-link的to属性里链接写完整、并把router配置文件里path也写完整即可1. hello.vue【1】以下是路由链接 注意路径to要加上主组件，这样点到子路由里，主路由设置颜色才不会消失<template> <div> <...原创 2019-12-25 16:30:11 · 1906 阅读 · 0 评论