![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue学习
前端菜菜怂
这个作者很懒,什么都没留下…
展开
-
前端性能优化【vue-cli使用CDN引入】
1. index.html引入:在public文件中的index.html中引入,要注意引入的顺序,vue必须在前面<body> <div id="app"></div> <script src="//unpkg.zhimg.com/vue@2.6.11/dist/vue.min.js"></script> <script src="//unpkg.zhimg.com/vue-router@3.2.0/dist/vue-rou原创 2020-08-19 20:58:12 · 1009 阅读 · 2 评论 -
前端性能优化【vuecli开启gzip压缩以及nginx的配置】
1.安装compression-webpack-pluginnpm install compression-webpack-plugin -D2.vue.config.js配置gzip压缩// 导入compression-webpack-pluginconst CompressionWebpackPlugin = require('compression-webpack-plugin');// 定义压缩文件类型const productionGzipExtensions = ['js', 'c原创 2020-08-14 22:39:55 · 700 阅读 · 3 评论 -
vue中关于$emit和.sync的用法
父组件可以使用props 把数据传给子组件。子组件可以使用 $emit触发父组件的自定义事件而vue中对$emit的定义如下:触发当前实例上的事件。附加参数都会传给监听器回调。vm.$emit( eventName, […args] )参数: {string} eventName [...args]1.Props传递数据components ├── Grandson1.vue // 孙子1 ├── Grandson2.vue // 孙子2 ├── Parent.vue原创 2020-08-14 09:58:39 · 1499 阅读 · 0 评论 -
vue+node+socket.io开发的一个简易聊天室
1.安装nodejs-websocketnpm install nodejs-websocket原创 2020-08-12 16:16:46 · 11781 阅读 · 28 评论 -
vue个人博客开发记录-使用axios拦截器实现数据加载之前的loading动画显示(四)
1.创建Loading组件<template> <div class="loading"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul&原创 2020-07-22 16:30:52 · 399 阅读 · 0 评论 -
vue个人博客开发记录-实现文章点赞功能(三)
1.后端1.1 增加文章中点赞对应的规则const articleSchema = monoogse.Schema({ categories:[{ type:monoogse.SchemaTypes.ObjectId, ref:Category }], .....省略 //添加点赞对应的规则,关联User(用户表) praise:[{ type:monoogse.SchemaTypes.ObjectId, ref:'User' }]1.2 增加原创 2020-07-21 18:22:40 · 2346 阅读 · 0 评论 -
vue个人博客开发记录-文件上传&vue-quil-editor&mongo多层查询(二)
1.创建管理员1.1 文件上传处理express 本身是获取不到文件上传的数据,所以需要一个中间件来专门处理中间件 multermulter({dest: './uploadImages'})表示将上传的图片传输到指定文件夹(这里以uploadImages为例,如果没有该文件夹,会自动生成),如果不添加dest属性,这些文件将保存在内存中,永远不会写入磁盘const multer = require('multer')const path = require('path') // 路径原创 2020-07-17 16:35:30 · 356 阅读 · 0 评论 -
在vue中实现一个简单的购物车思路
记录一下学习购物车的思路首先把所需要的数据存入vuex中...mapState({cartFoods:'cartFoods',info:'info'});//cartFoods表示购物车上面所显示的食物列表;info表示购物车下面显示的配送费和最低消费,即获取商家信息列表的数据...mapGetters({totalCount:'totalCount',totalPrice:'totalPrice'})//totalCount表示购物车中的食物列表数量,totalPrice表示总价钱其.原创 2020-05-26 16:37:53 · 1820 阅读 · 0 评论 -
Vue学习笔记——二、指令
2. 指令2.1 插值表达式({{ }})和v-text的两个区别使用插值表达式,在网速较慢的情况下,存在内容闪烁的问题(即直接在页面上渲染{{ 内容 }}),而v-text没有闪烁问题在插值表达式中,可以使用v-cloak解决闪烁问题<style> [v-cloak]{ display:none; }</style>//v-cloak属性在页面渲染完成后会被移除<h2 v-cloak>{{msg}}</h2&g原创 2020-05-08 18:42:23 · 148 阅读 · 0 评论 -
Vue学习笔记——一、MVVM
1. MVVM//此处 new Vue() 得到的VM实例就是MVVM中的 VM 视图,提供了双向数据绑定的能力const vm = new Vue({ el:'#app', //此处el属性指定的元素就是MVVM中的 V 视图 data:{ //此处的data属性就是MVVM中的 M 视图 msg:'hello' }})MVVM是一种设计思想...原创 2020-05-07 22:22:42 · 235 阅读 · 0 评论 -
浅谈async/await
ES7的async/await语法在2016年就已经提出来了,惭愧的是我最近才接触使用,,下面来聊聊解决了什么问题在async/await之前,我们有三种方式写异步代码嵌套回调以Promise为主的链式回调使用Generators但是,这三种写起来都不够优雅,ES7做了优化改进,async/await应运而生,async/await相比较Promise 对象then 函数的嵌套,与 G...转载 2020-04-23 19:40:48 · 403 阅读 · 0 评论 -
Vue-项目中遇到的知识点--作用域插槽
作用域插槽作用域插槽,我的理解是:第一:在子组件中绑定我们需要的数据第二:从父组件中,通过使用已经注册的子组件标签,然后在属性slot-scope进行定义,从而使用子组件中绑定的数据。<div id="father"> <son> <!-- 2.获取子组件中绑定的数据info --> <...原创 2020-04-23 15:58:27 · 213 阅读 · 0 评论 -
Vue-项目中遇到的知识点-rules验证规则
学习项目中遇到的知识点一、 data()中使用Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item 的 prop 属性设置为需校验的字段名即可<el-from>标签要绑定rules属性,即在标签内部声明 rules = "loginFormRules" 双引号内名字可以自己定义,随后在data中声明此为表单验证规则对象&l...原创 2020-04-22 13:21:42 · 8170 阅读 · 0 评论