VUE - 技术教程文章
react和vue项目快速搭建
react项目快速搭建 1.安装node环境: 下载地址：https://nodejs.org/zh-cn/download/ 2.打开终端 3.安装yarn或者cnpm, 这里以cnpm 为例，输入命令行: npm install cnpm -g --registry=http://registry.npm.taobao.org 4.安装create-react-app，输入命令行： cnpm install -g create-react-app 说明：这里安装在全局中，安装一次就可以了。 5.创建react项目，输入命令行： create...
Vue CLI 去除gojs水印【代码】
Vue CLI 去除gojs水印前言去除gojs水印的方法网上一搜一大堆，手段都一样，就是替换指定的字符串，但是这样会造成多人合作的时候出现问题，每个人都需要替换本机的文件。通过自定义一个webpack loader可以自动替换指定字符串，达到去除水印的目的，同时解决多人合作的问题方法自定义loader在项目根目录，创建一个目录gojs-hack-loader，在该目录下创建一个文件index.js，代码如下：const pattern = /b\.V.*7eba17a4ca3b1a8346.*?\)...
【VUE】vue在vue-cli3环境下基于axios解决跨域问题
网上的绝大部分教程解决vue+axios跨域问题都不能直接适用vue-cli3。这是因为vue-cli3不一样的配置方式导致的。如果是使用vue-cli3构建的项目，那么默认是没有config.js文件的。按照官方文档介绍，每个人可以通过在项目根目录下建立vue.config.js文件，配置属于自己的config文件。之后按照网上其他的解决axios跨域问题的方案实施即可。// vue.config.jsmodule.exports = { publicPath: ‘/‘, devServer: { proxy: { ...
(二十)vue缓存页面数据（keep-alive），同时刷新部分数据【代码】
vue缓存页面数据（keep-alive），同时刷新部分数据缓存页面在相应的页面相互跳转的时候，会出现希望在返回上一个页面的时候保留之前的数据，解决方案就是在相应的路由文件上面进行操作，判断是否进行缓存路由文件index.js// 路由配置// 费用管理-备用金申请 （需要被缓存的组件 ，在meta上进行标示）{path: "ReserveFundApplication",name: "ReserveFundApplication",meta: {title: "备用金申请" , keepAlive:true}, component: (...
vue 模板语法【代码】
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script src="./vue.js"></script><script language="JavaScript">window.location="#bottom_location";</script></head><body><div id="app"><span v-html="directives"></span><p v-if=‘see‘>Hello Vue！</p><p v-if="seen">Hello World !</p><br/><span v-html="directiveArag"></span><span>在这里href是参数，告知v-bind指令将该元素的href特性与表达式u...
初见VUE【图】
Vue是什么？Vue在近期热门程度逐渐提高，引起了许多人的学习兴趣。而学习先要了解，Vue是一套用于构建用户界面的渐进式框架。什么是渐进式框架？我的理解是有需要就引用，举个栗子：在写一个小页面的时候如果仅是表单提交的时候去调用Vue，这时候Vue的其他组件就对你没用，你只需要引入调用然后完成那部分的Vue代码在写完小页面后发现Vue好用，想要用更多的特性，然后就开始一点一点地添加引用，添加框架。这个过程我觉得就是渐进式...
Mac卸载vue不成功【代码】
npm install -g @vue/cli npm uninstall -g @vue/cliyarn global add @vue/cli yarn global remove @vue/cli 首先确定你的是npm安装的还是yarn安装的，要用对应的卸载方式如果还是卸载不成功，那么有以下办法 找到这些目录 进行删除/usr/local/bin/vue-ini /usr/local/bin/vue-list /usr/local/bin/vue /usr/local/lib/node_modules/vue-cli/bin/vue /usr/local/lib/node_modules/vue-cli/bin/vue-init /usr/local/lib/node_module...
vue小项目---管理系统【代码】【图】
在上一篇文章中我们已经学习了vue的基本语法，常用属性，了解了vue的基本使用，现在让我们用vue配合Bootstrap来完成一个小项目。首先导入Bootstap文件。<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/> 导入完成后，用Boostrap的各种组件，完成一个基本的页面： <div id="app"><table class="table table-hover "><br /><thead><tr><th>序号</th><th>书名</th><th>作者</th><th>价格</th><th>操作</th></tr></...
vue组件提取--SvgIcon组件【代码】
SvgIcon组件主要是整站所有的图标icon，提前成一个单独的组件。假如Nav.vue需要该组件，引用即可。由此可见，需要将SvgIcon.vue组件注册为全局组件，谁需要，谁引用。一、将SvgIcon.vue注册为全局组件、1、注册组件//SvgIcon是组件名 { }里边是组件内容 Vue.component(‘SvgIcon‘,{template:`<div>我是SvgIcon组件</div>`,data(){return {msg:‘hello‘}} }) 因此，可将组件内容抽离出来单独的文件---SvgIcon.vue2、抽离SvgIcon....
vue项目目录介绍【代码】
尽管vue-cli已经优化了好多配置和目录机构，但是下面的介绍还是有用的。buildwebpack 配置相关configwebpack 配置相关src源码static第三方静态资源.gitkeepgit默认不提交空目录 放在空目录中，可以使git提交的时候，提交该目录。.babelrcbabel的配置，es6代码通过babel编译成es5. presets预设，表示预先要安装哪些插件； plugins,表示要安装的插件，这些插件很有可能互相依赖.editorconfig编辑器的配置相关.eslintignore忽略语法检...
vue2.0 移动端，下拉刷新，上拉加载更多插件，修改版【代码】
在【实现丰盛】的插件基础修改【vue2.0 移动端，下拉刷新，上拉加载更多 插件】，1.修改加载到尾页面，返回顶部刷新数据，无法继续加重下一页2.修改加载完成文字提示原文链接：http://www.cnblogs.com/sichaoyun/p/6647458.html <template lang="html"><div class="yo-scroll":class="{‘down‘:(state===0),‘up‘:(state==1),refresh:(state===2),touch:touching}"@touchstart="touchStart($event)"@touchmove="touchMove($even...
vue2 + element-ui + axios 开源项目推荐【图】
About此项目是 vue2 + element-ui + axios 构建的后台管理系统，自适应多种屏幕大小，所有数据都是mock server处理的，所以只需下载即可运行，非常方便就可以替换自己的rest api接口。技术栈vue2 + vuex + vue-router + axios + element-ui + webpack + ES6/7 + sass开源地址点我 演示地址点我更多angular1/2/4、ionic1/2/3、react、vue、微信小程序、nodejs等技术文章、视频教程和开源项目，请关注微信公众号——全栈弄潮儿。原文...
Vue开发环境的搭建及基本开发流程【代码】
1.下载并安装node，下载地址。2.命令行运行以下命令安装npm淘宝镜像;npm install -g cnpm --registry=https://registry.npm.taobao.org// 安装后可用cnpm命令，取代所有的npm命令(publish除外) npm常用命令cnpm install // 安装项目的所有依赖模块(开发环境依赖与项目依赖) cnpm install --save moduleName // 安装项目依赖包(项目的运行需要将依赖包打入最终的布署环境) cnpm install --save-dev moduleName // 安装开发环境依赖...
vue-tab切换【代码】
在 vue 中，实现 Tab 切换主要有三种方式：使用动态组件，使用 vue-router 路由，使用第三方插件。因为这次完成的功能只是简单切换组件，再则觉得使用路由切换需要改变地址略微麻烦，所以使用的是动态组件实现，如果是在大型应用上，可能使用 vue-router 会方便一些。先看下最终实现的效果，结构比较简单，顶部的三个 Tab 标签用于切换，内容区域分别为三个子组件。<template> // 每一个 tab 绑定了一个点击事件，传入的参数对应着...
支持IE6、IE7、IE8等低端浏览器的简化版vue【代码】
最近研究Vue的底层原理，写了一个简化版的Vue，可以在支持IE6、IE7、IE8等低端浏览器运行。由于低端浏览器不支持对象属性定义，所以设置属性不支持直接赋值，需要调用虚拟机实例的set方法。目前只实现了基础的方法，后续继续完善！index.html<!DOCTYPE html><html><head><title>简化版Vue</title><script>window.onerror=function(){returntrue;}</script></head><body><hr /><div id="simpleVue"><button v-on:click="copy">戳我<...
vue-resource发送multipart/form-data数据【代码】
//add headersthis.$http.post(‘/api‘, data, {headers: {‘Content-Type‘: ‘multipart/form-data‘} })//or send request data as application/x-www-form-urlencoded content type.this.$http.post(‘/api‘, data, {emulateJSON: true })//or use FormDatavar formData = new FormData(); formData.append(‘foo‘, ‘bar‘);this.$http.post(‘/api‘, formData) 出处：https://github.com/pagekit/vue-resource/issues/26...
Vue部署【代码】【图】
一：Vue简介 vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。 Vue两大核心思想：组件化和数据驱动。 组件化就是将一个整体合理拆分为一个一个小块（组件），组件可重复使用； 数据驱动是前端的未来发展方向，释放了对DOM的操作，让DOM随着数据的变化自然而然的变化，不必过多的关注...
vue+mousemove实现拖动，鼠标移动过快拖动就失效【代码】
今天用vue+原生js的mousemove事件，写了个拖动，发现只能慢慢拖动才行，鼠标只要移动快了，就失效，不能拖动了；搞了半天在，总算解决了，但是问题的深层原理还没搞清楚，知道的大侠可以留言分享，下面直接上代码：只能慢速拖动的代码：<!DOCTYPE html><html><head><title>vue结合原生js实现拖动</title><script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script></head><body><div id="app"><div class="ctn ctn1"><...
Vue脚手架的搭建【代码】【图】
Vue提供了一个官方的CLI，为单页面应用（SPA）快速搭建繁琐的脚手架。Vue CLI官方文档 => https://cli.vuejs.org/zh/guide/ 一、基本安装 1. 安装指令 npm i @vue/cli -g2. 检查是否安装或者版本 vue --version3. 创建vue项目 vue create vue-app在安装的时候选择手动，然后根据需求进行选择配置，后期也可以自己创建一个vue.config.js文件进行配置修改。比如：在安装时，选择了标准严格模式(ESLint + Standard config)，...
vue全家桶(Vue+Vue-router+Vuex+axios)（Vue+webpack项目）
1.Vue.cli 脚手架全局安装 clinpm install --global vue-cli查看安装结果vue -V创建基于webpack的名为myindex的新项目vue init webpack myindex切换到项目cd myindex安装依赖npm install起飞npm run dev原文：https://www.cnblogs.com/chydream/p/10513192.html
Vue官网教程-计算属性和监听器【代码】【图】
<div id="app"><p>原来:{{message}}</p><p>逆转:{{reverseMessage}}</p></div><script>var vm =new Vue({el:‘#app‘,data:{message:‘Hello‘},computed:{reverseMessage:function(){returnthis.message.split(‘‘).reverse().join(‘‘);}}});</script> message 改变，计算属性也会改变，看计算属性依赖了this什么 <div id="app"><p>原来:{{message}}</p><p>逆转:{{reverseMessageFunction()}}</p><p>没有依赖的元素:{{test...
vue编写轮播图组件
<template> <div id="slider"> <div class="window" @mouseover="stop" @mouseleave="play"> <ul class="container" :style="containerStyle"> <li> <img :style="{width:imgWidth+‘px‘}" :src="sliders[sliders.length - 1].img" > </li> <li v-for="(item, index) in sliders" :key="index"> <img :style="{width:imgWidth+‘px‘}" :src="item.img" > </li> ...
vue中v-for系统指令的使用【图】
v-for指令可以用来遍历数组/对象它可以根据data中数据的更新动态刷新视图 1. 遍历数组 1.1 使用方式： v-for="item in arr" item是一个参数，表示数组中的每一项，arr也是一个参数，表示你要遍历的数组 1.2 使用方式： v-for="(item, index) in arr" index表示数组项的索引 ? 2. 遍历对象 2.1 使用方式：v-for="value in obj" value 表示对象的属性的值 obj就是需要遍历的对象 ...
Vue常用指令【代码】【图】
一、vue常用指令1.v-for指令：用于迭代字符串效果图：源码：HTML：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>v-for指令</title></head><body><div id="app"> <ul> <li v-for="food in foodList">{{food.name}}:￥{{food.discount? food.price*food.discount : food.price}}</li> </ul></div><script src="lib/vue.js"></script><script src="js/v-for.js"></script></body></html>...
vue-插槽【代码】
1.插槽内容及后备内容子组件header1 <div class="header"> 2 <slot>this is header</slot> 3 </div>插槽内容--父组件引用时不加内容<header></header>则显示：this is header后备内容--父组件引用时加内容<header>this is parent</header>则显示：this is parent2.具名插槽子组件header1 <div class="header"> 2 <slot name="left">left</slot> 3 <slot>default</slot> 4 <slot name="right">right</slot> 5 </div...
vue.js
<!DOCTYPE html><html><head><meta charset="gbk"><script src="vue.js"></script><title>Insert title here</title></head><body> <div id="app"> {{message}} </div> <div id="app-2"> <span v-bind:title=‘message‘> 鼠标悬停看到时间 </span> </div> <div id="app-3"> <p v-if="seen"> 现在你看到我了! </p> </div> <div id="app-4"> <ol> <li v-for="obj in objects"> {{obj}} </li> </ol> </div> <d...
Vue里面提供的三大类钩子及两种函数【代码】
在路由跳转的时候，我们需要一些权限判断或者其他操作。这个时候就需要使用路由的钩子函数。定义：路由钩子主要是给使用者在路由发生变化时进行一些特殊的处理而定义的函数。总体来讲vue里面提供了三大类钩子，两种函数1、全局钩子2、某个路由的钩子3、组件内钩子两种函数：1、Vue.beforeEach(function(to,form,next){}) /*在跳转之前执行*/2.Vue.afterEach(function(to,form))/*在跳转之后判断*/全局钩子函数顾名思义，它是对全局...
vue之自定义组件【图】
组件（Component）是我的理解就是自定义元素.(一)自定义组件任何一个以.vue结尾的组件内都可以写自定义组件,一个自定义组件的使用主要2个步骤:1.注册:上代码2.组件使用 原文：http://www.cnblogs.com/gutianer/p/7827055.html
VUE方法【代码】
1、$event 变量$event 变量用于访问原生DOM事件。 <!DOCTYPE html> <html lang="zh"><head><meta charset="UTF-8" /><title>vue示例</title></head><body><div id="app">点击次数：{{counter}}<button @click="handleAdd(1,$evert)">+1</button><button @click="handleAdd(10,$evert)">+10</button></div><script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script><script type="text/javascript">var app = new Vue(...
vue基础【代码】
入门篇vue.js是目前前端web开发最流行的工具库，由尤雨溪在2014年2月发布的。另外几个常见的工具库：react.js /angular.js官方网站：中文：https://cn.vuejs.org/英文：https://vuejs.org/官方文档：https://cn.vuejs.org/v2/guide/vue.js目前有1.x、2.x和3.x 版本，本篇使用2.x，原因是目前3.x还不成熟。vue.js库的下载可以在 官网 下载，有开发版本和生产版本，学习时使用开发版本就行。也可以在 GitHub 下载，js位于 dist 文件夹...