在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...
不多说，直接代码，以便以后重复利用： <script type="text/ecmascript-6"> import BScroll from better-scroll; const ERR_OK = 0; export default {props: {sell: {type: Object}},data() {return {goods: [],listHeight: [],scrollY: 0};},computed: {currentIndex() {for (let i = 0; i < this.listHeight.length; i++) {let height1 = this.listHeight[i];let height2 = this.listHeight[i + 1];if (!height2 || (this.scroll...
先看看效果图：例如:在做系统时，主页面有两个功能【home】and【news】,在【home】下又分为登录和注册。 首先需要将各种模板进行抽离。定义模板 <template id="home"> //home模板，里面含子视口<div><router-link to="/home/login">登录</router-link><router-link to="/home/zhuce">注册</router-link><router-view></router-view></div> </template> <template id="news"> //消息模板<div>news</div> </template> <template id="...
vue更新到2.0之后，作者就宣告不再对vue-resource更新，而是推荐的axios,前一段时间用了一下，现在说一下它的基本用法。 首先就是引入axios,如果你使用es6，只需要安装axios模块之后 import axios from axios; //安装方法 npm install axios //或 bower install axios当然也可以用script引入 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>axios提供了一下几种请求方式 axios.request(config)axios.get(url[,...
整理文档，搜刮出一个使用 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 ...