这篇文章主要介绍了详解Vue.js基于$.ajax获取数据并与组件的data绑定，非常具有实用价值，需要的朋友可以参考下Vue.js与jQuery不冲突？？？在实际的应用中，几乎90%的数据是来源于服务端的，前端和服务端之间的数据交互一般是通过ajax请求来完成的。 说到ajax请求，第一反应肯定想到了jQuery，项目中如果引入jQuery会帮助我们简化很多操作，简化DOM操作，ajax方法获取后端数据等。 然而，Vue.js和jQuery冲突吗？？？ 答案显然是不冲...
sentry简介 Sentry 是一个开源的错误追踪工具，可以帮助开发人员实时监控和修复系统中的错误。其专注于错误监控以及提取一切事后处理所需的信息;支持几乎所有主流开发语言( JS/Java/Python/php )和平台, 并提供了web来展示输出错误。 sentry官网： https://sentry.io/ sentry安装 sentry 是一个开源的工具，可以自行搭建。 官方支持两种安装和运行 Sentry 服务器的方法， Docker 和 Python 。推荐使用 Docker 。 当然，对于刚开始接...
1、什么是指令？ 指令通常以"v-"作为前缀, 以方便Vue知道你在使用一种特殊的标记。 除了 Vue 核心携带着的一些默认指令（v-model 和 v-show）之外， Vue 还允许你注册自己的自定义指令。某些情况下，还是需要对普通元素进行一些底层 DOM 访问， 这也是自定义指令仍然有其使用场景之处。 2、全局指令： 当页面加载时，元素将获取焦点，事实上，在访问页面时，如果你还没有点击任何地方，上面的输入框现在应该处于获取焦点的状态。现...
1. 安装依赖：npm install node-sass sass-loader -D 2. webpack.base.conf.js文件 module: { { //手动添加这一条，相当于是编译识别sass!test: /\.scss$/, loaders: ["style", "css", "sass"]}}3. 在.vue文件中使用 <style scoped lang="scss">.box{width: 100%; :hover{ color: red; }} </style> 下面看下sass与scss的区别 用了很久css预编译器，但是一直不太清楚到底用的sass还是scss，直到有天被问住了有点尴尬，找了个教程撸...
这篇文章主要介绍了使用Vue开发动态刷新Echarts组件的教程详解,需要的朋友可以参考下需求背景：dashboard作为目前企业中后台产品的“门面”，如何更加实时、高效、炫酷的对统计数据进行展示，是值得前端开发工程师和UI设计师共同思考的一个问题。今天就从0开始，封装一个动态渲染数据的Echarts折线图组件，抛砖引玉，一起来思考更多有意思的组件。准备工作项目结构搭建因为生产需要（其实是懒），所以本教程使用了 ==vue-cli==进行...
这次给大家带来vue+axios表单中上传图片步骤详解，vue+axios表单中上传图片的注意事项有哪些，下面就是实战案例，一起来看一下。然后问题就是element 中的上传控件在没有图片的时候是不会触发提交的，但接口写的是有file的 multipart/form-data 接收模式所有只能自己另个模仿一个表单上传<input class="file" name="file" type="file" accept="image/png,image/gif,image/jpeg" @change="update"/>let file = e.target.files[0...
用了好久的vue-resource，好像每一次使用的时候，都要去看一下上一次是怎么写的，具体的语法过不了多久又忘记了，甚至不知道其中的原理，只知道一些简单的使用，一会儿用ES6的语法，一会儿又用传统的语法，为了改变这种不良的习惯，并理清vue-resource使用promise取数据的原理，今天把这一块整理一下。 先来说说 vue-resource vue-resource是Vue.js的一款插件，它可以通过XMLHttpRequest或JSONP发起请求并处理响应。也就是说，$.aj...
1.vue-cli 构建项目//全局安装 vue-clinpm install - g vue- cli//创建一个基于 webpack 模板的新项目vue init webpack my- project//cd 进入刚新建的项目文件(my-project)cd my- project// 运行npm run dev2.vue-cli 使用axios//1.先安装axiosnpm install axios//2.main.js中引入并放在Vue的原型上import axios from axios;Vue.prototype.axios = axios;//3. .vue文件中中使用this.axios.post..3.vue-cli项目和请求后台接口//找到...
这次给大家带来Vue.js实现可配置登录表单步骤详解，Vue.js实现可配置登录表单的注意事项有哪些，下面就是实战案例，一起来看一下。业务场景在之前，项目只支持手机号+密码登录，前端是直接把表单写死的，后来有客户希望能支持验证码登录，有的客户还希望能有手机号+验证码+密码的登录方式…所以登录方式的灵活性需要可配置的表单支持，于是我把登录组件做了拆分。 以表单元素为粒度，分离出了手机号、密码、短信验证码这几个组件，...
Vue过度(动画)，本质走的是CSS3：transtion，animation。 控制器div显示/隐藏，代码如下：<div id="box"><input type="button" value="按钮" @click="toggle"><div id="div1" v-show="isShow"></div></div><script type="text/javascript">var vm = new Vue({el:#box,data:{isShow:false},methods:{toggle(){this.isShow = !this.isShow;}}});</script> 我们已经实现了对div的显示/隐藏，但是没有过渡（动画）效果。 1.单元素/组件...
为什么要配置不同的接口地址在开发过程中，前端请求访问的是自己本机启动的后台服务，此时涉及到跨域（因为端口不一样），所以在config/index.js文件中配置了代理 //检查某个文件是否存在 try {fs.statSync(path.join(__dirname, ../proxy/ + templatedir + .json))//如果可以执行到这里那么就表示存在了console.log(124)proxyTable = require(../proxy/ + templatedir + .json) } catch (e) {//捕获异常 } module.exports = {dev:...
这次分享的是关于Vue自定义指令的使用方法，学习完基础后我们再来实战完成一个下拉列表，废话不多说，直接上干货基本用法 //全局注册 Vue.directive(my-directive, {// 指令选项 })// 局部注册 var app = new Vue({el: #appdirectives: {my-directive: {// 指令选项} }) 相信对Vue比较熟悉的人看完都知道，directive的写法与组件 基本类似，只是方法名由component改为了directive。上例只是注册了自定义指令v-my-directive，还没实...
这两天学习了vue-resource插件个地方知识点挺多的，而且很重要，所以，今天添加一点小笔记。Vue可以构建一个完全不依赖后端服务的应用，同时也可以与服务端进行数据交互来同步界面的动态更新。 Vue通过插件的形式实现了基于AJAX，JSPNP等技术的服务端通信。 vue-resource是一个通过XMLHttpRequrest或JSONP技术实现异步加载服务端数据的Vue插件 提供了一般的 HTTP请求接口和RESTful架构请求接口，并且提供了全局方法和VUe组件实例方...
今天学习了vue过渡和animate.css结合使用，所以，添加一点小笔记。<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>动画</title><script type="text/javascript" src="vue.js"></script><link rel="stylesheet" type="text/css" href="animate.css" rel="external nofollow" ><style type="text/css">p {width: 300px;height: 300px;background: red;margin: 10px auto;}</style><script type="text/javascr...
这次给大家带来vue addRoutes实现动态权限路由菜单步骤详解，vue addRoutes实现动态权限路由菜单的注意事项有哪些，下面就是实战案例，一起来看一下。需求最近接手一个后台管理系统，需要实现导航菜单从后台拉取的效果；根据登录用户的权限不同分别拉出来的导航菜单也不一样，另外可操作的界面也存在区别。问题因为后台管理系统是准备使用vue+vue-router+element-ui+vuex的搭配来做的，可是单页应用在进入页面之前就已经将vue-rout...