经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
 Vue.js

基于vue实现一个神奇的动态按钮效果

今天我们将利用vue的条件指令来完成一个简易的动态变色功能按钮 首先我们还是要对vue进行配置,在上篇随笔中有相关下载教学. 然后我们要在html页面上搭建三个简易的按钮,颜色分别为紫,绿和蓝(颜色随意)其代码如下: <body> <div id="app"...[2019/5/15]

vue组件间通信六种方式(总结篇)

前言 组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用。一般来说,组件可以有以下几种关系: 如上图所示,A 和 B、B 和 C、B 和 D 都是父子关系,C 和 D 是兄弟关系,A 和 C 是隔代关系(可能隔多代)。 ...[2019/5/15]

vue如何获取自定义元素属性参数值的方法

偶尔还是会陷入到DOM操作上面去,其实你应该关心的是数据传递,而不是操作DOM。如果你是想获取data-num的数据,可以这样写: <span @click="getData($event,''21'')">55< pan> getData:functio...[2019/5/15]

详解VSCode配置启动Vue项目

下载安装并配置VSCode 随便百度上搜个最新的VSCode安装好后,点击Ctrl + Shit + X打开插件扩展窗口进行插件扩展,这里要安装两个插件。 1、vetur插件的安装 该插件是vue文件基本语法的高亮插件,在插件窗口中输入vetur点击安装插件就行,装好后点击文件->...[2019/5/15]

vue项目前端知识点整理【收藏】

vue项目前端知识点整理【收藏】

微信授权后还能通过浏览器返回键回到授权页 在导航守卫中可以在 next({}) 中设置 replace: true 来重定向到改路由,跟 router.replace() 相同 router.beforeEach((to, from, next) => { if (g...[2019/5/14]

vue实现动态按钮功能

Vue是前台框架,可以独立完成前后端分离式web项目渐进式的javascript框架 ,今天我们来设计一个简单的动态按钮 具体效果图如下: 点击后会变成这样: 首先我们需要下载vue.js: https: vuejs.org/j vue.min.js 将网页内的内容全选...[2019/5/14]

vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新

今天写项目的时候遇到了歌手排序的问题,联想到了我们平时的手机通讯录侧栏字母排序,按照ABCDE这样的顺序对名字进行排序。 我们先来看看效果 那就用vue来实现一遍 首先新建一个vue页面,取名为helloworld.vue 在页面里写入内容 <templ...[2019/5/14]

Vue表单之v-model绑定下拉列表功能

vue要绑定下拉列表会稍微有点不同。 因为下拉列表不是一个标签能搞掂的。 原生的html写法如下 <select> <option value="Vue.js">Vue.js</option> <option value="Re...[2019/5/14]

浅谈vue.use()方法从源码到使用

关于 vue.use 我们都知道些什么? 在做 vue 开发的时候大家一定经常接触 Vue.use() 方法,官网给出的解释是: 通过全局方法 Vue.use() 使用插件;我觉得把使用理解成注册更合适一些,首先看下面常见的注册场景。 import Router from ...[2019/5/13]

详解无限滚动插件vue-infinite-scroll源码解析

详解无限滚动插件vue-infinite-scroll源码解析

最近在项目中遇到一个需求,有一个列表需要滚动加载,类似于微博的无限滚动。当时第一反应时监听滚动事件,在判断滚动到达底部时加载下一页,同时心里也清楚,监听滚动事件需要做好截流。顺手搜索了下发现有一个现成的插件vue-infinite-scroll ,用法也很简单,于是乎就用了起来。 需求上线后,对它...[2019/5/13]

Vue项目中配置pug解析支持

Vue 的用法没有变化: <template lang="pug"> transition(name="sider") div.hello h3 {{msg}} p(:style="{color:''#000''}", :htmlData="msg...[2019/5/10]

Vue的生命周期和钩子函是什么?

一、简介   先贴一下官网对生命周期/钩子函数的说明(先贴为敬):所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => th...[2019/5/10]

vue2 v-model/v-text 中使用过滤器的方法示例

Vue.js 允许自定义过滤器,一般可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示: <!-- 在双花括号中 --> {{ me age | capit...[2019/5/10]

使用vue脚手架(vue-cli)搭建一个项目详解

1.首先得下载node.js。方法可自行百度。 2. 3.一开始报很多错误,后来用管理员就没问题了。 4. 5.如上图会遇到卡住的问题,解决方法是 在最后一个选项上选择No,I will handle it myselft,然后cd vue_test,然后cnpm ...[2019/5/10]

使用vuex解决刷新页面state数据消失的问题记录

使用vuex解决刷新页面state数据消失的问题记录

在实际的vue项目中,当我们的应用遇到多个组件之间的共享问题时,通常会用到Vuex(一个状态管理的插件,可以解决不同组件之间的数据共享和数据持久化),解决组件之间同一状态的共享问题。 因子: Vuex优势:相比se ionStorage,存储数据更安全,se ionStorage可以...[2019/5/9]

深入浅析vue-cli@3.0 使用及配置说明

使用vue-cli3已经有相当一段时间了,一直没怎么去注意其中的配置,所以趁着这段时间总结下应用过程中的一些经验,本文是从安装到开发使用的一个过程讲解,也可以说是新手向的文章,文字有点多,请耐心观看。 (一)安装: 1、下载安装node: 登陆node官网并选择自己合适的node版本进行安...[2019/5/8]

详解Vue前端生产环境发布配置实战篇

详解Vue前端生产环境发布配置实战篇

前言 首先这篇文章是写给Vue新手的,老司机基本不用看了。 当我们刚接触vue的时候,特别是对于第一次用前端框架的同学来说,心情可以说是比较激动的,框架带来的种种新体验,是以前jQuery无法给你的兴奋和满足感。但是在体验了几个demo的新鲜感之后,我们就要考虑如何把框架结合到我们实际...[2019/5/8]

vue父组件触发事件改变子组件的值的方法实例详解

父组件向子组件通信 业务场景:现在我要在父组件点击一个回退按钮,这个回退会传进子组件中(子组件中有两步进程),子组件来处理。 解决方案 起初我是父组件通过props传值,但是发现只有组件第一次加载时才能传值,通过事件改变的父组件值并不会再通过过props传递,也就是说props只有加载...[2019/5/8]

Vue Echarts实现可视化世界地图代码实例

Echarts实现可视化世界地图模拟迁徙,以我自己开发过程。 下载Echarts依赖: npm install echarts 成功以后引入依赖: import echarts from ''echarts'' peopleInsertCharts为生成echarts容器。 ...[2019/5/7]

Vue实现购物车的全选、单选、显示商品价格代码实例

今天中午废了一会时间,总算把项目中的购物车的单选、全选、以及实现数据的动态显示做出来了,给小白分享一下我个人一个解决办法: 购物车的基本页面如下: 先说实现的总体思路 1.给table表中表头th加一个 checkbox,设这两个事件:@click=”checkAll” v...[2019/5/7]

用Vue编写抽象组件的方法

看过 Vue 源码的同学可以知道,<keep-alive>、<transition>、<transition-group>等组件 组件的实现是一个对象,注意它有一个属性 abstract 为 true,表明是它一个抽象组件。 Vue 的文档没有提这个...[2019/5/7]

详解vue-cli中使用rem,vue自适应

详解vue-cli中使用rem,vue自适应

1.rem.js内容   ! function(n) {             var e = n.document,  &...[2019/5/7]

如何获取vue单文件自身源码路径

这个问题要从一个想法说起。 D2Admin 是一个开源的,前端中后台集成方案,原先是基于 vue-cli2,大概是向 vue-cli3 过渡时, 作者老李,想在页面右下角加个 Toggle 点击,跳到当前页面源码对应的 github 页面。 确实很实用的功能,D2Admin 的 Demo...[2019/5/7]

vue路由跳转传参数的方法

vue中路由跳转传参数有多种,自己常用的是下面的几种 通过router-link进行跳转 通过编程导航进行路由跳转  1. router-link <router-link :to="{ path: ''yourPath'', ...[2019/5/7]

使用vue-router切换页面时,获取上一页url以及当前页面url的方法

今天在实现一个小功能的时候,遇到一个问题,使用vue-router获取上一页面的url信息,我尝试了多种方式,发现使用vue-router的canDeactivate钩子实现这个功能最为方便,现在将我的实现代码总结如下: 项目使用的是vue-cli,直接贴代码   ...[2019/5/7]

彻底揭秘keep-alive原理(小结)

一、前言 原文链接: https: github.com/qiudongwei/blog/i ue 4 本文介绍的内容包括: keep-alive用法:动态组件&vue-router keep-alive源码解析 keep-alive组件及其包裹组件的钩子 ke...[2019/5/6]

详解vue中移动端自适应方案

方案1: 直接引入js  (自己 写的动态改变fontsize的js) function htRem() { var ww = document.documentElement.clientWidth; if (ww > 750) { w...[2019/5/6]

详解Vue调用手机相机和相册以及上传

组件 <template> <div> <input id="upload_file" type="file" style="display: none;" accept=''image/*'' name="file" @chang...[2019/5/5]

前端笔记之Vue(三)生命周期&CSS预处理&全局组件&自定义指令

一、Vue的生命周期 生命周期就是指一个对象的生老病死的过程。 用Vue框架,熟悉它的生命周期可以让开发更好的进行。 所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和方法进行运算。这意味着,你不能使用箭头函数来定义一个生命周期方法 (例如 created:...[2019/5/5]

React的世界观及与Vue之比较

写在前面:本文谈论的是主观的个人感受,不追求立场的“客观、公正”,因此我下面所说的很可能是错的,欢迎交流指正。   我学习前端时,跟大部分beginner一样,学的第一个框架是Vue,入职后也一直写Vue。写了一年多,想换换口味了,于是决定最近的新项目改用React试试。用了大半个月...[2019/5/5]

Vue.js 学习笔记 第7章 组件详解

  本篇目录: 7.1 组件与复用 7.2 使用props传递数据 7.3 组件通讯 7.4 使用slot分发内容 7.5 组件高级用法 7.6 其他 7.7 实战:两个常用组件的开发   组件(Component)是Vue.js最...[2019/5/5]

vue自动路由-单页面项目(非build时构建)

这是一个什么项目? 答:这是一个单页面的vue.js项目,主要为了实现在非build时,进行自动路由。简单点说,就是在请求页面时,根据url进行动态添加路由。 自动路由有什么限制吗? 答:有,因为是通过url进行动态添加,所以,在指定文件夹下,组件文件的相对路径必须与url有一定的关系...[2019/4/30]

使用 Vue cli 3.0 构建自定义组件库的方法

本文旨在给大家提供一种构建一个完整 UI 库脚手架的思路:包括如何快速并优雅地构建UI库的主页、如何托管主页、如何编写脚本提升自己的开发效率、如何生成 CHANGELOG 等 前言 主流的开源 UI 库代码结构主要分为三大部分: 组件库本身的代码:这部分代码会发布到 npm 上 ...[2019/4/30]

vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component

介绍 做前端的大家都知道通过 vue 开发的项目每次创建新组建的时候,都要新建一个目录,然后新增 .vue 文件,在这个文件中再写入 template 、 script 、 style 这些内容,虽然在写入的时候大家都有自己的自动补全共计,不过这些都是模板性的,每次都要这样重复操作,很麻烦有没...[2019/4/30]

vue移动端屏幕适配详解

vue移动端屏幕适配详解

flexible vue移动端屏幕适配,查看项目地址 效果预览 # 项目clone git clone git@github.com:NicolasGui/flexible.git # 进入项目目录 cd flexible # 安装依赖 npm install # 启...[2019/4/30]

详解vue 图片上传功能

这次做了vue页面的图片上传功能,不带裁剪功能的! 首先是html代码,在input框上添加change事件,如下: <ul cla ="clearfix"> <li v-if="imgs.length>0" v-for=''(item ,...[2019/4/30]

Vue基本使用---对象提供的属性功能

一 过滤器 过滤器就是vue允许开发者自定义的文本格式化函数, 可以使用在两个地方:输出内容和操作数据中。 1.1 定义过滤器的两种方式 1.1.1 使用Vue.filter()进行全局定义 Vue.filter("RMB1", function(v){ 就是来格...[2019/4/30]

VSCode使用之Vue工程配置eslint

首先确保VS Code 安装了 Vetur 和 Eslint 插件。 然后使用了vue-cli提供的简单webpack模板,这样创建的工程默认没有添加ESLint。 vue init webpack-simple test-vscode 配置过程 全局安装最新的e...[2019/4/30]

Vue-cli3简单使用(图文步骤)

Vue-cli3.X创建项目 1.环境要求 安装Vue-cli3.x的前置条件:Node.js 以Windows为例安装Node.js,百度 “Node.js官网” 或”Node.js中文网”均可 ,如无特殊要求 下载安装 LTS版(长期支持版,该版本已满足Vue CLI官网所需要...[2019/4/30]

vue+web端仿微信网页版聊天室功能

一、项目介绍 基于Vue2.5.6+Vuex+vue-cli+vue-router+vue-gemini-scrollbar+swiper+elementUI等技术混合架构开发的仿微信web端聊天室——vueWebChat,实现了发送消息、表情(动图),图片、视频预览,右键菜单、截屏、截图可直...[2019/4/30]

前端笔记之Vue(二)组件&案例&props&计算属性

一、Vue组件(.vue文件) 组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。 ...[2019/4/30]

vue之$root,$parent

$root vue状态管理使用vuex,如果项目不大,逻辑不多,name我们没必要用vuex给项目增加难度,只需要用$root设置vue实例的data就行了,如下 main.js new Vue({ data(){ return{ loading:tru...[2019/4/30]

Vue基本使用

 Vue.js是一款流行的开源JavaScript前端框架,旨在更好地组织与简化Web开发。Vue所关注的核心是MVC模式中的视图层,同时,它也能方便地获取数据更新,并通过组件内部特定的方法实现视图与模型的交互。由尤雨溪在2014年2月发布的。 一 基本语法 1. vue的使用要从创...[2019/4/30]

实例详解vue中的$root和$parent

$root vue状态管理使用vuex,如果项目不大,逻辑不多,name我们没必要用vuex给项目增加难度,只需要用$root设置vue实例的data就行了,如下 main.js new Vue({ data(){ return{ loading:true ...[2019/4/30]

vue slot与传参实例代码讲解

vue slot与传参实例代码讲解

插槽分为默认插槽和具名插槽: 默认插槽:  父组件 <div> <h3>父组件</h3> <testChild> <div>默认插槽</div> </testChild&...[2019/4/29]

详解VUE项目中安装和使用vant组件

Vant 是有赞前端团队基于有赞统一的规范实现的 Vue 组件库,提供了一整套 UI 基础组件和业务组件。 特性 50+ 个经过有赞线上业务检验的组件 单元测试覆盖率超过 90% 完善的中英文文档和示例 支持 babel-plugin-import ...[2019/4/29]

使用vue完成微信公众号网页小记(推荐)

前言: 公司最近有一个H5页面的功能,比较简单的一个调查表功能,嵌套在我们微信公众号里面。选用的技术栈是Vue。同时用到了微信的登录和分享接口。ps:本人小白,如果有问题希望大家能指出来,写文章不止是为了记录,还是为了发现自己的问题。谢谢大噶!!! 主要功能以及遇到的问题: 左右...[2019/4/29]

详解vue 路由跳转四种方式 (带参数)

1.  router-link 1. 不带参数 <router-link :to="{name:''home''}"> <router-link :to="{path:''/home''}"> name,path都行, 建议用name ...[2019/4/29]

从零到一详聊如何创建Vue工程及遇到的常见问题

前言 本文也会在github上我的web-study仓库中同步更新,欢迎star。 戳这里,传送 准备工作 判断是否需要FQ或安装镜像,镜像一般可安装国内淘宝镜像,详情可看这里:cnpm npm install -g cnpm --registry="cnpm"全局安装...[2019/4/26]

Vue开发之封装上传文件组件与用法示例

本文实例讲述了Vue开发之封装上传文件组件与用法。分享给大家供大家参考,具体如下: 使用elementui的 el-upload插件实现图片上传组件 每个项目存在一定的特殊性,所以数据的处理会不同 pictureupload.vue: <template>...[2019/4/26]

373
2
记录数:248 页数:1/512345下一页尾页
加载更多