vue开发
Generon
这个作者很懒,什么都没留下…
展开
-
vue开发:vue父子组件与非父子组件之间的通信
之前关于vue.js2.0父组件的一点学习,最近需要回顾,就顺便发到随笔上了?12345678910111213141516171819202122232425原创 2017-07-13 09:57:19 · 1408 阅读 · 0 评论 -
vue开发:vue2.0开发中常见问题
Vue目前的开发模式主要有两种1.直接页面级的开发,script直接引入Vue2.工程性开发,webpack+loader或者直接使用脚手架工具Vue-cli,里面的文件都配置好了,webpack可以进行配置,配置多文件入口,进行多页面开发对于第二种开发方式,结合webpack打包完文件会很大,怎么解决这个问题?1.webpack代码拆分:code-spliting原创 2017-07-13 10:39:00 · 1771 阅读 · 0 评论 -
vue开发:vue开发中疑惑点解答
前言Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的。相比于Angular.js,Vue.js提供了更加简洁、更易于理解的API,使得我们能够快速地上手并使用Vue.js。最近终于有时间空下来,所以想着把在使用vue过程遇到的一些问题疑惑总结处理,方便自己或者有需要的朋友们参考,下面话不多说了,来看看详细的介绍吧。一、计算缓存comp原创 2017-07-13 10:41:57 · 694 阅读 · 0 评论 -
vue开发:vue目录结构
作者:阿安链接:https://www.zhihu.com/question/38213423/answer/128155176来源:知乎著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。目录结构 ├── index.html 入口页面 ├── build原创 2017-07-13 10:52:28 · 2770 阅读 · 1 评论 -
vue开发:vue调用高德地图
前言:在之前的博客中,有成功引入高德地图,这是以前的地址 vue 调用高德地图。因为一些需求,需要使用到地图的周边功能。完整的项目代码请查看 我的github一 、先看要实现的结果,参考了链家的周边,如图所示。 二 、原理分析1、引入高德api,这个在之前的博客提到过,vue 调用高德地图。2、使用地图的周边插件,这是 高德网站的api原创 2017-07-10 14:40:12 · 13447 阅读 · 1 评论 -
vue开发:axios的post请求接口出现404,但是get则成功
methods:{myclick(){this.$http({methods:"post",url:"../../../static/my.json",headers:{"Content-Type":'application/x-www-form-urlencoded; charset=UTF-8'}}).then((res)=>{console.log(JSON.st原创 2017-10-20 09:42:01 · 14808 阅读 · 1 评论 -
vue开发:VUE axios发送跨域请求需要注意的问题
在实际项目中前端使用到vue,后端使用php进行开发。前端使用axios请求请求关于跨域跨域的概念这些就不说了,百度一大堆相关的资料信息。我就只在这里记录下我在使用当中遇到的问题,以纪念在逝去的几个小时中资料查找的艰辛。不多说,直接上代码~~~~同理,跨域的解决方案为cros。服务器 PHP端代码如下(laravel 中间件进行处理):?原创 2017-10-20 09:58:40 · 2493 阅读 · 0 评论 -
vue开发:详解vue.js的devtools安装
安装1.github下载地址:https://github.com/vuejs/vue-devtools2.下载好后进入vue-devtools-master工程 执行npm install ----->npm run build.3.修改manifest.json 中的persistent为true4.打开谷歌浏览器设置--->扩展程序--》勾选开原创 2017-10-16 11:29:15 · 856 阅读 · 0 评论 -
vue开发:vue-cli+axios解决跨域问题
1、首先axios不支持vue.use()方式声明使用,看了所有近乎相同的axios文档都没有提到这一点 建议方式在main.js中如下声明使用import axios from 'axios';Vue.prototype.$axios=axios;那么在其他vue组件中就可以this.$axios调用使用12342.小小的提一下vue cli脚手架前端调后端数据接口时候的本原创 2017-10-26 15:30:31 · 3775 阅读 · 0 评论 -
vue开发:vue引入echarts
安装echarts依赖npm install echarts -S1或者使用国内的淘宝镜像:安装npm install -g cnpm --registry=https://registry.npm.taobao.org1使用cnpm install echarts -S1创建图表全局引入main.js// 引入echartsimp原创 2017-11-05 00:43:54 · 3476 阅读 · 0 评论 -
vue开发:vue-cli引入swiper
1:下载需要 swiper 的js文件和css文件http://www.swiper.com.cn/12:下载好swiper相关的js和css,js放在static目录下,css放在assets目录下。3:安装runtime:npm install babel-runtime 14:修改.eslintrc.js文件如下: 最后一行添加 'globals': {原创 2017-12-01 11:54:57 · 3052 阅读 · 0 评论 -
vue开发:vue动态路由匹配
/user/foo /user/bar const User = { template: `User {{ $route.params.id }}`}const router = new VueRouter({ routes: [ { path: '/user/:id', component: User } ]原创 2018-01-15 09:33:44 · 1271 阅读 · 0 评论 -
vue开发:echart显示百分比
option = { title: { x: 'center', text: 'Age', subtext: 'Rainbow bar for Age', link: 'http://echarts.baidu.com/doc/example.html' }, tooltip: {原创 2018-01-15 13:53:10 · 3302 阅读 · 0 评论 -
vue开发:vue如何将小数转化为百分比
let number=this.buildData.testResult.auto_retest_number/this.buildData.testResult.auto_retest_number;let str=Number(number*100).toFixed(2);str+="%";this.testCoverages=str;原创 2018-01-16 11:07:15 · 15652 阅读 · 0 评论 -
vue开发:vue的get与post请求
一,get请求self.$http.get(self.COMMON_URL.URL_199+'/runSystem/getRunSystemByProductId',{params:{productId:productId}}).then();二,post请求let qs=require('qs');let params={ 'taskId':self.taskI原创 2018-01-17 11:09:14 · 3403 阅读 · 0 评论 -
vue开发:vue设置公共Api
const baseApi='http://10.4.5.198';const homeApi='http://10.4.5.198';export default {baseApi,homeApi}原创 2018-01-17 11:20:45 · 2680 阅读 · 0 评论 -
vue开发:vue实现百度搜索下拉提示功能
这段代码用到vuejs和vue-resouece。实现对接智能提示接口,并通过上下键选择提示项,按enter进行搜索DOCTYPE html>html lang="en">head> meta charset="UTF-8"> title>Documenttitle> script type="text/javascript" src="vue.js">script>原创 2017-07-12 10:01:49 · 2832 阅读 · 0 评论 -
vue开发:vue2.0父子组件及非父子组件之间的通信方法
1.父组件传递数据给子组件父组件数据如何传递给子组件呢?可以通过props属性来实现父组件:?12345678 <child :child-msg="msg">//这里必须要用 - 代替驼峰data(){ return原创 2017-07-12 09:39:14 · 810 阅读 · 0 评论 -
vue开发:生成token保存在客户端localStorage中
前面我们已经了解了可以通过localStorage在客户端(浏览器)保存数据。回顾token框架中的RESTful api快速领悟(中):token认证 框架中的RESTful api快速领悟(下):token的设置我们后端有这样一个接口:http://localhost/yiiserver/web/index.php/token?client_appid=aaa&原创 2017-05-18 16:08:13 · 38451 阅读 · 2 评论 -
vue开发:vue,angular,react数据双向绑定原理分析
传统做法前端维护状态,手动操作DOM更新视图。前端框架对服务器数据通过模版进行渲染。当用户产生了一个动作之后,我们通过document.getElementBy... 手动进行DOM更新。 框架帮忙分离数据和视图,后续状态更新需要手动操作DOM,因为框架只管首次渲染,不追踪状态监听变化。双向数据绑定当我们在前端开发中采用MV*的模式时,M - model,指的是模型,也就是原创 2017-06-01 21:55:17 · 10558 阅读 · 0 评论 -
vue开发:脚手架搭建的vue项目里引入jquery和bootstrap
引入jQuery:1.在cmd输入:npm install jquery,回车,等待..2.在webpack.base.conf.js里进行如下操作:3.在webpack.prod.conf.js里进行如下操作:4.在入口文件里引入:不知道是不是jquery版本的问题,在重构以前写的页面时,通过在.vue文件里引入js的方式将写好的j原创 2017-06-01 22:34:00 · 3196 阅读 · 0 评论 -
vue开发:vue中引入jquery
一、安装jQuery:npm install jquery --save-dev;二、找到项目根目录下webpack.config.js》 在module.exports》 plugins里面添加一下代码:new webpack.ProvidePlugin({ jQuery: "jquery", $: "jquery"}),三、在App.vue页面引入(放在scr原创 2017-06-01 22:39:33 · 1866 阅读 · 0 评论 -
vue开发:vue中computed 和 watch的异同
vue中computed 和 watch的异同!一、computed 和 watch 都可以观察页面的数据变化。当处理页面的数据变化时,我们有时候很容易滥用watch。 而通常更好的办法是使用computed属性,而不是命令是的watch回调。 这里我直接引用vue官网的例子来说明:html:我们要实现 第三个表单的值 是第一个和第二个的拼接,并且在前俩表单数值变化时,原创 2017-06-02 21:44:47 · 6521 阅读 · 0 评论 -
vue开发:vue全局组件的方法
在vue项目中,可以自定义组件像vue-resource一样使用Vue.use()方法来使用,具体实现方法:1、首先建一个自定义组件的文件夹,比如叫loading,里面有一个index.js,还有一个自定义组件loading.vue,在这个loading.vue里面就是这个组件的具体的内容,比如:template> div> loading...........原创 2017-06-02 21:48:34 · 7516 阅读 · 1 评论 -
vue开发:axios前后端数据处理
目前主流的 Vue 项目,都选择 axios 来完成 ajax 请求,而大型项目都会使用 Vuex 来管理数据。前言: 使用 cnpm 安装 axioscnpm install axios -S安装其他插件的时候,可以直接在 main.js 中引入并 Vue.use(),但是 axios 并不能 use,只能每个需要发送请求的组件中即时引入为原创 2017-06-02 21:52:07 · 8090 阅读 · 0 评论 -
vue开发:vue+axios实现登录拦截
一个项目学会前端实现登录拦截一个项目学会vue全家桶+axios实现登录、拦截、登出功能,以及利用axios的http拦截器拦截请求和响应。前言该项目是利用了Github 提供的personal token作为登录token,通过token访问你的Repository List。通过这个项目学习如何实现一个前端项目中所需要的登录及拦截、登出、token失效的拦截及对原创 2017-06-02 21:57:50 · 11456 阅读 · 3 评论 -
vue开发:前端数据绑定的原理
前端数据的双向绑定方法 前端的视图层和数据层有时需要实现双向绑定(two-way-binding),例如mvvm框架,数据驱动视图,视图状态机等,研究了几个目前主流的数据双向绑定框架,总结了下。目前实现数据双向绑定主要有以下三种。github演示例子1、手动绑定比较老的实现方式,有点像观察者编程模式,主要思路是通过在数据对象上定义get和set方法(当然还有其它方原创 2017-06-03 16:12:35 · 1763 阅读 · 0 评论 -
vue开发:Vue 非父子组件通信方法(非Vuex)
一提到两个非父子组件通信方法,有经验的 coder 肯定会说用 Vuex 啊,我个人建议不要为了用 Vuex 而用 Vuex,除非你的项目很大,耦合度很高,需要大量的储存一些 data,组件之间通信频繁。当然还是要根据自己的业务场景的来决定,总之还是那句话,不要为了用 Vuex 而用 Vuex!Vue 官网介绍了非父子组件通信方法:不过官网说的太简单了,新手看完估计还是原创 2017-07-12 09:20:50 · 888 阅读 · 0 评论 -
vue开发computed,watch,method执行的先后顺序
1#computed:计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。2#methods:methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法,或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。3#watch:是一种更通用的方式来观察和响应 Vue 实例上的数据变动。一个对象,...原创 2018-03-30 09:17:58 · 20977 阅读 · 2 评论