1.新建componentA.vue组件，代码如下：store.js代码如下：const STORAGE_KEY = todos-vue.js export default{fetch(){return JSON.parse(window.localStorage.getItem(STORAGE_KEY) || [])},save(items){window.localStorage.setItem(STORAGE_KEY,JSON.stringify(items));} }App.vue代码如下：<template><p id="app"><h1 v-text="title"></h1><input v-model="newItem" v-on:keyup.enter="addNew"/><ul><li v-for="item in items" ...
这篇文章主要为大家详细介绍了基于vue2的table分页组件实现方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下本文实例为大家分享了vue2 table分页组件的具体代码，供大家参考，具体内容如下pagination.js:(function(){var template = <p class="page-bar" > \<p class="info">{{info}}</p>\<p class="showpages">每页<select class="showpages-select" v-on:change="pageschange" v-model="selected" ><option v-for="item ...
前言GitHub： server | 前端为什么是绘板：v2ex作为一名前端，总会有意无意接触到 NodeJS 、有意无意会去看文档、有意无意会注意到框架，但真当需要我们需要在工作中善用它时，多半还是要感叹一句“纸上得来终觉浅”。所以一周前我决定进行一个实践尝试，希望能把以往无意中学到的知识融汇贯通，最终选择把以前的一个画板 Demo 重写并添加 server 端。 技术栈 [vue + vuex + vue-router] 页面渲染 + 数据共享 + 路由跳转[axios] 以...
1.Nuxt里怎么使用vuex? Nuxt.js 内置引用了 vuex 模块，所以不需要额外安装。 Nuxt.js 会尝试找到应用根目录下的 store 目录，如果该目录存在，它将做以下的事情： 1.1> 引用 vuex 模块 1.2> 将 vuex 模块 加到 vendors 构建配置中去 1.3> 设置 Vue 根实例的 store 配置项 Nuxt.js 支持两种使用 store 的方式： 普通方式： store/index.js 返回一个 Vuex.Store 实例 模块方式： store 目录下的每个.js 文件会被转换成为状态树指定命...
增加一个自定义滚动条插件： //插件采用jsx语法，使用前需要安装vue-jsx插件 npm install babel-plugin-syntax-jsx --save-dev npm install babel-plugin-transform-vue-jsx --save-dev npm install babel-helper-vue-jsx-merge-props --save-dev npm install babel-preset-es2015 --save-dev //更改.babelrc文件 {"presets": [["es2015", { "modules": false }],["env", {"modules": false,"targets": {"browsers": ["> 1%", "las...
一、JWT身份认证简介JSON Web Token（JWT）是目前最流行的跨域身份验证解决方案，相较于session机制，服务器就不需要保存任何 session 数据了，也就是说，服务器变成无状态了，从而比较容易实现扩展。JWT 实际上是一个令牌（Token），服务器会将一些元数据、指定的secret进行签名并生成token，并返回给客户端，客户端得到这个服务器返回的令牌后，需要将其存储到 Cookie 或 localStorage 中，此后，每次与服务器通信都要带上这个令...
指令该指令的作用是dom渲染后触发，因为非vue的插件有的是dom必须存在的情况下才可以执行 Vue.directive(loaded-callback, {inserted: function (el, binding, vnode) {binding.value(el, binding, vnode)} }) 安装chartjsnpm install chart.js --savechartjs 组件<template><canvas refs="chartcanvas" v-loaded-callback="setCanvas"></canvas> </template> <script type="text/javascript"> require(chart.js) export default{n...
Vue开发环境中修改端口号如上图所示，在开发环境中，8080便是端口号，这也是使用Vue脚手架创建的项目运行时的默认的端口。 1.Vue 2.x config文件夹中有一个index.js其中部分内容如下，port即为端口号，在这里更改即可。 module.exports = {dev: {env: require(./dev.env),port: 8080, // 端口号assetsSubDirectory: static,assetsPublicPath: /,proxyTable: {},// CSS Sourcemaps off by default because relative paths are "bug...
vue版本信息：2.5.2 问题起源于使用Vue做网站时涉及到的一个小部件显示动画，阅读了Vue的文档后结合网上各位的经验，花了点时间研究了下。最终的效果如上图所示，当鼠标移入灰色方块时弹出层会至上而下显示出来，类似于 拉链式窗帘(?)。 实例 实现上图所示的效果代码如下： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equi...
安装cesium在已有项目中执行, npm i cesium修改配置build/webpack.base.conf.js1、定义 Cesium 源码路径const cesiumSource = ../node_modules/cesium/Sourceuse strict const path = require(path) const utils = require(./utils) const config = require(../config) const vueLoaderConfig = require(./vue-loader.conf) //--cesium--配置 const cesiumSource = ../node_modules/cesium/Source; 2、在output 里加入sourcePrefix...
先给大家介绍下vue中filters 传入两个参数 / 使用两个filters .vue 传入两个参数<van-col>{{第一个参数|formatVisitTime(第二个参数)}}</van-col>使用两个filters <van-tag plain :color="item.CreateTime（参数）|formatVisitDate（filters方法）|formatVisitDateColor（filters方法）">{{item.CreateTime|formatVisitDate}}</van-tag>format.js export const formatVisitTime = (beginTime, finishTime) => {if (!beginTime) {re...
这里以网易云音乐作为示例，效果图：我们先一层一层写导航先设计第一层1.设计导航页面样式第一个导航页面为Discover Discover.vue： <!-- --> <template><div>发现</div> </template><script> export default {name: "discover",data() {return {};} }; </script> <style scoped> </style>第二个导航页面为Mymusic其余代码一样，注意要把name改为相应路由 name: "mymusic"2.配置路由 index.js： import DisCover from @/components...
面包屑应该是我们在项目中经常使用的一个功能，一般情况下它用来表示我们当前所处的站点位置，也可以帮助我们能够更快的回到上个层级。 今天我们就来聊聊如何在 Vue 的项目中实现面包屑功能。以下案例都是使用 Element-UI 进行实现。 最笨的方式 首先我们想到的最笨的方法就是在每个需要面包屑的页面中固定写好。 <template><div class="example-container"><el-breadcrumb separator="/"><el-breadcrumb-itemv-for="(item,index) ...
此功能基于vue（v2.6.8） + typescript（v3.3.3333）, 引入极验（geetest v3+）（官方api），使用其product: bind模式， 页面挂载后初始化ininGeetest，点击登录按钮后先做表单验证，通过后弹出滑块框，拖动验证成功，执行登录方法。 本项目为前后端分离，所以后端部署部分，请自行参考文档操作后台接口：开始：/public/js目录添加 jquery-1.12.3.min.js文件 和 gt.js（下载）在/public/index.html中引入以上添加的两个文件login.v...
也不存在什么加载咯， 就是一个判断滚动条是否到达浏览器底部了。 如果到了就触发事件，米到就不处理。 计算公式提简单的 底部等于（0） = 滚动条高度 - 滚动条顶部距离 - 可视高度。 反正结果就是0。 一、获取滚动条位置 class Scroll {static get top() {return Math.max(document.documentElement.scrollTop || document.body.scrollTop);}static get clientHeight() {return Math.max(document.documentElement.clientHeig...