安装 跟视频一样，不想看视频的看这里咯官网下载安装node.js，安装node.js会自动安装npm（或者在npm官网install npm）,可在命令行输入npm -v检查是否安装；（在vue.js的官网教程安装的注释中有给出npm国内镜像可提高安装速度)在命令行输入npm install vue；接着是命令行工具，截了一个视频的图 上述命令新建了my-project项目，新建过程中会提示输入一些诸如项目名称、描述等，命令npm run dev运行项目，终端提示：Your applicatio...
vue中，我们所要实现的一个场景就是： 1.搜索页面==>到搜索结果页时，搜索结果页面要重新获取数据， 2.搜索结果页面==>点击进入详情页==>从详情页返回列表页时，要保存上次已经加载的数据和自动还原上次的浏览位置。 最近在项目中遇到这个问题，思考了几套方案，总是不太完善。百度搜到的方案也基本都只能满足一些很简单的需求。对于复杂一些的情况，还是有些不完善的地方。以下是个人对于这种场景的一个摸索，也参考了百度。如有更...
vue缓存分为页面缓存、组建缓存、接口缓存，这里我主要说到了页面缓存和组建缓存 页面缓存： 在server.js中设置 const LRU = require(lru-cache) const microCache = LRU({max: 100, // 最大缓存的数目maxAge: 1000 // 重要提示：条目在 1 秒后过期。 })const isCacheable = req => {//判断是否需要页面缓存if (req.url && req.url === /) {return req.url} else {return false} } app.get(*, (req, res) => { const cacheable = i...
keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。这篇文章主要介绍了vue 指定组件缓存,需要的朋友可以参考下keep-alive 简介keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。用法也很简单：<keep-alive><component><!-- 该组件将被缓存！ --></component> </keep-alive>propsinclude - 字符串或正则表达，只有匹配的组件会被缓存exclude - 字符串或正则表达式，任...
本文主要介绍了vue使用keep-alive实现数据缓存不刷新，这里整理了详细的代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。到现在，接触vue也小段时间了，项目进行到了一定程度，然而项目缺少了缓存机制，所以每次跳转页面都会重新created一下数据，虽说系统的数据请求速度很快，但是这样做对系统的性能会有很大的坏处的，所以到这里就要对系统优化下，添加缓存了。其实到现在，对于vue还是没有玩通，每...
keep-alive 简介 keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。 用法也很简单： <keep-alive><component><!-- 该组件将被缓存！ --></component> </keep-alive>props include - 字符串或正则表达，只有匹配的组件会被缓存 exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存// 组件 a export default {name: a,data () {return {}} } <keep-alive include="a"><component><!-- name 为...
大家好，本文给各位做一下vue.js一个最基本的概念介绍。 vue.js 指令<div id="app"><div v-text="message"></div> </div> var app = new Vue({el: #app,data: {message: Hello Vue!} })这个例子我们会得到，v-text所在的div元素的内部插入了Hello Vue！这段字符串，那么我们为什么会产生这样一个结果呢，我们来分析一下：这一步的意思是，实例化的这个Vue接管了#app元素，这里面的所有内容归我管，也就是说可以接受vue的功能指令。...
将bmob js-sdk放在static目录，然后在index.html页面中已 script 标签的形式引入，就可以在vue中全局使用bmob js-sdk。本文主要给大家分享bmob js-sdk 在vue中的使用教程，需要的朋友参考下吧，希望能帮助到大家。BmobSDK的引入将bmob js-sdk放在static目录，然后在index.html页面中已 script 标签的形式引入，就可以在vue中全局使用bmob js-sdk<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script src="st...
大家好，由于公司忙着赶项目，导致有段时间没有发布新文章了。今天我想跟大家谈谈Cookie的使用。同样，这个Cookie的使用方法是我从公司的项目中抽出来的，为了能让大家看懂，我会尽量写详细点。废话少说，我们直接进入正题。一、安装Cookie 在Vue2.0下，这个貌似已经不需要安装了。因为当你创建一个项目的时候，npm install 已经为我们安装好了。我的安装方式如下： # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个...
1、使用input透明覆盖法将input的z-index设置为1以上的数字并覆盖到需点击的内容上，将input的样式opacity设置为0（即为透明度为0），这样通过绑定在input上的change事件触发 ----推荐 <p class="uploadImg"><input type="file" @change="picUpload($event)" accept="image/*" /> </p> .uploadImg {width: 100%;height: 1.46rem;position: relative;input {width: 1.46rem;height: 100%;z-index: 1;opacity: 0;position: absol...
一.设置config/index.js || proxyTable添加 proxyTable: {/api: {target: http://192.168.48.239:8080/ydzl,changeOrigin: true,pathRewrite: {^/api: }}二.mian.js 添加vue全局属性 Vue.prototype.HOST = /api三.如果是post的话 1.修改数据格式 transformRequest: [function (data) {// Do whatever you want to transform the datalet ret = for (let it in data) {ret += encodeURIComponent(it) + = + encodeURIComponent(data...
本文主要和大家分享安装vue.js实例教程，希望能帮助到大家。1.使用win+r打开cmd 如果已经安装成功了，就会出现以上图片中的样式2.安装cnpm node环境已经安装完成，npm包管理器也有了。由于有些npm有些资源被屏蔽或者是国外资源的原因，经常会导致用npm安装依赖包的时候失败，所有我还需要npm的国内镜像—cnpm。 在命令行中输入 npm install -g cnpm –registry=http://registry.npm.taobao.org 然后等待，安装完成如下图。 完成之...
项目中用的element 的框架，然后在项目有一个添加数据需求是图片可上传，也可不上传， 然后问题就是element 中的上传控件在没有图片的时候是不会触发提交的，但接口写的是有file的 multipart/form-data 接收模式 所有只能自己另个模仿一个表单上传 <input class="file" name="file" type="file" accept="image/png,image/gif,image/jpeg" @change="update"/> let file = e.target.files[0]; let param = new FormData(); /...
下面给大家介绍vue自定义指令directive，具体内容如下所示： 官网截图实例 vue除了一些核心的内部定义的指令（v-model,v-if,v-for,v-show）外，vue也允许用户注册自己的一些功能性的指令，有时候你实在是要对Dom操作，这个时候是自定义指令最合适的了。 来直接看例子：当页面加载时使得元素获得焦点（autofocus 在移动版 Safari 是不支持的），就是当页面加载好了，不做任何的操作使得表单自动获得焦点，光标自动在某个表单上代码...
本文主要介绍了Vue组件之Tooltip的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。前言本文主要Alert 组件的大致框架， 提供少量可配置选项。 旨在大致提供思路tooltip常用于展示鼠标 hover 时的提示信息。模板结构<template><p style="position:relative;"><span ref="trigger"><slot></slot></span><p class="tooltip"v-bind:class="{top: placement === top,left...