兄弟组件之间互相传值，需要建立一个“中转站”（新的vue实例），并且需要主动触发。 实例上的$on方法来接受监听。 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>组件传值</title><script src="vue.js"></script> </head> <body><div id="box"><child1></child1><child2></child2></div><template id="c1"><h1>~~~~~~我是哥哥~~~~{{msg}} <button @click=fn>点击</button></h1></template><template id="...
最近新学习了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...
项目背景 图片轮播是前端项目必有项，当前有很多效果很酷炫的轮播插件，例如 Swiper 。 但是当我们项目中的图片轮播只需要一个很简单的轮播样式，比如这样的 我们引用这样一个 110k 的大插件，就大材小用了。再安利一下，swiper2.x和swiper3.x对移动和PC端支持情况如下图当当当当~~~ 我们今天的主角登场了， thebird/Swipe ，这个插件完成了图片轮播需要的基本功能，只有 14.2k ,真真的 轻量级 啊。还有，还有翻译一下，就是俺们全...
废话不多说了，直接给大家贴代码了， 完整代码： <!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;...
因为需要实现类似APP页面切换的动画效果，百度google搜索比较少资料，所以自己写文档，希望对您有用在router/index.js import Vue from vue import Router from vue-routerVue.use(Router)Router.prototype.goBack = function () {this.isBack = truewindow.history.go(-1) } const router = new Router({routes: [{path: /,name: PageTransition, component: PageTransition, // 引入页面切换组件children: [{path: ,component: I...
一个项目学会vue全家桶+axios实现登录、拦截、登出功能，以及利用axios的http拦截器拦截请求和响应。 前言 该项目是利用了Github 提供的personal token作为登录token，通过token访问你的Repository List。通过这个项目学习如何实现一个前端项目中所需要的 登录及拦截、登出、token失效的拦截及对应 axios 拦截器的使用。 准备你需要先生成自己的 Github Personal Token（ 生成Token ）。 Token 生成后 访问Demo，即可查看你的Repos...
1.在很多的项目中，我们都会用到日期插件，然后当我在vue中使用bootstrap datetimepicker时发现双向绑定不起作用了，bootstrap datetimepicker修改的日期不会同步到data中，下面看我的解决方案： <template><div id="time"><span class="select-box-title">选择发送时间：</span><input class="form-control select-box-input" v-model="time" type="text"id="messageSendTime"></div></div> </template><script>import $ from jqu...
在后台管理系统中，图表是一个很普遍的元素。目前常用的图标插件有 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的开发中遇到这样一个问题： img的src属性绑定url变量，然而图片加载失败。大部分的情况中，是开发者使用了错误的写法，例如： <img src="{{ imgUrl }}"/>这样写肯定是不对的，正确的写法应该使用v-bind: <img v-bind:src="imgUrl"/>不过，有时候即使使用了正确的语法，依旧无法显示图片，因为你的imgUrl使用了本地图片的路径。例如，有下面一个文件结构：现在，我们要在App.vue里使用位于src/assets/目录下的logo.png图...
本文为大家分享了vuejs组件开发之手风琴菜单组件实例，供大家参考，具体内容如下 小图标是引入font-awesome字体图标库绘制的。效果如下图所示： 代码： <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>index</title><link rel="stylesheet" href="css/font-awesome.min.css"><link rel="stylesheet" href="css/index.css"><script type="text/javascript" src="../lib/vue.min.js"></script><script type="t...
今天有一个盆友问小颖，怎么实现用select动态控制input禁用，也就是说，input默认是可编辑的，但是每当我选一次select，input就会变成禁用，虽然小颖不知道她为什么这样做，因为小颖觉得为什么不直接把input设置成禁用的而要用动态的，选一次select禁用一次input，也就是说，input只有在select是没有点击过的时候是可编辑的，但凡我改变一次select的值，input就要被设置成禁用，其实没有必要，因为第一次设置成禁用后面已经不能再改...
在vue2.0之后的版本中，不允许子组件直接改变父组件的数据，在1.0的版本中可以这样操作的，但是往往项目需求需要改变父组件的数据，2.0也是可一个，区别是，当我们把父元素的数据给子组件时，需要传一个对象，子组件通过访问对象中的属性操作数据，下面是演示 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><script type="text/javascript" src="vue.js"></script> <script type="text/j...