VUE - 技术教程文章
Vue中如何监听组件的原生事件【图】
在首页开发中，右下角有一个返回顶部的小箭头，将它单独封装成一个BackTop组件，但是它何时出现需要依赖于首页的滑动，即另外一个Scroll组件。如果直接在BackTop组件里面监听，则需要通过this.$emit将事件发射到Home组件中，又在Home中监听自定义事件，比较复杂。因此，我们直接在Home中对BackTop组件进行监听，使用 .native官网对于native的解释为:.native：监听组件根元素的原生事件代码如下：在Home.vue中对back-top组件进行点击...
vue3.x初探之v-model的详细使用【代码】
1、用于自定义组件时，v-model的prop和默认事件名更改了，并且移除了model选项//父组件 <template><div><Child v-model="message" /><div>绑定的值：{{message}}</div></div> </template>//子组件 <template><div><input type="text" :value="modelValue" @input="$emit(‘update:modelValue‘, $event.target.value)"></div> </template> <script> export default {//2.x用法,可以修改prop和触发的事件名称，model以废弃// model:...
vue slot 复用【代码】
话不投机半句多，直接上代码有3步第一步：创建渲染slot的组件 重要第二步：为slot添加父组件数据（props） 重要第三步：使用第一步：创建渲染slot的组件首选创建一个单文件组价，由于我们是使用的slot（父组件传进来的），所以，我们只需要创建js文件即可，而不用创建.vue文件// slot.js export default {name: 'Slot', // slot的名字，调试使用functional: true, // 使组件无状态 (没有 data ) 和无实例 (没有 this 上下文)。他们...
深入浅出的webpack构建工具--webpack4+vue搭建环境 (十三)【代码】【图】
深入浅出的webpack构建工具--webpack4+vue搭建环境 (十三)从上面一系列的webpack配置的学习，我们现在来使用webpack来搭建vue的开发环境。首先我们来设想下我们的项目的目录结构如下：### 目录结构如下： demo1 # 工程名 | |--- dist # 打包后生成的目录文件 | |--- node_modules # 所有的依赖包 | |--- app | |...
美团小程序框架mpvue入门教程【代码】
自打写了 美团小程序框架mpvue蹲坑指南, 一发不可收拾，今天趁周末空闲，来写个mpvue(没朋友)的简单入门教程，本教程只针对新手，老鸟勿喷。另外，我还专门为本文做了一个简单的项目，如果懒得从头开始搭项目的童鞋，可以直接去我的 github上克隆到本地， 安装一下依赖，即可直接在此基础在开发，不需要做任何配置。如果你觉得该项目对有帮助， 请顺便给我Star,你们的支持是我最大的动力，谢谢!好了，我们进入主题，首先，请允许引...
vue安装【代码】
https://www.jianshu.com/p/be837ce202dbwindows下使用IDEA创建VUE项目忘川之畔彼岸花开 0.867 2018.01.04?11:39:43 字数?689 阅读?25,253 1.环境搭建 1.1检测是否安装好nodejs和npm 检测命令node?-vnpm?-v如果没有安装需要先安装nodejs的下载路径：https://nodejs.org/en/download/在Windows上安装时务必选择全部组件，包括勾选Add?to?Path。安装完成后，在Windows环境下，请打开命令提示符，idea?cmd窗口 然后输入node?-v，如果安...
vue 获取字符串日期间的差值【代码】
/*** 获取当前日期* @returns {string}* @Example getNowTime(‘-‘)*/getNowTime(str){let nowDate = new Date();let y = nowDate.getFullYear();let m = nowDate.getMonth() + 1 < 10 ? "0" + (nowDate.getMonth() + 1) : nowDate.getMonth() + 1;let d = nowDate.getDate() < 10 ? "0" + nowDate.getDate() : nowDate.getDate();if(str){return y + str + m + str + d;}else{return y + ‘年‘ + m + ‘月‘ + d + ‘日‘;}},/*...
vue-router单页应用简单示例（一）【图】
请先完成了项目初始化，具体请看我另一篇博文。vue项目初始化看一下完成的效果图，很典型的单页应用。.vue后缀名的单文件组件 这里先说一下我对组件的理解。组件，顾名思义就是一组元素组成的一个原件（理解的比较浅显、直白），在Vue.js中，表现为一个自定义元素。开篇展示的图中，首页的的列表中的每一项就可以看成一个组件（事实上，在demo中，我也是这么做的），这个组件由一张图片，一个显示价格的元素，一个显示名称的元素组...
解决vue与传统jquery插件冲突
比如基于jquery的select2插件，在vue下单独用有很多问题，其实对于这类插件，可以用vue的自定义指令和组件来包装，解决冲突的问题。引用官方vue1.0和2.0的两个例子，学习一下。例子1.0 例子2.0原文：http://www.cnblogs.com/zhansu/p/6112837.html
vue3-lazy 的使用
#### Installnpm install vue3-lazy -S#### 引入 main.jsdemo: import { createApp } from ‘vue‘import App from ‘./app‘import lazyPlugin from ‘vue3-lazy‘const app = createApp(App)app.use(lazyPlugin, { loading: ‘loading.png‘, error: ‘error.png‘})app.mount(‘#app‘)实例：createApp(App).use(store).use(router).use(lazyPlugin, { loading: require(‘@/assets/images/default.png‘)})#### 使用<ul> <...
Electron-vue在发送请求时携带cookie【代码】【图】
Electron-vue在发送请求时携带cookie博客说明文章所涉及的资料来自互联网整理和个人总结，意在于个人学习和经验汇总，如有什么地方侵权，请联系本人删除，谢谢！解决axios一般呢我们会遇到在vue项目使用它来发送的我们的请求，相当于ajax我们在使用axios的时候默认给它配置例如我在项目调用请求的时候封装了一个request类，在引入axios的时候，给它初始化配置代码import axios from ‘axios‘ axios.defaults.withCredentials=true...
vue常用知识点【代码】
vue中图片路径写法<img :src="avatorSrc" alt=""><img :src="avatorSrc2" alt=""> data:function(){return {avatorSrc:"https://p.ssl.qhimg.com/dmsmty/74_100_100/t01073ee43c0b8459e4.webp",avatorSrc2:require("../../assets/avator.png"),//图片在本地}} 2.代码中实现路由跳转<el-menu-item index="1-1" @click="goRouter(‘/workbench/Needs‘)">needs</el-menu-item> <el-menu-item index="1-2" @click="goRouter(‘...
SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 后端篇（三）： 整合阿里云 OSS 服务 -- 上传、下载文件、图片【代码】【图】
（1） 相关博文地址：SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 前端篇（一）：搭建基本环境：https://www.cnblogs.com/l-y-h/p/12930895.html SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 前端篇（二）：引入 element-ui 定义基本页面显示：https://www.cnblogs.com/l-y-h/p/12935300.html SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 前端篇（三）：引入 js-cookie、axios、mock 封装请求处理...
vue设置多个入口【代码】【图】
做VUE项目时，有时想做多个入口来解决某些问题。在根目录下的复制一份index.html，名称随便你命名，当然，你也可以都是放到一个文件夹下，我的就叫index1.html然后在App.vue也复制一份，我的也叫App1.vue然后main.js也复制一分，我的还 是命名main1.js在main1里面更改下，把import App from"./App";改为import App from"./App1";其它 可以不用变。然后到build文件夹里面。webpack.base.conf.js文件在entry添加一个入口，如图webpac...
Vue Zero · 啟【代码】【图】
其实，一开始我应聘的是Spark，Hadoop这样的，然后后面呢，发现只有Java的业务给我写了，再后面我发现，公司招不到前端，所以前端要由后端来写，刺激！！！数据驱动首先要明白一个概念，那就是DOM其实是数据的一种映射，在之前jQuery的时代，当数据发生改变时，我们需要手动改变DOM，而Vue的目的就是省去手动操作修改DOM。在Vue中，需要改变的仅仅是数据。当数据改变时，Vue通过directives指令对DOM进行修改。Vue还会对视图进行监听...
vue实现对学生信息管理-增删改查【代码】【图】
效果图： 修改功能不够好，应该在修改时弹出一个专门的修改窗口进行修改功能。增加就是向数组里添加，使用.push()就行，删除和修改都使用splice(),查询将数组里的学号与输入的学号进行对比，查找到后弹出窗口显示该学生姓名。代码如下：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>学生信息管理</title><link rel="stylesheet" h...
【转】vue项目打包部署——nginx代理访问【图】
我又来了，今天部署了下vue项目，使用nginx做了代理，这样可以解决跨域的问题，这里做一个简单讲解。1.先看vue项目打包（我这里使用的是vscode开发工具）这里是我的项目结构：打包之前需要修改如下配置文件：配置文件一：build>>utils.js (修改publicPath:"../../" , 这样写是处理打包后找不到静态文件的问题)配置文件二：config>>index.js(修改assetsPublicPath:‘./‘ ,修改目的是为了解决js找不到的问题)上面两步修改完成之后就...
手撕vue-cli配置——webpack.base.conf.js篇【代码】
在开始写webpack.base.conf.js（简称base）之前，我们先来看一下vue-loader.conf.js这个文件，毕竟在base中我们还会用到：‘use strict‘//引入前一篇文章的utils文件 const utils = require(‘./utils‘) //引入config文件 const config = require(‘../config‘) //判断当前是否为生产环境，如果是则返回true const isProduction = process.env.NODE_ENV === ‘production‘ //是否使用sourceMap，如果是生产环境就使用config文件...
使用proxyTable解决vue里的跨域问题【代码】【图】
由于没有跨域的接口，所以，用8080端口请求8081端口，来模拟跨域。跨域会出现下面报错。 1.找到config文件夹下index.js，在proxyTable对象里复制以下代码： proxyTable: {‘/apis‘: {// 测试环境target: ‘https://localhost:8081‘, // 接口域名changeOrigin: true, //是否跨域 pathRewrite: {‘^/apis‘: ‘‘ //需要rewrite重写的, } }}, 注意：【更改完这个配置文件后，需要重启项目】 2...
【vue 开发】Vue中splice的使用【代码】
splice(index,len,[item])它也可以用来替换/删除/添加数组内某一个或者几个值（该方法会改变原始数组）index:数组开始下标 len: 替换/删除的长度 item:替换的值，删除操作的话 item为空删除： //删除起始下标为1，长度为1的一个值(len设置1，如果为0，则数组不变)var arr = ['a','b','c','d']; arr.splice(1,1); console.log(arr); //['a','c','d']; //删除起始下标为1，长度为2的一个值(len设置2)var arr2 = ['a','b','c','d'] ...
vue : 使用stylus less （包括sublime插件支持）【代码】
版本：vue 2.5.2webpack 3.6.0 先说stylus。用npm装个包。npm install stylus stylus-loader --save-dev然后在.vue文件中使用。<style lang="stylus"> ... </style>然后是sublime。需要装两个插件：高亮、自动完成。高亮：https://github.com/billymoon/Stylus自动完成：https://github.com/lnikell/stylus-clean-completions如果你的网络和我一样连不上sublime的服务器，那么装自动完成插件会稍微麻烦一点...因为这个插件是一个....
Vue.js说说组件【代码】【图】
什么是组件：组件是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义的元素，Vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以是原生HTML元素的形式，以is特性扩展。 如何注册组件？ 需要使用Vue.extend方法创建一个组件，然后使用Vue.component方法注册组件。Vue.extend方法格式如下：var MyComponent = Vue.extend({// 选项...后面再介绍 }) 如果想要其他地方使...
关于vue中的周期函数
vue中的周期函数=生命周期函数=生命周期钩子=生命周期事件 说白了就是创建一个实例对象后，从创建 运行 以及销毁中所发生的事件：什么是生命周期：从vue实例的创建 运行 销毁过程中会伴随各种各样的事件，这些事件统称为周期函数1.创建期间的周期函数：beforecreate():实例在内存中刚被创建出来，此时还没有初始化好data和methods属性created():实例已经在内存中创建好，此时data和methods已将ok,此时还没有编译模板beforemount(...
vue自动完成搜索功能的数据请求处理【代码】【图】
在现在的互联网世界里，自动完成的搜索功能是一个很常见的功能。比如百度、搜狗、360搜索 ...功能描述一下大概是这个样子的：有一个搜索框，用户在里面输入要查询的条件，系统会“智能”判断用户输完了，然后自动根据条件去搜索相关的数据返回给用户。网上这个自动完成的插件很多，实现自动完成功能也不复杂，特别是像vue、angularjs、react这类可以实现双向绑定的库出现以后，实现就更方便了。本文不讲自动完成功能的实现，而是介...
vue项目性能优化【代码】
Vue 代码层面的优化；webpack 配置层面的优化；基础的 Web 技术层面的优化。一、代码层面的优化1.1、v-if 和 v-show 区分使用场景v-if?是?真正?的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。 v-show?就简单得多， 不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 的...
Vue中正确使用jQuery的方法【代码】
题主Vue小白，入门demo时想在其中使用jQuery（当然可能是不推荐的做法哈，毕竟俩儿的风格不一样，但万一你就需要呢 _^ ^_），结果遇到问题，最终倒腾解决。编译报错：$ is undefined or no-undef ‘$‘ is not defined假设你已经使用vue-cli搭建好了开发的脚手架，接下来，看下面。1.NPM 安装 jQuery，项目根目录下运行以下代码npm install jquery --save2.webpack配置在项目根目录下的build目录下找到webpack.base.conf.js文件，在...
Vuejs 3.0 正式版发布！One Piece. 代号：海贼王【图】
Vue 团队于 2020 年 9 月 18 日晚 11 点半发布了 Vue 3.0 版本。那个男人总喜欢在深夜给我们带来意外惊喜！以下为 Vuejs Release 3.0 机器翻译文章，原文 v3.0.0 One Piece。“ https://github.com/vuejs/vue-next/releases/tag/v3.0.0 ”# Vue 3.0 发布今天，我们很荣幸地宣布 Vue.js 3.0“One Piece”的正式发布。这个框架的新的主要版本提供了改进的性能、更小的捆绑大小、更好的 TypeScript 集成、用于处理大规模用例的新 API，...
用于后台管理基于iview，vue的穿梭框【代码】
引入文件：<link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css"><script src="//vuejs.org/js/vue.min.js"></script><script src="//unpkg.com/iview/dist/iview.min.js"></script>html：<div id="iviewTrasnsfer"> <transfer :titles="titles" :data="data_" :target-keys="targetKeys1" :render-format="render" @on-change="handleChange"></tr...
vuex的使用详解大全【代码】【图】
引言：vue的vuex是一个全局状态管理工具，有强大的社区所贡献，方便达到一端改变全局改变功能，这里就不强调如何使用了，单独讲解一下如何更好的使用这个工具。先说一下这个使用的场景，如果仅是父子组件传值这个大可不必使用，当你用本地存储和广播事件都不能满足你的需求时，你就可以考虑使用vuex来管理你的数据了。使用方法：import Vue from ‘vue‘ import Vuex from ‘vuex‘ Vue.use(Vuex) let state = { //vuex的状态对象 ...
Vue Element UI 图片上传【代码】【图】
Vue Element UI 图片上传ElementUI upload组件上传图片，多看看文档参数，基本没什么难度，我总结以下个人的需求。文档里面其实都有说明，我这边给出使用例子，方便他人。参照ElementUI官网:https://element.eleme.cn/#/zh-CN/component/upload#yong-hu-tou-xiang-shang-chuan上传权限验证 (需要heades里面加上token)预览上传图片(这个其实就很简单了, 我没仔细看文档)上传headers添加token由于我接口限制了headers token验证，所以...