最近新学习了vuejs,尝试着用vuejs写了一个简单的图片轮播，便做个简单的记录 以下只贴出carousel.vue代码，其他的省略 <template> <div ref="root"> <div class="sliderPanel"> <div v-for="(item,index) in imgArray" class="verticalCenter picbox"> <transition name="slide-fade"> <img :style="{width:width,top:top}" @mouseover="clearAuto" @mouseout="slideAuto" v-show="index===selectIndex" :src="item.url" style="...
整理文档，搜刮出一个vue中用H5实现文件上传的方法实例代码，稍微整理精简一下做下分享。 1.图片上传<img v-if="personInfo.photoUrl" :src="headPreFix + personInfo.photoUrl" style="height:126px;max-width:133px;margin: 25px 0;"><img v-else src="../../assets/default.png" style="height:126px;max-width:133px;margin: 25px 0;"> <form id="form1" enctype="multipart/form-data" method="post" action=""><div style="h...
在html页面中加入bootstrap是很方便，就是一般的将css和js文件通过Link和Script标签就行。 那么在一个用vue-vli生成的前端项目中如何加入？因为框架不一样了，略微要适应一下。 脚手架生成项目 执行命令用webpack模板生成一个名为vuestrap的项目（名字任意） vue init webpack vuestrap在出现的各提示选项中，没什么要求，为了方便，把不用的ESLint，unit tests，e2e都关掉（这些选项都随意）。 ? Project name vuestrap ? Project...
vue.js动态获取数据库数据 (通过vue.cli和webpack搭建的环境) 1.首先我先在创建一个静态的data.json文件，在static下创建json文件夹，(webpack环境下，静态的文件放在static目录下) {"data":[{"id":1,"name": "yidong", "age": "11" },{"id":2,"name": "yidong2", "age": "12" },{"id":3,"name": "yidong3", "age": "13" },{"id":4,"name": "yidong4", "age": "14" },{"id":5,"name": "yidong5", "age": "15" },{"id":6,"name": "y...
废话不多说了，直接给大家贴代码了， 完整代码： <!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> <style type="text/css"> *{ padding: 0; margin: 0; font-size: 14px; } ul{ width: 200px; height: auto; } h2{ background: green; border: 1px solid #fff; color: #fff; height: 30px; line-height: 30px;...
一个项目学会vue全家桶+axios实现登录、拦截、登出功能，以及利用axios的http拦截器拦截请求和响应。 前言 该项目是利用了Github 提供的personal token作为登录token，通过token访问你的Repository List。通过这个项目学习如何实现一个前端项目中所需要的 登录及拦截、登出、token失效的拦截及对应 axios 拦截器的使用。 准备你需要先生成自己的 Github Personal Token（ 生成Token ）。 Token 生成后 访问Demo，即可查看你的Repos...
在后台管理系统中，图表是一个很普遍的元素。目前常用的图标插件有 charts, Echarts, highcharts。这次将介绍 Echarts 在 Vue 项目中的应用。 一、安装插件 使用 cnpm 安装 Echarts cnpm install echarts -S和之前介绍的 axios 类似，echarts 也不能通过 Vue.use() 进行全局调用 通常是在需要使用图表的 .vue 文件中直接引入 import echarts from echarts也可以在 main.js 中引入，然后修改原型链 Vue.prototype.$echarts = echar...
整理文档，搜刮出一个使用 Vue.js 仿百度搜索框的实例代码，稍微整理精简一下做下分享。<!DOCTYPE html> <html><head><meta charset="utf-8"><title>Vue demo</title><style type="text/css">.bg {background: #ccc;}</style><script src="https://cdn.bootcss.com/vue/2.1.7/vue.min.js"></script><script src="https://cdn.bootcss.com/vue-resource/1.3.1/vue-resource.min.js"></script><script type="text/javascript">window...
一. vue-amap，一个基于 Vue 2.x 和高德地图的地图组件 https://elemefe.github.io/vue-amap/#/ 这个就不细说了，按照其文档，就能够安装下来。 二. 按照官方提供的方法引入 1.修改webpac.base.conf.js文件externals: {AMap: AMap}2.引入sdk引入有两种方式，一种是页面直接引入代码如下: <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script> 还有一种是异步加载 <script src="ht...
当前组件依赖bootstrap样式，使用前请先引用相关css。 Vue.component(pagination, {template: `<nav aria-label="Page navigation"><ul class="pagination"><li :class="{disabled: pageNum == 1}"><a href="#" v-on:click.prevent="turnToPage(1)" title="首页" aria-label="首页"><i class="fa fa-fast-backward"></i></a></li><li :class="{disabled: pageNum == 1}"><a href="#" v-on:click.prevent="turnToPage(pageNum - 1)"...
最近写一个这样的页面 要求点击修改按钮之后部分输入框由禁用状态变为可用状态.我使用了vue中的事件处理器,但是不知道怎么获取disabled这个属性的值,所以以失败告终.后来又使用了vue中的v-bind,使其与class或者style绑定,但是也没有作用 <el-input id = "usernames" v-model="form.username" v-bind:style = {"disabled:isDisabled"}></el-input> data(){return{isDisabled:true} }后来又想到使用jquery来改变属性,但是这个也没用...
直接上代码。只有一个小小的需要注意的点：vue1.x的v-for循环是从0开始，遵从了程序语言设计的一贯的做法，而vue2.x是从1开始的，符合我们平常的习惯。用下来还是vue2.x的做法方便一些，不需要绕一下子了。//html <div id="paging"> <span v-on:click="switchPage(curPage - 1)">prev</span> <span v-for="item in sum" v-bind:class="{current-page: item == curPage}" v-text="item" v-on:click="switchPage(item)"></span> <spa...
Vue2.0删除了很多1.0的比较实用的过滤器，如filterBy，orderBy。官方文档给了通过计算属性实现1.0搜索过滤器功能，自己又加入了大小写通用检索功能，比较简单，学一下。 <body><div class="app"><input type="text" v-model="name"><ul><li v-for="user in newUsers" >{{ user.name }}</li></ul></div><script>new Vue({el: .app,data: {name: ,users: [{ name: Bruce },{ name: Chuck },{ name: Jackie },{ name: 赵 }] },compute...
本文实例为大家分享了vue图片加载与显示默认图片的具体代码，供大家参考，具体内容如下 HTML： <div class="content-show-img"><div class="show-img"><img class="default-image" :src="data.image" @load="successLoadImg" @error="errorLoadImg"></div> </div> JS： Vue.prototype.successLoadImg = function(event) {if (event.target.complete == true) {event.target.classList.remove("default-image");;var imgParentNode ...
本篇资料来于官方文档：http://cn.vuejs.org/guide/components.html#Props本文是在官方文档的基础上，更加细致的说明，代码更多更全。简单来说，更适合新手阅读 props数据传递①组件实例的作用域：是孤立的，简单的来说，组件和组件之间，即使有同名属性，值也不共享。 <div id="app"> <add></add> <del></del> </div> <script> var vm = new Vue({ el: #app, components: { "add": { template: "<button>btn：{{btn}}</button>"...