Vue
文章平均质量分 84
jiuwanli666
敲代码,赚钱钱,选好股,钱生钱,发发发!
展开
-
axios封装一个具有请求/响应拦截的http请求
import axios from 'axios'import qs from 'qs'// 请求拦截axios.interceptors.request.use(config => { // 此处可以封装一些加载状态 return config}, error => { return Promise.reject(error)})// 响应拦截axios.interceptors.response.use(response => { return re.原创 2020-06-16 15:07:44 · 169 阅读 · 0 评论 -
vue代码开发技巧或者规范
1、v-for中使用:key在操作列表渲染时,把:key属性与v-for一起使用,可以使vue对组件状态进行跟踪。使用唯一的识别符,diff算法能更高效的更新DOM。2、v-for和v-if尽量避免在同一元素上使用在列表渲染时常遇到元素的筛选,这时就会自然而然的把v-for和v-if结合在一起进行使用。但是,在使用时会发现有时只需要一个或者几个元素的值,而要去遍历整个列表。这样就做了好...原创 2020-03-16 13:58:27 · 214 阅读 · 0 评论 -
数据更新问题
vue项目数据更新总结:路由固定时1、$nextTick:(异步更新队列)在数据修改之后立即执行,等待DOM更新。回调会延迟到DOM更新循环之后执行。// 表单值的修改this.$nextTick(() => { this.form.setFieldsValue({ company: '九万里', property: '6666668888888' })})// 和...原创 2020-03-10 16:44:42 · 224 阅读 · 0 评论 -
导航守卫
导航守卫?通过路由进行一些操作,向常见的登录权限校验。当用户满足条件是进入导航,否则取消登录,跳转到登录页面。温馨提示:当参数和查询的改变并不会触发进入、离开导航守卫。要想查看当前路由,通过this.$route对象来查看,或者使用组件内的守卫beforeRouteUpdate来查看路由。一、全局守卫1、route.beforeEach 全局前置守卫当导航触发时,全局前置守卫顺序调...原创 2020-03-10 14:32:38 · 182 阅读 · 0 评论 -
watch属性的使用
watch,是一个键值对,键是要要监测的表达式,可以是props元素也可以是data元素等,值可以是string, Function, Object, Array。他的作用就是监听表达式变化,并且根据变化进行相应的操作。简单使用:<template> <div>{{ text }}</div></template><script...原创 2020-03-10 11:44:57 · 1935 阅读 · 0 评论 -
vue-quill-editor富文本自定义上传图片到服务器
vue-quill-editor选择图片之后是以base64的形式在编辑器内进行展示的,在实际项目中如果图片资源过多或者资源过大,那么传递到服务端的html内容资源存储会过大。因此,可以将图片先传到服务器,编辑器内只是存储资源的路径。接下来将两者进行返回的html进行对比:接下来对编辑器内图片资源上传到服务器进行分析:1、安装依赖npm install vue-quill-edi...原创 2020-03-09 14:36:10 · 1740 阅读 · 3 评论 -
vue项目问题总结(vue-cli 3.0)
1、设置baseurl原创 2020-01-21 10:27:00 · 266 阅读 · 1 评论 -
019-Vuex状态管理
一、Vuex简介vue应用程序的状态管理模式。他采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。vuex包含部分ViewActionsMutationsState一句话总结上图:Vuex模块间可以共享状态。vue组件dispatch发送事件触发Actions,Actions可以进行异步请求,再去触发Mutations,Mutation...原创 2019-08-02 17:49:49 · 215 阅读 · 0 评论 -
018-Vue项目生成模拟数据
开发过程中,与后端未搭建好联调环境时,没有数据。此时前端无法进行测试,开发起来就比较头疼了。使用mockjs,拦截Ajax请求,并且随机生成和后端协商好的数据格式,这样即使服务端环境无法使用,前端也可以愉快的coding了。接下来聊聊它的使用方法吧:一、node环境1、在项目中初始化mock.jsnpm i mockjs2、创建mock数据文件// 引入Mock对象import...原创 2019-07-24 15:34:11 · 233 阅读 · 0 评论 -
017-vue项目config中index.js配置解析
1、build对象 对于 生产环境 的配置: index:配置打包后入口.html文件的名称以及文件夹名称 assetsRoot:配置打包后生成的文件名称和路径 assetsPublicPath:配置 打包后 .html 引用静态资源的路径,一般要设置成 "./" productionGzip:是否开发 gzip 压缩,以提升加载速度2、dev 对象下 对于 开发环境 的配置:po...原创 2019-07-18 17:35:22 · 606 阅读 · 0 评论 -
016、双向绑定实现
通过 Object.defineProperty 实现。自定义双向绑定:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head>&a原创 2018-11-14 15:55:57 · 210 阅读 · 0 评论 -
015、计算属性(computed)
一、计算属性设计的初衷是为了进行简单的运算,以此来减少模板中逻辑的维护。当模板中用到了运算逻辑,建议使用运算属性(computed来代替methods中的方法)。2、基本写法HTML:&lt;div&gt;{{this.num1}} + {{this.num2}} = {{endNum}}&lt;/div&gt;JS:data () { return { ...原创 2018-04-20 15:09:24 · 253 阅读 · 0 评论 -
013、跨域反向代理
1、修改配置文件(config-&gt;index.js)a、设置公共域名b、配置开发环境下的代理如下图所示:2、请求接口(本例使用axios)import axios from 'axios';Vue.prototype.$ajax = axios;// 此处的$ajax就是axiosthis.$ajax({ url: '/api/mobile/pro...原创 2018-04-13 15:49:57 · 198 阅读 · 0 评论 -
md5加密
安装npm install md5使用import md5 from 'md5';methods: { submit: function () { var params = { 'phone_no': that.name, 'password': md5(that.password) }...原创 2018-04-12 17:11:20 · 481 阅读 · 0 评论 -
012、组件注册
组件是什么组件,自定义元素。可以拓展HTML元素,封装重复可用的代码,提高代码复用率。 所有的vue组件实例都是vue的实例,因此他们拥有和页面相同的声明周期钩子函数一、全局注册1、编写组件:temA.vue&lt;template&gt; &lt;div&gt; 全局组件注册 &lt;/div&gt; &lt;/template&am原创 2018-04-12 11:48:51 · 133 阅读 · 0 评论 -
004、第一个vue项目(vue2.xx)
安装Node环境官网地址:http://nodejs.cn/download/全局安装webpacknpm install -g webpack 温馨提示:若npm下载慢,可以安装cnpm来加快速度。 npm install -g cnpm –registry=https://registry.npm.taobao.org安装脚手架npm install -g vue-...原创 2018-02-26 21:39:33 · 180 阅读 · 0 评论 -
007、ref属性使用
是什么ref被用来给元素或者组件注册引用信息。什么时间注册本身作为渲染结果创建的,初始渲染时不存在,实例挂载之后才会被创建。在哪里获取引用信息将会注册在父组件的$refs对象上。但是和v-for一起引用时,则引用信息会是一个包含DOM节点或者组件实例的数组。指向哪里1、若在普通的DOM上使用,引用的指向就是DOM元素; 2、若在子组件上,引用的就指向组件实...原创 2018-02-27 14:02:47 · 325 阅读 · 0 评论 -
001、vue特点
特点 a、响应式,可以实现数据和视图层的双向绑定。即逻辑层数据发生变化时,绑定在视图层的数据也会随之发生变化。 b、组件化、模块化。将大片代码拆解为若干个小的代码片段(模块),这样的代码重用性高、可读性强、更便于管理。 c、单个文件组件化,即将结构、样式、逻辑同一文件内。 (单文件组件请查看:http://blog.csdn.net/jiuwanli666/article...原创 2018-02-25 14:12:39 · 594 阅读 · 0 评论 -
003、单文件组件化
是什么单文件组件化就是将html、css、js存在于同一个文件内。实现原理Webpack + vue-loader和Browerify + vueify这样的打包工具可以将 .vue类型的文件解读为浏览器可以识别的文件。好处1、template标签、style标签的lang属性,可以定义标签内的文本类型。可以加载预处理器,如style的css、less、sass;tem...原创 2018-02-25 14:51:08 · 433 阅读 · 0 评论 -
002、vue文件目录解读
1、bulid:项目打包所需文件配置和生成打包文件存放位置。2、config:项目配置。 index.js:打包文件、生产环境的配置。包括端口等。3、node_modules:所有依赖文件包存放。4、src:生产环境下文件资源: a、assets:图片等资源 b、components:组件 c、router:全局路由的配置 d、App.vue: 项...原创 2018-02-25 15:23:35 · 170 阅读 · 0 评论 -
005、启动本地vue项目
在本地开启项目有两种情况:1、项目文件中没有依赖时: a、npm install初始化并安装依赖 b、npm run dev开启服务(此命令可以自行配置)2、根目录下已经依赖模块(即:node_modules) npm run dev运行项目温馨提示:若有报错,查看是否是模块缺失; 做代理时服务器是否是否写正确、服务是否开启。(服务器IP在con...原创 2018-02-25 16:57:07 · 2199 阅读 · 0 评论 -
008、插槽分发内容(slot)
一、内容分发1、是什么 一种过程,混合父组件内容和子组件模板的方式。 2、作用域 &nbsp;&nbsp;&nbsp;&nbsp;2.1、编译的数据应该绑定在父组件的数据中。 &nbsp;&nbsp;&nbsp;&nbsp;2.2、父组件的内容在父组件的作用域,子组件模板的内容在子组件作用域。 即:被分发的内容在父组件内编译。 &lt;childre原创 2018-03-30 11:41:27 · 261 阅读 · 0 评论 -
009、Class和Style绑定
把样式和class绑定在一起,有多重方法。使用v-bind绑定style和class时表达式可以是字符串、数组、对象。使用场景1、绑定内联样式:v-bind:style 2、动态绑定或者切换class:v-bind:class具体使用方法1、内联样式绑定:a、对象方式a1、HTML:&lt;div v-bind:style="{ fontSize: font...原创 2018-03-30 17:29:38 · 158 阅读 · 0 评论 -
011、路由(页面)跳转及参数获取
1、<router-link>声明式路由导航1.1、需要在路由中定义参数名称 (渲染结果:http://localhost:9999/A/6) a、路由定义 export default new Router({ mode: 'history', routes: [ { path: '/A/...原创 2018-04-09 19:54:59 · 1302 阅读 · 0 评论 -
010、路由配置
vue框架中页面路由的配置要用到vue-router这个官方插件。它的使用极大的方便了页面开发。本文就来聊聊vue页面路由的配置。1、创建文件项目目录如图所示:a、创建页面Hello、A;图片解读:1、&lt;router-link to="/A"&gt;去往A组件&lt;/router-link&gt; to的值为路由中注册的值详情参考官网:http...原创 2018-04-02 15:36:55 · 152 阅读 · 0 评论 -
014、axios请求封装---01
axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。1、封装文件(http.js)import axios from 'axios';import { Message } from 'element-ui';axios.defaults.timeout = 5000;axios.defaults.baseURL = 'https://...原创 2018-04-17 17:56:38 · 824 阅读 · 0 评论 -
006、Vue实例的生命周期钩子
生命周期函数beforeCreate:实例初始化之后; 2.created:实例创建之后执行,实例还未挂载时; 3.beforeMount: 实例挂载到DOM节点前; 4.mounted:el(挂载VUE实例的DOM节点)被创建的vm.$el替换之后调用; 5.beforeUpdate:数据更新时调用,发生虚拟DOM重新渲染和补丁之前; 6.updated:组件DOM更新之后调用...原创 2018-02-26 11:52:19 · 193 阅读 · 0 评论