vuex 渐进式教程，从入门级带你慢慢深入使用vuex。 Vuex 是什么？ Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态， 并以相应 的规则保证状态以一种可预测的方式发生变化。 vuex官网： vuex.vuejs.org/zh/guide/ 安装 安装vue-cli:cnpm install -g vue-clivue init webpack vuex安装vuexcnpm i vuex --save 1.初级使用方法// main.jsimport Vue from vue import App from ./App im...
Vue-touch的使用 有时候我们不止需要有返回键，也要有手势滑动切换页面的功能时，这个时候vue-touch就派上用场了 API地址： https://github.com/vuejs/vue-touch/tree/next 安装 npm insall vue-touch@next --save //main.js中引入： import VueTouch from vue-touch Vue.use(VueTouch, {name: v-touch})用法如下： //html代码 <template><v-touch v-on:swipeleft="swiperleft" v-on:swiperight="swiperright" class="wrapper"><di...
手动轮播图，为轮播图中的一种，轮播图主要有无缝轮播，手动轮播，延迟轮播，切换轮播等等。。。 轮播图主要用于展现图片，新出商品，词条，又能美观网页。給网页中增加动态效果。 手动轮播，是小编认为最简单的一种轮播方式，既能左右翻页，还能通过悬浮按钮，快速预览图片，所以今天就给大家写一个原生js手动轮播图。 一，利用JavaScript制作手动轮播图，首先排版。 引入默认样式表（可以手写）； <link rel="stylesheet" href="...
具体代码如下所示： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>.dragAble {position: relative;cursor: move;}.img-con {position: relative;width: 713px;height: 455px;overflow: hidden;border: 1px solid red;}</style> </head> <body><p class="img-con"><img src="http://img03.tooopen.com/uploadfile/downs/images/20110714/sy_20110714135215645030.jpg" class="drag...
具体代码如下所示： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="external nofollow" > </head> <body > <div id="app"><!--此处model的abc 要是下面input 绑定的对象名称, ref 要和提交按钮的submit参数 名称要一致--><el-form size="mini" :model="abc" ref="validateRef"><!--此处的prop 和...
1、时间格式化 //昨天的时间var day1 = new Date();day1.setTime(day1.getTime()-24*60*60*1000);var s1 = day1.getFullYear()+"-" + (day1.getMonth()+1) + "-" + day1.getDate();//今天的时间var day2 = new Date();day2.setTime(day2.getTime());var s2 = day2.getFullYear()+"-" + (day2.getMonth()+1) + "-" + day2.getDate();//明天的时间var day3 = new Date();day3.setTime(day3.getTime()+24*60*60*1000);var s3 = day3.g...
介绍VuePress 由两部分组成：一个以 Vue 驱动的主题系统的简约静态网站生成工具，和一个为编写技术文档而优化的默认主题。它是为了支持 Vue 子项目的文档需求而创建的。 由 VuePress 生成的每个页面，都具有相应的预渲染静态 HTML，它们能提供出色的加载性能，并且对 SEO 友好。然而，页面加载之后，Vue 就会将这些静态内容，接管为完整的单页面应用程序(SPA)。当用户在浏览站点时，可以按需加载其他页面。 前两天接触到了 Vuepres...
最近写公司项目有涉及到轮播banner，一般的ui框架无法满足产品需求；所以自己写了一个层叠式轮播组件；现在分享给大家； 主要技术栈是vue.js ;javascript;jquery；确定实现思路因工作繁忙，暂时不做梳理了；直接贴代码参考； 此组件是基于jquer封装，在vue项目中使用首先需要先安装jquery插件：指令：npm install jquery,安装完成之后再webpack.base.conf.js配置插件：plugins: [new webpack.ProvidePlugin({$: jquery,jQuery: jqu...
自定义指令：以v开头，如：v-mybind。 代码示例： <input v-mybind /> directives:{mybind:{bind:function (el) {el.value = "this is mybind-bind"}}} 这时页面初始化时，input中会显示this is mybind-bind。 通过directives注册自定义指令mybind，每一个自定义指令中又提供若干钩子，如示例中的bind，bind的作用是定义一个在绑定时执行一次的初始化动作，观察bind函数，它将指令绑定的DOM作为一个参数，在函数体中，直接操作DOM节...
具体代码如下所示： // 1.scroll-y="true" Y轴滚动 // 2.应该是设置了高才能行 // 3.使用scroll-top属性实现滚动到底部,scroll-top不要带单位 <scroll-view scroll-y="true" style="height:{{height-50}}px;" scroll-top="{{scrollTop}}"><block wx:for="{{recordList}}" wx:key="item.id"><view><text>{{item.text}}</text></view</block> </scroll-view>Page({data: {// 列表recordList：,height: ,scrollTop: 0},onLoad: funct...
实现一个日期组件，如图：components.js代码如下： Vue.component(sc-calendar,{template:<div class="scCalendar"> +<div class="calendar_header"> +<div class="prev" @click="prevMonth"> < </div> +<span class="text_year">{{currentYear}}年</span> +<span class="text_month">{{currentMonth}}月</span> +<div class="next" @click="nextMonth"> > </div> +</div> +<div class="calendar_content"> +<ul class="week"> +<l...
微信小程序组件里没有下拉框，正好要用到，记下来以后参考 wxml代码 <view class=top><view class=top-text> 选择接收班级</view><!-- 下拉框 --><view class=top-selected bindtap=bindShowMsg><text>{{grade_name}}</text><image src=/images/icon/down.png></image></view><!-- 下拉需要显示的列表 --><view class="select_box" wx:if="{{select}}"><view wx:for="{{grades}}" wx:key="unique"><view class="select_one" bindta...
1. js实现动画 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>animate</title><style>.ball {width: 40px;height: 40px;margin-bottom: 5px;border-radius: 20px;}.ball1 {background: red;}.ball2 {background: blue;}.ball3 {background: yellow;}</style> </head> <body><div class="ball ball1" style="margin-left: 0"></div><div class="ball ball2" style="margin-left: 0"></div><div class="ball...
本文主要介绍怎么在el-tree组件中通过render函数来生成el-button。 这是element-ui中el-tree树：这是需要实现的效果：tree.vue文件中，具体实现的代码如下： <template><el-tree:data="treeData":props="defaultProps"show-checkboxnode-key="id"default-expand-all:expand-on-click-node="false":render-content="renderContent"></el-tree> </template> <script>export default {name: tree,data:function(){return {treeData: [...
通过style改变样式 <div :style="{ min-height: size + px }"></div> <div :style="[{ min-height: size + px },{color:red}]"></div> <div :style="{ opacity: value ? 0.5 : 1 }"></div> 通过className改变样式 ?<div class="static"v-bind:class="{ active: isActive, text-danger: hasError }"> </div><script> data: {isActive: true,hasError: false } </script><style> .active{... } .text-danger{... } </style>PS：下面...