下面一段代码给大家介绍vue 实现的树形菜单功能，具体代码如下所示：<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>vue</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="animate.css" rel="external nofollow" ><script src="vue.js"></script><style>*{color:#585858;}#app{min-height: 650px;}#app li{list-style-type:none;}#app a{text-decoration:...
效果图如下所示： 前言 嗨，说起探探想必各位程序汪都不陌生(毕竟妹子很多)，能在上面丝滑的翻牌子，探探的的堆叠滑动组件起到了关键的作用，下面就来看看如何用vue写一个探探的堆叠组件 一. 功能分析 简单使用下探探会发现，堆叠滑动的功能很简单，用一张图概括就是: 简单归纳下里面包含的基本功能点: 图片的堆叠图片第一张的滑动条件成功后的滑出，条件失败后的回弹滑出后下一张图片堆叠到顶部体验优化根据触摸点的不同，滑动...
1.配置 build/webpack.dev.conf.js // 获取静态json数据 const express = require(express) const app = express() const apiServer = express() const bodyParser = require(body-parser) apiServer.use(bodyParser.urlencoded({ extended: true })) apiServer.use(bodyParser.json()) const apiRouter = express.Router() const fs = require(fs) apiRouter.route(/:apiName).all(function (req, res) {fs.readFile(./db.json, u...
这篇文章给大家介绍一个vue全局提示框组件，具体代码如下所示： <template><!-- 全局提示框 --><div v-show="visible" class="dialog-tips dialog-center"><div>{{message}}</div></div> </template> <script> export default {data() {return {visible: false,message: ""};} }; </script> <style lang="scss"> .dialog-tips{position: fixed;z-index: 100;min-width: 220px;padding: 40px 22px;white-space: nowrap;background-c...
1、安装vue-cli cnpm install vue-cli -g --执行全局安装 2、创建一个webpack的基础项目；命令：vue init webpack myproject;以下是项目的目录结构及说明build是webpack配置build.js // 生产环境构建代码check-versions.js // 检查node&npm等版本utils.js // 构建配置公用工具vue-loader.conf.js // vue加载器webpack.base.conf.js // webpack基础环境配置webpack.dev.conf.js // webpack开发环境配置webpack....
下面给大家分享vue 2.0实现星星评分组件，代码很简单，一起看看吧！ 废话不多说了，直接给大家贴代码了，具体代码如下所示：<template id="pingJia"> <div> <ul> <li :class="{li1:1,bg1:index%2}" v-for="(value,index) in list"><span class="stu_span1"> {{value.classs.major}}</span> <span class="stu_teacher">任课老师：{{value.classs.teacher}}</span> <div v-for="(item,index1) in value.classs.zh" class="stu_div" :...
实例代码： <!DOCTYPE html> <html> <head><meta charset="utf-8"><title>vue点击切换显示隐藏</title><script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body><div id="example"><button v-text="btnText" @click="showToggle"></button><p v-show="isShow">原本可以成为Google、Facebook的“爸爸”，或者微软的“儿子”，最后却像“孙子”一样被贱卖，沦为互联网浪潮的“弃子”。</p></div><scrip...
1，设置keepAlive：是否缓存 router: { path: /actlist, name: actlist, component: actlist, meta: { keepAlive: true } }2,设置渲染页面 app.vue <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view>3,记录滚动位置并赋值beforeRouteEnter(to,from,next){ if(!sessionStorage.askPositon || from.path == /){//当前页面刷新不需要...
vue cli+mui配合使用达到区域滚到的效果 ，方法如下 第一步 引入mui css js @import url("/static/mui.min.css"); JS import mui from ../../../static/mui.min.js; 第二步 写结构 mui的区域滚动结构是这样的 <div class="mui-scroll-wrapper"> <div class="mui-scroll"> *写需要滚动的内容 </div> </div> 下面粘贴我代码的一部分<div class="goods_foods mui-scroll-wrapper"><div class="mui-scroll"><ul class="mui-table-vi...
一、用 变量形式 绑定单个 Class 名 在 vue 中绑定单个 class 名还好说，直接写就可以了 <template><div id="app"><!-- 因为是自定义属性，所以要用到 v-bind ，简写为 : --><!-- 3.将 box 绑定给 div --><div :class="box"></div></div> </template><script> export default {name: app,data () {return {// 2.在 data 中把 yellow 赋给 boxbox: yellow}} } </script><style> /* 1.在样式表中写好样式 */ .yellow{width: 200px;he...
1.先clone项目到本地。2.git reset --hard commit 命令可以使当前head指向某个commit。完成html的基本布局 点击复制按钮来复制整个commit id。然后在项目根路径下运行 git reset 。用浏览器打开index.html来预览效果，该插件的html主要结果如下： <!-- 节点容器 --> <div class="dragrid"><!-- 可拖拽的节点，使用translate控制位移 --><div class="dragrid-item" style="transform: translate(0px, 0px)"><!-- 通过slot可以插入动...
初始化vue项目 npm install -g vue-cli vue init webpack demo # 中间会让你选npm yarn 等来安装依赖，我选的是yarn，因为它快些 安装mint-ui yarn add mint-uimint-ui装好了，还要配置一下babel，方法跟着mint-ui的官方文档来配置就可以了 下面是我配置好的 .babelrc 文件，启动的时候会报跟es2015相关的错，装一下 babel-preset-es2015 就好了 {"presets": [["env", {"modules": false,"targets": {"browsers": ["> 1%", "last 2...
vue-koa2-token 基于vue的 做了token验证 前端部分（对axios设置Authorization） import axios from axios import store from ../store import router from ../router //设置全局axios默认值 axios.defaults.timeout = 6000; //6000的超时验证 axios.defaults.headers.post[Content-Type] = application/json;charset=UTF-8; //创建一个axios实例 const instance = axios.create(); instance.defaults.headers.post[Content-Type] ...
前言 在最近的工作中需要一个盒京东购物车地址选择相似的一个省市区三级联动选择组件，google查了下都是下拉框形式的，于是自己写了一个，希望对使用vue开发项目的朋友有帮助，下面话不多说了，来一起看看详细的介绍吧。 显示效果如下：注意：使用vue2.0开发 实例代码 html代码如下 <!--居住地址三级联动选项--><section class="showChose" v-show="showChose"><section class="address"><section class="title"><h4>居住地址</h4>...
前言一开始接触到vue中的组件的时候，对于组件的理解还是不够充分的，最近在开发个人博客项目中，一开始就没准备使用一些现在比较流行的UI库（毕竟是个人项目，多练练手还是好的），所以需要自己开发几个全局组件，这里以MessageBox为例记录下vue.js如何开发全局组件。所谓全局变量是针对vue实例下说的，即所有的vue实际都可以运用到这个组件，局部组件就是针对某个实例来说的，只有这个vue实例下才能发挥作用，下面话不多说了，来...