vue-js
文章平均质量分 76
徐小七七
技术,不断更新,才有趣嘛。
展开
-
vue2.0——项目开发_better-scroll 实现移动端滑动
better-scroll + vue2.0 实现移动端滑动——左右联动效果:滑动右侧时,左侧也能有相应的变化;点击左侧时,右侧也能自动定位到相应的位置。如下图所示界面,左侧为分栏,右侧为分栏详情。滑动右边使左边联动的大概的思路: 1)要知道右侧的列表中,每一个分栏所占的高度,存进一个数组中。 2)实现左边联动,则必须要监控 “scroll”事件,获取其高度 3)将sc原创 2017-07-06 09:12:24 · 2615 阅读 · 0 评论 -
vue-devtools的安装与使用
一.在github上下载压缩包,github下载地址:https://github.com/vuejs/vue-devtools git clone https://github.com/vuejs/vue-devtools.git二.解压到本地的某盘三.用你的npm / cnpm中进入该文件夹下四. 在cmd 依次输:1:npm install / cnpm install原创 2018-01-19 14:53:42 · 404 阅读 · 0 评论 -
vue.js创建项目
通过命令创建vue项目1、环境要求: 安装有 Node.js、 vue、 vue-cli 。使用nodeJs安装Vue TIP:win10下安装,使用管理员身份进行,否则会有权限限制。1)安装完成node,node有自带的npm,可以直接在cmd中,找到nodeJs安装的路径下,进行命令行全局安装vue-cli。(npm install --global vue-cli)—-...原创 2017-07-13 08:55:19 · 435 阅读 · 1 评论 -
vue不是内部或外部命令,配置一个Path系统变量就可以解决
作为一个vue小白,最近为vue安装真是操碎了心。无论怎么查找网上的教程,还是解决不了“vue不是内部或外部的命令”诸如此类的问题。好在功夫不负有心人,终于在多次的试验下,成功解决了这个问题。 需要注意的几点: 1.该教程是在你已经安装配置好node.js和express情况下。 2.你已经完成了vue和vue-cli的全局安装。 3.完成以上2步后,使用vue指令,会显示原创 2018-01-30 15:00:28 · 986 阅读 · 1 评论 -
vue1.0中的dev-server.js配置文件
本文系统讲解vue-cli脚手架build目录中的dev-server.js配置文件这个配置文件是命令npm run dev 和 npm run start 的入口配置文件,主要用于开发环境由于这是一个系统的配置文件,将涉及很多的模块和插件,所以这部分内容我将分多个文章讲解,请关注我博客的其他文章关于注释当涉及到较复杂的解释我将通过标识的方式(如(1))将解释写到单独的注释...转载 2018-03-02 14:06:39 · 605 阅读 · 0 评论 -
引入vux,v-chart 报错
引入vux,v-chart 报错,错误信息如下:vux2必须配合vux-loader使用, 请在build/webpack.base.conf.js里参照如下代码进行配置const vuxLoader = require('vux-loader')const webpackConfig = originalConfig // 原来的 module.exports 代码赋值给变量 webpa...原创 2019-02-18 14:43:23 · 1221 阅读 · 1 评论 -
vue项目使用postcss-pxtorem(应用于vue-cli 2和3)
vue-cli 2:1、安装插件yarn或者npmnpm install postcss-pxtorem或者yarn add postcss-pxtorem2、编辑项目根目录下.postcss.js文件(没有则新建一个)module.exports = { "plugins": { "postcss-import": {}, "postcss-url": {},...原创 2019-04-29 17:37:48 · 2778 阅读 · 1 评论 -
vue-cli3实现分环境打包
遇到的问题在vue-cli3的项目中,默认的package.json配置npm run serve时会把process.env.NODE_ENV设置为‘development’npm run build 时会把process.env.NODE_ENV设置为‘production’此时只要根据process.env.NODE_ENV设置不同请求url就可以很简单的区分出本地和线上环境。...原创 2019-04-25 10:04:19 · 532 阅读 · 0 评论 -
vue-cli中一些webpack的配置总结
一、配置npm run dev时直接打开浏览器在bulid的目录下直接找到webpack.dev.conf.js搜索devServer,找到open: config.dev.autoOpenBrowser,你会发现依赖于config的文件夹,进去config文件夹找到index.js搜索autoOpenBrowser这个关键字,把后面的值改为true。二、修改端口号的两种方法和上...原创 2019-04-25 10:08:04 · 388 阅读 · 0 评论 -
VUE keep-alive( 组件缓存)
作用:页面缓存最近做项目遇到这样的需求,点击列表进去详情页面,返回回来需要保持列表页的滚动条的深度,查阅文档发现vue里面有对“页面缓存的处理方法”,就是keep-alive通常在Vue构建的单页面应用(SPA)中,路由模块一般使用vue-router。vue-router不保存被切换组件的状态,它进行push或者replace时,旧组件会被销毁,而新组件会被新建,走一遍完整的生命周期使用方...原创 2019-04-25 10:15:45 · 448 阅读 · 0 评论 -
vuex使用
一 目录的配置根据官方推荐在src目录里面创建store目录二 创建store里面的文件根据官方推荐创建 actions.js, getters.js,index.js, mutations.js, mutations-types.js, state.js2.1 state.jsstate.js: 是vuex的单一状态数,用一个对象就包含了全部的应用层级状态。至此它便作为一个『唯一数据源...原创 2019-04-25 10:18:30 · 314 阅读 · 0 评论 -
vue中利用scp2上传打包后的文件到服务器
一、前提在工具中安装好 scp二、在build文件下创建一个js文件在build文件下创建一个js文件,build-scp2-test.js'use strict'// 引入scp2模块var client = require('scp2');// var random = Math.random()client.scp('./dist/', { "host": "139.217...原创 2019-04-25 10:35:26 · 1771 阅读 · 0 评论 -
Vue -渐进式JavaScript框架
原文链接:https://segmentfault.com/a/1190000012692321 介绍库和框架的区别 Library & Framework 主要区别MVVM的介绍MVCMVVM组成优势对比Vue中的MVVM学习Vue要转化思想起步 - Hello VueVue实例数据绑定双向数据绑定 Vue two way data bindingVue双向绑定的极转载 2018-01-05 17:30:55 · 419 阅读 · 0 评论 -
Vue.js数据状态管理-Vuex(-)
Vuex是什么?Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式;集中存储和管理应用的所有组件状态。理解:以上这4个词是我们理解的关键。状态:什么是状态,我们可以通俗的理解为数据。Vue只关心视图层,那么视图的状态如何来确定?我们知道是通过数据驱动,这里的状态管理可以简单理解为管理数据。集中存储:Vue只关心视图,那么我们需要一个仓库(Store)来存储数据,而且是所有的数据集中存原创 2017-07-11 17:08:30 · 9814 阅读 · 0 评论 -
Vue.js数据状态管理-Vuex(二)
前言Vuex主要应用于中、大型单页应用的数据状态管理架构。父子组件的通信父 -> 子: props子 -> 父: 自定义event组件数据共享组件之间如何数据共享(组件通信)父 -> 子:props子 -> 父:自定义event兄弟之间?其他非父子? :自定义event? 可能的解法自定义eventvar bus = new Vue()// in component A's meth原创 2017-07-11 17:14:09 · 568 阅读 · 0 评论 -
vue,jsonp的方法
Fetch 提供了对 Request 和 Response (以及其他与网络请求有关的)对象通用的定义。它之后能够被使用到很多场景中:service workers、Cache API、其他处理请求和响应的方式,甚至任何需要生成自己的响应的方式。众所周知,fetch提供的请求资源的方法并不包括jsonp,但是我们又想像使用fetch那样使用jsonp方法该怎么办呢,本文就手把手教你实现一个自己的f原创 2017-07-11 12:03:43 · 1139 阅读 · 0 评论 -
vue状态管理vue-vux使用
相关好文Vue2.0 框架配置:vue-cli + vue-router + vuexVuex 2.0 源码分析一.state — 数据简单使用1. Vue.use(Vuex)2. 注入, new vue({el:...store,...})3. 然后在所有组件中可以通过$store.state.xxx获取,动态数据,通过computed可以实时更新二.getters — 获取数据原创 2017-07-09 10:36:00 · 783 阅读 · 0 评论 -
Vue实例详解
Vue实例初始化的选项配置对象详解前面我们已经用了很多次 new Vue({…})的代码,而且Vue初始化的选项都已经用了data、methods、el、computedd等,估计您看到这里时,应该已经都明白了他们的作用,我们就详细讲解一下他们的使用情况。更详细的请参考官网内容Vue实例的的data对象介绍 Vue的实例的数据对象data 我们已经用了很多了,数据绑定离不开data里面的数据。也原创 2017-07-09 10:03:11 · 593 阅读 · 0 评论 -
Vue 2.0 的数据依赖/virtual-dom实现原理简析
团队小伙伴肖磊带来的 2 篇 Vue 技术文章,绝对干货,千万不要错过:原文Vue 2.0 的数据依赖实现原理简析Vue 2.0 的 virtual-dom 实现简析原创 2017-07-09 10:42:08 · 2308 阅读 · 1 评论 -
Vue生命周期
前言Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程,我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程,就是生命周期。因为我们有时候会在几个钩子函数里做一些事情,什么时候做,在哪个函数里做,所以对vue的生命周期的了解是很必要的。vue生命周期简介生命周期探究对于执行顺序和什么时候执行,看上面两个图基本有个了解了原创 2017-07-09 09:38:10 · 1695 阅读 · 0 评论 -
vue配置 webpack构建vue项目
vue重构项目,还涉及到模块化开发,webpack这个目前来看比较热门的模块加载兼打包工具等,上手并不是很容易,这是一些有关配置。。一、新建一个项目目录cd /d 定位进去,然后输入npm init,会提示你填写一些项目的信息,一直回车默认就好了,或者直接执行npm init -y 直接跳过,这样就在项目目录下生成了一个package.json文件。二、接下来就是通过npm安装项目依赖项命令行输入:原创 2017-07-09 10:28:53 · 392 阅读 · 0 评论 -
vue-router进阶数据获取
数据获取有时候,进入某个路由后,需要从服务器获取数据。例如,在渲染用户信息时,你需要从服务器获取用户的数据。我们可以通过两种方式来实现:导航完成之后获取:先完成导航,然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示『加载中』之类的指示。导航完成之前获取:导航完成前,在路由的 enter 钩子中获取数据,在数据获取成功后执行导航。从技术角度讲,两种方式都不错 —— 就看你想要的用户体原创 2017-07-12 17:36:34 · 1181 阅读 · 1 评论 -
vue-router
前言Vue.js的一大特色就是构建单页面应用十分方便,既然要方便构建单页面应用那么自然少不了路由,vue-router就是vue官方提供的一个路由框架,可以去查看官方文档。先上例子<!-- html部分,省略head --><div id="app"> <div class="content"> <router-link to="/goods">商品</router-lin原创 2017-08-29 14:26:55 · 430 阅读 · 0 评论 -
vue.js 点击目标元素显示div,点击目标元素外其他位置,隐藏div
前言因需求特殊,大家都常常会自己写弹窗,弹层等。点击目标元素(如按钮,输入框等等),显示div;点击目标元素外其他位置,隐藏div。那么用vue.js,要怎么实现呢?实现思路给页面最外出div加点击事件,设置是否显示div参数为false:@click=“showBox= false”给目标元素加点击事件,设置是否显示div参数为true, 并给点击事件设置阻止单击事件继续传播:@cli...原创 2019-09-02 16:26:44 · 4009 阅读 · 0 评论