vue
潜行的Q
这个作者很懒,什么都没留下…
展开
-
vue开发环境解决跨域的几种方法
解决方案解决跨域的方法很多 后端有设置请求 前端有jquery的jsonp、script的请求转发等,出现跨域问题主要时因为浏览器的同源策略,所以只要在中间做个代理请求,就可以巧妙的避开跨域问题一,使用proxyTable属性 这里vue脚手架生成的标准项目为准。一般在项目config目录下面有个index文件。里面格式如下:'use strict'const path ...原创 2018-07-31 16:23:55 · 7832 阅读 · 1 评论 -
Vue基础知识之组件及组件之间的数据传递及prop和$refs在父传子时的区别
vue中的组件是自定的标签,可以扩展的原生html元素,封装可复用的代码note:1、在标签命中不要使用大写,标签名字必须用短横线隔开2、模板中只能有一个根元素,不能使用并列标签。定义组件全局定义,在所有实例中都可以使用这个组件<template id='hello'> <div> <div>hello&...原创 2018-10-08 17:39:29 · 1568 阅读 · 0 评论 -
vue+elementui实现分页效果
当我们向后台请求大量数据的时候,并要在页面展示出来,请求的数据可能上百条数据或者更多的时候,并不想在一个页面展示,这就需要使用分页功能来去完成了。1.本次所使用的是vue2.0+element-ui实现一个分页功能,element-ui这个组件特别丰富,分页中给我提供了一个Pagination 分页,使用Pagination 快速完成分页功能 最终效果展示 <div...原创 2018-10-19 11:52:14 · 7032 阅读 · 6 评论 -
vue中v-model在组件中的使用
案例一:使用自定义事件的表单输入组件demo: 父组件代码:<template> <div class="hello"> <button @click="ifShow=!ifShow">点击显示</button> <show-alert v-model="ifShow"&原创 2018-10-17 17:17:45 · 1105 阅读 · 0 评论 -
vue+elementUI+vue-i18n实现中英文切换。
安装: npm install vue-i18nvue.js+vue-i18n国际化在main.js同级建i18n文件夹,并里面建i18n.js、langs文件夹,langs文件夹下建en.js、cn.js目录如下:.├── App.vue├── assets│ └── logo.png├── components│ └── HelloWorld.vue├──...原创 2018-10-29 18:10:08 · 9704 阅读 · 3 评论 -
vue中slot的理解
Slot的通俗理解是“占坑”,在组件模板中占好了位置,当使用该组件标签时候,组件标签里面的内容就会自动填坑(替换组件模板中<slot>位置),当插槽也就是坑<slot name=”mySlot”>有命名时,组件标签中使用属性slot=”mySlot”的元素就会替换该对应位置内容;Slot使用1、组件中有单个或多个未命名slot标签时,如下:<Child&...原创 2018-10-31 13:56:04 · 711 阅读 · 0 评论 -
Vue中 watch 的高级用法
假设有如下代码:<div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type="text" v-model="firstName"></p></div>new Vue({ e转载 2018-10-31 15:28:26 · 6040 阅读 · 0 评论 -
vue中@click的事件修饰符
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在 methods 中轻松实现这点,但更好的方式是:methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。为了解决这个问题, Vue.js 为 v-on 提供了 事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。.stop...原创 2018-10-31 15:55:27 · 25273 阅读 · 1 评论 -
路由懒加载方式
当打包构建应用时,Javascript包会变得非常大,影响页面加载,路由懒加载可以在路由被访问的时候才加载对应的组件,这样就更加高效了。const Foo = resolve =>{ require.ensure(['./Foo.vue',() => { resolve(require('./Foo.vue')) }])} 这里还有另一种代码分块的语法,...原创 2018-11-01 17:11:49 · 1604 阅读 · 0 评论 -
vue.js的computed,filter,get,set,watcher的用法及区别
1、vue.js的computed方法:处理复杂逻辑,基于依赖缓存,当依赖发生改变时会重新取值。用methods也可以实现同样的效果,但methods在重新渲染的时候会重新调用执行,在性能上computed优于methods,当不需要缓存时可用methods。 实例1:computed和methods实现翻转字符串 <template> <div> ...原创 2018-10-08 17:38:24 · 468 阅读 · 0 评论 -
vue中style下scope的使用和坑
在vue组件中,为了使样式私有化(模块化),不对全局造成污染,可以在style标签上添加scoped属性以表示它的只属于当下的模块,这是一个非常好的举措,但是为什么要慎用呢?因为在我们需要修改公共组件(三方库或者项目定制的组件)的样式的时候,scoped往往会造成更多的困难,需要增加额外的复杂度。scoped实现私有化样式的原理为什么会说,会增加复杂度?那么我们先从的实现模块的原理说起。为...原创 2018-10-11 16:08:01 · 47435 阅读 · 8 评论 -
vuex的基本使用
一、mutation 在vue 中,只有mutation 才能改变state. mutation 类似事件,每一个mutation都有一个类型和一个处理函数,因为只有mutation 才能改变state, 所以处理函数自动会获得一个默认参数 state. 所谓的类型其实就是名字,action去commit 一个mutation, 它要指定去commit哪个mutation, 所以mut...原创 2018-08-01 09:57:30 · 144 阅读 · 0 评论 -
vue实现中英文切换
vue-i18n 仓库地址:https://github.com/kazupon/vue-i18n兼容性:支持 Vue.js 2.x 以上版本 安装方法:(此处只演示 npm)npm install vue-i18n 使用方法:1、在 main.js 中引入 vue-i18n (前提是要先引入 vue)import VueI18n from 'vue-i18n'...转载 2018-07-30 16:40:50 · 3709 阅读 · 0 评论 -
axios在项目中的的使用
axios 简介axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征:从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据 客户端支持防止 CSRF/XSRF引入方式: 1 ...原创 2018-08-17 13:14:39 · 1471 阅读 · 0 评论 -
mockjs在项目中的使用
现在的前端开发,更多的时前是前后端分离,这样可以大大的提高开发的效率和速度。但如果后端的api的实现迟迟没有完成,这样会严重的影响到前端人员的开发效率。这时mockjs就应运而生,mockjs使的前端在开发的过程中,可以先和后端人员约定好api 的格式和返回的数据内容格式。这样前端就可以根据标准通过mockjs模拟出自己需要的数据。实现完全的前后端分离。具体实现:一、先通过npm inst...原创 2018-08-17 15:24:52 · 4081 阅读 · 0 评论 -
Vue调试工具vue-devtools安装
手动安装第一步:找到vue-devtools的github项目,并将其clone到本地. vue-devtoolsgit clone https://github.com/vuejs/vue-devtools.git第二步:安装项目所需要的npm包npm install //如果太慢的话,可以安装一个cnpm, 然后命令换成 cnpm install第三步:编译项目文件...原创 2018-08-17 15:59:03 · 529 阅读 · 0 评论 -
vue2.0 $router和$route的区别
在vue2.0里页面参数是 this.$route.query或者 this.$route.params 接收router-link传的参数。在路由跳转的时候除了用router-link标签以外需要在script标签在事件里面跳转,所以有个方法就是在script标签里面写this.$router.push('要跳转的路径名'), 在写的时候发现这两个为什么不同,在控制台打出this的时候,...原创 2018-08-31 16:58:17 · 696 阅读 · 0 评论 -
Vue:router的beforeEach与afterEach钩子函数
在路由跳转的时候,我们需要一些权限判断或者其他操作。这个时候就需要使用路由的钩子函数。定义:路由钩子主要是给使用者在路由发生变化时进行一些特殊的处理而定义的函数。总体来讲vue里面提供了三大类钩子,两种函数1、全局钩子2、某个路由的钩子3、组件内钩子两种函数:1、Vue.beforeEach(function(to,form,next){}) /*在跳转之前执行*/2.V...原创 2018-08-31 17:27:40 · 599 阅读 · 0 评论 -
axios关于error的处理
第一种是axios发出请求后在then()中的第二个参数中处理error.apiPost(url, data) { return new Promise((resolve, reject) => { axios.post(url, data).then((response) => { res...原创 2018-09-04 14:36:31 · 19655 阅读 · 0 评论 -
对vue中的data进行数据初始化
this.$data是表示当前的改变后的this中的数据,而this.$options.data()是表示没有赋值前的this中的数据,表示 初始话的data.当在页面中要对data中的数据进行多组操作时,防止每组数据之间的影响,可以先对数据进行初始化后在进行赋值。一般可以使用Object.assign(this.$data, this.$options.data())来对data中的数据...原创 2018-12-03 14:23:57 · 27309 阅读 · 2 评论