VUE - 技术教程文章

vue通过input选取apk文件上传,显示进度条

<template> <div class=""> <form action="" method="post" class="upload" ref="upload"> <button class="sign" id="uploadFile">选择文件</button> <input type="file" accept=".ipa,.apk" name="upload" id="file" @change="fileSelect($event)"/> </form> <button type="button" class="btn" id="upfile" @click="submit" v-if="!isSave"> </div></tem...

vue 的虚拟 DOM 有什么好处?

vue 中的虚拟DOM有什么好处?快!首先了解浏览器显示网页经历的5个过程 1、解析标签,生成元素树(DOM树)2、解析样式,生成样式树3、生成元素与样式的关系4、生成原始的显示坐标5、显示页面 修改真实DOM每修改一个元素,那么这5个过程都要重新走一次。修改10个元素就走10遍。 修改虚拟DOM虚拟DOM存储在内存中,对10个元素的修改是在虚拟DOM中进行,修改完后,比较虚拟DOM和真实DOM的差异,当有差异时,再一次过去更新网页的显示,...

Vue学习

Vue学习  数据绑定    {{ msg }} 双向    {{* msg }} 只绑定一次    {{{ htmlInfo }}} 表示htmlinfo里 有html标签 ,里面的{{}}将不可用    Vue.partial(‘my-partial‘, ‘<p>This is a partial! {{msg}}</p>‘) 可以动态html并包含{{}}    {{number+1}}  {{ok?‘yes‘:‘no‘}} {{message.split(‘‘).reverse().join(‘‘)}} 支持js表达式,不支持语句,if,支持三元    {{ message | filterA | fi...

Vue2.0+Node.js+MongoDB 全栈打造商城系统

第1章 课程介绍简单回顾前端近几年的框架模式,了解不同时期下的框架特点。其次介绍Vue框架的背景和核心思想,以及同其它MV*框架的对比。1-1 课程-导学1-2 前端框架回顾1-3 vue概况以及核心思想1-4 vue框架优缺点对比第2章 Vue基础从0到1,如何搭建一个简单的Vue项目;本章节主要讲解Node和Npm环境的搭建,其次介绍vue-cli脚手架的使用,以及通过详细拆解介绍脚手架生成的配置文件信息,最后给大家介绍了Vue涵盖的基础语法。2-1 no...

Vue实现active点击切换样式【代码】

1.html <div class="filter-nav" v-for="(item,index) in filterData.navTab" :key="index" :class="{‘active‘:currentSort==index}" @click="active(index)"><span>{{item.name}}</span><i v-if="item.icon" :class="‘fa fa-‘+item.icon"></i></div>2.在循环的代码那里添加 :class="{‘active‘:currentSort==index}"3.添加样式.active {color: #009eef; }4.初始化数据 data() {return {currentSort:0,}},5.调用方法 meth...

vue换一换功能原型

<html> <meta charset="utf-8"> <head> <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script> </head> <body> <div id="app"> <ul v-show="flag==1"> <li v-for="item in lists.slice(0,3)">{{item.name}}</li> </ul> <ul v-show="flag==2"> <li v-for="item in lists.slice(3,7)">{{item.name}}</li> </ul> <ul v-show="flag==3"> <li v-for="item in lists.slice(7)">{{item.na...

vue-cli2/3打包增加版本号,解决缓存问题【代码】

vue-cli 2.0在webpack.prod.conf.js代码配置 最顶层 增加 const version = new Date().getTime()cosnt webpackConfig = merge(baseWebpackConfig, {..., // 此处省略// 增加outputoutput: {path: config.build.assetsRoot,filename: utils.assetsPath(`js/[name].[chunkhash].${version}.js`),chunkFilename: utils.assetsPath(`js/[name].[chunkhash].${version}.js`),}...,// 在 new HtmlWebpackPlugin new HtmlWebpackPlugin({...

Vue 前端环境的搭建过程

Node.js 的安装和环境变量的配置参考:Node.js安装及环境配置之Windows篇配置国内数据源注意:在安装好了 npm 以后,修改数据源为淘宝的,因为使用官方的镜像源太慢了。查看当前数据源:npm config get registry设置淘宝镜像源:npm config set registry https://registry.npm.taobao.org配置缓存目录和模块安装目录参考:Node.js安装及环境配置之Windows篇npm 和 cnpm 的区别: cnpm 是国内的版本,其实在设置了淘宝源以后,根本不...

用Vue来实现音乐播放器(二十):Vuex初始化及歌手数据的配置【图】

state:所有组件的所有状态和数据 放入同一个内存空间去管理 我们把它称为state Vue Components:state里面的数据可以方便的映射到组件上 然后渲染组件 Actions:当组件的数据发生变化的时候 它可以通过Dispatch一个Actions 然后Actions可以做一些异步操作 比如与后端的一些交互 然后它可以取commit一个mutations 注意:我们也可以在组件中直接commit一个mutations Mutations:是唯一可以修改State的途径 其他任何方式修改都是不...

Vue 项目上线到 Centos 系统【代码】【图】

Vue 项目发布流程 linux版一、通过node创建 Web 服务器创建node项目,并安装express,通过express快速创建web服务器,并将vue打包生成dist文件夹,托管为静态资源主要代码如下:const express = require(‘express‘)//创建web服务器 const app = express()//托管静态资源 app.use(express.static(‘./dist‘))//启动web服务器 app.listen(80,()=>{console.log(‘web server running at http://127.0.0.1‘) }) 1)新建 发布文件夹...

vue图片、背景图片路径问题【代码】

vue图片、背景图片路径问题vue中引入图片经常会出现路径问题,在此记录一下:1.组件中 <img> 引用图片<img src="../assets/img/logo.png" > 2.app.vue <style>中引入图片 body {background: url(‘../static/img/back5.jpg‘);} 3.组件行间样式引入背景图片 <div style="background-image:url(’static/img/1.jpg‘)"> 行间动态引入背景图片 <div :style="‘background-image:url(\‘static/img/‘+btnscard.back+‘\‘)‘"> 原...

vue插槽传值【代码】

子组件<template> <div> <slot name="icon" :text="text"></slot> </div> </template> <script> export default{ name: ‘YtIcon‘, data(){ return { text:"我是子组件" } } } </script>父组件<template> <div id="app"> <yt-icon> <!-- 通过slot-scope --> <template slot="icon" slot-scope="data"> {{data.text}} </template> </yt-icon> </div> </template> 原文:https://www.cnblogs.com/jiorence/p/14715584.html

vue 上传二进制图片【代码】

1.前段代码<el-form-item label="证件照片" prop="idImage"><input @change=‘ss‘ type="file"> </el-form-item>2.script代码 ss(event){var reader =new FileReader();//创建读取文件的方法var img1=event.target.files[0];reader.readAsDataURL(img1);//将文件已url的形式读入页面var that=this;reader.onload=function(e){ that.ruleForm.idImage= reader.result; //把图片的二进制流付给表单ruleForm里面的idImage }// ...

ant-design-vue 快速避坑指南【代码】【图】

ant-design-vue是蚂蚁金服 Ant Design 官方唯一推荐的Vue版UI组件库,它其实是Ant Design的Vue实现,组件的风格与Ant Design保持同步,组件的html结构和css样式也保持一致。 用下来发现它的确称得上为数不多的完整的VUE组件库与开发方案集成项目。本文主要目的是总结一些开发过程中比较耗时间去查找,文档中没有具体说明的常见问题,同时希望能给新上手此框架的同学提供一些参考作用。 1.Table对接后台返回数据针对Table数据格式与...

构建 webpack 和 vue 的环境

前端真是日新月异了,前不久的教程就很多不一样了。搭环境搭了几小时,终于搭好了。首先奉上别人的老版教程,可以先按这个来:点击查看老版可以先跟这个来,按照教程开始打包后会报错。现在好好说说其中跟现在不一样的坑。 报错一:现在webpack已不支持自定义属性了,故 webpack.config.js 中的 Favlist 的键值对要删掉。报错二:config.resolve.extensions[0] 不能为空,故要删去相对应的数组中第一项的空字符串,只留 ‘.js‘ 和...

vue面试题!!!【代码】【图】

由于公司需要,需要把项目拆分,前端使用vue框架。最近面试vue总结的试题 1:mvvm框架是什么?它和其他框架的区别是什么?mvvm 全称model view viewModel,model数据模型,view视图层,viewModel就是链接两者区别的话,其实就是vue是数据驱动,通过数据来显示视图层而不是节点操作,这也是减少DOM操作,提高了性能下面来个图加强一下关系:2:v-model是什么?vue中标签怎么绑定事件?v-model可以实现双向绑定,v-class、v-for、v-if...

VUE Vue Element UI 改变走马灯的高度

1、 页面代码:设置高度变量 :height="banH +‘px‘"<template> <div class="home"> <div class="slider"> <el-carousel :interval="5000" arrow="always" :height="banH +‘px‘"> <el-carousel-item v-for="img in banImgList" :key="img.id"> <img :src="img.image" class="picImg"/> </el-carousel-item> </el-carousel> </div> </div></template>2、引入静态图片数据,初始化高度,...

Vue.js 第2篇学习笔记

vue.js最强大的,应该是自动更新DOM了。只要把变量包裹在{{ }}里面,就会在处理完毕后,直接显示处理后的结果。貌似所有变量都可以放在一个vue对象的data属性里面,然后就可以在储存函数的computed , methods 属性里面通过this关键字来使用这些变量。this 就是vue对象了。至于绑定属性,可以:link=“varHref” :style=“{height: varHeight +px}” 这种简单的操作来做。其实是v-bind的简写。甚至可以@click 代替 v-on:click 。可以...

理解 vue-router的beforeEach无限循环的问题【代码】【图】

在理解beforeEach无限循环之前,我们先来看一下beforeEach相关的知识点,该篇文章的项目是基于 express+vue+mongodb+session实现注册登录 这篇文章项目基础之上进行讲解的,因为登录完成后,会跳转到列表页面,那么在跳转到列表页面之前,我们会使用 router.js 使用beforeEach来判断下,如果登录成功,并且session在有效期内的话,就跳转到下一个页面去,否则的话,就重定向到登录页面去。app/index/router.js 代码如下:import Vu...

从零开始利用vue-cli搭建简单音乐网站(一)【图】

最近在学习vue框架,练习了一些例子之后,想着搭建一个vue项目,了解到官方有提供一个vue-cli工具来搭建项目脚手架,尝试了一下,写下博客来记录一下。一、工具环境1、node.js 6.10.0,目前node.js最新版本是8.7.0,可以到官网下载最新版本安装。链接:http://nodejs.cn/download/2、编辑器,Hbuilder 8.8.43、windows 8.1二、创建项目1、安装node.js,默认安装在"C:\Program Files\nodejs",随node.js安装的还有包管理工具npm(关...

vue小知识

1、keep-alive在vue项目中路由跳转会使页面重新渲染,在router-view外面加入keep-alive可以阻止页面刷新,但是缺点是基本的生命周期钩子实效,使用actived这个钩子,比如对城市进行选择,并且在另一个界面上进行渲染,要判断当前点击的城市和原来的城市是否一样,一样的话不进行跳转,不一样进行跳转2、路由的懒加载 如果js太大的话,我们通常将他拆开,变小,写成回调函数()=>import()3、服务端渲染ss后端没有dom 解决两个问题...

vue中使用echarts【代码】

1.安装npm install echarts -S2.引入全局引入main.js中// 引入echarts import echarts from 'echarts'Vue.prototype.$echarts = echarts 按需引入全局引入会将所有的echarts图表打包,导致体积过大,最好还是按需引入let echarts = require('echarts/lib/echarts') require('echarts/lib/chart/pie'); require('echarts/lib/component/grid'); require('echarts/lib/component/legend'); require('echarts/lib/component/tooltip')...

vue--实例化对象【代码】【图】

根目录下的文件,这些是创建vue项目时生成的配置文件 node_modules=> 里面的文件是项目开发过种中的各种依赖,我们暂且不用去深入了解;public=> 主要放的是一些公用的文件,比如一些icon(即我们在收藏网址,网址前面的图标识别)src=> 这是我们整个项目的核心部分。我们所写的代码会全部放在这个文件夹下。assets=> 存放的是一些静态资源:比如图片,css文件,js文件;components=> 存放组件views=> 存放所有的页面App.vue=> 根组...

关于vue跨域名对接微信授权认证和APP授权认证【图】

这种情况一般也只会出现在前后端分离,跨域名授权的时候吧。耗费了一个前端+一个后台+一个网关,熬夜通宵了两天才整出来一套方法(你们见过凌晨6点的杭州吗,对,我下班的时候天黑了,到家天亮了。。。。),和开发APP第三方各种联系,各种百度、谷歌what、why...先说说和微信的授权认证吧,后台和网关直接的逻辑流程就不说了,就说前端的:前端业务逻辑是在加载页:1.请求网关接口,获取用户授权状态。2.如果授权过就直接跳转首页...

vue生成可选择的表格【代码】【图】

最近工作中遇到一个这样的需求, 后台给出宽度和高度, 然后前端展示成上面的样子 , 颜色随便给的灰色: 超出边缘的不用分 , 无法被选中绿色: 已经被占用的 , 无法被选中白色 : 可以选择的区域 , 点击会变成 红色 再次单击 会取消 最终需求: 在白色区域 选择一个 ‘ 坐标 ‘ 代码如下 vue 项目<template><div><el-button @click="openDialog" type="primary" size="mini">打开dialog</el-button><el-dialog title="外层 Dialog" :vi...

Vue-router【代码】

0、理解1、 VueRouter(): 用于创建路由器的构建函数new VueRouter({// 多个配置项})2、路由配置routes: [{ //一般路由path:‘/about‘,compontent:About},{ //自动化跳转路由path: ‘/‘,redirect: ‘/about‘}]3、注册路由器 import router from ‘./router‘ new Vue ({router })4、使用路由组件标签- <router-link>: 用来生成路由链接<router-link to="/xxx">Go to xxx<router-link>- <router-view>: 用来显示当前路由组件界面...

VUE实现可随意拖动的弹窗组件

背景:项目需要,我们引入了前端框架就是目前最流行的框架之一vue,同时引入了一套由饿了吗维护的ui库,由于我们是在pc端使用发现它竟然没有提供可随意拖动的窗口,可能用的更多的时移动端吧吧,于是就随手写了一个,比较简单吧,但是做过的就会知道也是有一些小小的技巧,记录下吧留作备用。由于不是很难,就不做过多解释了,直接上代码:前端精品教程:百度网盘下载?12345678910111213141516171819202122232425262728293031323334...

Vue必须必须要注意的几个细节

1.每次执行完,尽量npm run dev 一次,有时候又缓存问题2.安装sass 一.使用save会在package.json中自动添加。因为sass-loader依赖于node-sass  npm install node-sass --save-dev  npm install sass-loader --save-dev  然后修改 style标签 <stylelang="sass">就可以了。  通常使用npm安装会出现以下报错,安装失败。(网路问题)  可以通过淘宝的npm镜像安装node-sass,解决以上问题。  $ npm install -g cnpm --r...

vue 中使用 国际化(i18n)【代码】【图】

效果图第一步安装插件npm install vue-i18n --save打开package.json 文件查看 vue-i8n第二步在assets文件下新建文件夹language包含 index.js,language-CN.js, language.EN.js 三个文件第三步 - 编写代码index.js 文件如下import Vue from ‘vue‘; import VueI18n from ‘vue-i18n‘; import enLocale from ‘./language-EN‘ import usLocal from ‘./language-CN‘ Vue.use(VueI18n); const messages = {en: {...enLocale},cn: {...

vue组件,路由及组件跳转,

-组件的使用 <!-- 1、父组件中引入组件 import Home from "./components/Home"; 2、注册组件 components:{‘v-home‘:Home,}, 3、使用组件 <v-home></v-home> --> -路由及组件跳转<!--1、安装并保存npm install vue-router --save2、在main.js里引入并使用import VueRouter from ‘vue-router‘Vue.use(VueRouter)3、在main.js里路由配置 1.创建组件 引入组件 import Router from "./components/06...