![](https://img-blog.csdnimg.cn/20200701174635757.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue开发
文章平均质量分 59
vue
June.1
人生在世须尽欢!
展开
-
vue computed 和 vm.$data 原理
仔细阅读注解内容。会针对源码原理深度讲解 原文转载地址使用vuex中store中的数据,基本上离不开vue中一个常用的属性computed。官方一个最简单的例子如下var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // 计算属性的 getter reversedMessage: function () { // `this` 指向 vm 实例 .转载 2020-07-07 09:49:43 · 15245 阅读 · 0 评论 -
vuex 设计思路和实现
API概念的东西就不介绍了, 如果还不了解vuex 的应用, 可以去查看官方vuex文档 。下面着重讲解 vuex的原理以及实现vuex 设计思路vuex是使用插件机制开发的, vuex 中的 store 本质就是没有template的隐藏着的vue实例在beforeCreate 混入vuexInit ,vuexInit方法实现了store注入vue组件实例,并注册了vuex store的引用属性·$storevuex 设计思路源码function applyMixin (Vue) {.原创 2020-07-07 09:49:10 · 15444 阅读 · 1 评论 -
vue-router 原理及实现
路由模式hash:默认hash 模式, 使用 URL hash值来作路由history:依赖 HTML5 History API 和服务器配置abstract:支持所有 JavaScript 运行环境,如 Node.js 服务器端ips hash 和 history 中都会记录浏览历史,保存在浏览器的路由栈中模式分配/* other... */if (!inBrowser) { // 非浏览器模式 mode = 'abstract' } this.mode = mode // 通原创 2020-07-01 16:43:06 · 15827 阅读 · 1 评论 -
vue 任务队列和异步更新策略 (清晰理解任务队列、微任务、宏任务)
事件循环JavaScript 语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。为了协调事件、用户交互、脚本、UI 渲染和网络处理等行为,防止主线程的不阻塞,Event Loop 的方案应用而生。Event Loop 包含两类:一类是基于 Browsing Context,一种是基于 Worker。二者的运行是独立的,也就是说,每一个 JavaScript 运行的"线程环境"都有一个独立的 Event Loop,每一个 Web Worker 也有一个独立的 Event Loop。任务队列原创 2020-06-30 12:03:11 · 17052 阅读 · 2 评论 -
vue 样式穿透 尖括号3、/deep/ 、::v-deep 应用场景注意事项
官方文档地址,更多关于Scoped CSS的内容在很多vue的组件库 , 如vant,elementUI, iview等都可能自定义一些样式文件项目中用到了 elementui,如果使用预处理器 scss, sass,less , 修改样式可能修改不掉, 而且这种需求出现的频率非常高。但如果去掉scoped话又会影响全局样式。当然我们知道可以使用 样式穿透的方式操作那么究竟什么时候使用 >>> 什么时候使用 /deep/ 和 ::v-deep 实际操作中会有什么问题呢?1、>原创 2020-06-23 11:10:26 · 24168 阅读 · 0 评论 -
关于uni-app你需要小心的坑
作为vue语法开发的跨平台开发框架虽然愿望很美好,但是真的要实现跨平台还是需要开发者搭建好的项目架构,灵活运行vue语法和模块化开发思维。H5适配官方创新很好,又为我们创造了一个尺寸单位,upx,但是考虑到项目迁移和开发通用,我决定还是使用px配合flexible实现适配,确保项目可以轻松移植到uni框架,需要改动@dcloudio/vue-cli-plugin-uni/packages/postcss文件,在postcss.config.js文件中引入的,保证我们小写px自动转换rem,大写的不转换,转载 2020-05-26 14:14:09 · 20372 阅读 · 1 评论 -
前端项目工程化
工程化前端项目注意以下几点架构设计目录定义路由封装Axios封装错误拦截处理Loading封装表单封装表格封装分页封装Header、Footer组件封装菜单封装API封装公共机制公共样式NoData封装其实还有,可以根据不同项目需求做好模块封装。...原创 2019-03-27 12:49:19 · 341 阅读 · 0 评论 -
Vue全家桶学习 四、大型项目如何构建Vuex及实战应用
1.安装Vuexnpm 安装npm install vuex --saveyran 安装yarn add vuex原创 2019-03-18 11:12:17 · 867 阅读 · 0 评论 -
vue事件修饰符全解
.stop - 调用 event.stopPropagation() 阻止点击事件继续传播阻止了事件冒泡,如果不添加 .stop 点击 thisClick 的同时 parentClick 也会被点击 <div v-on:click="parentClick"> <p>父级</p> <button v-on:click...原创 2019-03-21 09:51:03 · 572 阅读 · 0 评论 -
Vue全家桶学习 二、Vue-Router的使用详解
1. vue-router安装如果在vue-cli 构建项目中没有安装vue-router ,可以由npm自行安装。安装命令 :npm install vue-router --save2. 模块化开发配置路由器引入路由模块和组件页面import VueRouter from ‘vue-router’import PageOne from ‘…/pages/page1/Page’...原创 2019-03-12 09:45:48 · 741 阅读 · 0 评论 -
vue三种常用获取input值写法
1. v-model 表单输入绑定使用v-model创建双向数据绑定, 用来监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。 <template> <div> <input class="login-input" type="text" v-model="username" placeholder="请输入账...原创 2019-03-20 15:02:38 · 108670 阅读 · 9 评论 -
vue中慎用style的scoped属性
" 在vue组件中,在style标签上添加scoped属性,以表示它的样式作用于当下的模块,很好的实现了样式私有化的目的,这是一个非常好的机制。但是为什么要慎用呢?在实际业务中我们往往会对公共组件样式做细微的调整,如果添加了scoped属性,那么样式将会变得不易修改。初写这篇文章时,本人没有找到一个好的方法去解决这个问题,后来经过大伙的解答,才让我恍然大悟。"何为谨慎使用谨慎使用不是不用...转载 2019-03-20 14:04:12 · 83940 阅读 · 16 评论 -
Vue中echarts图表实现loading效果实例
data() 初始化数据调用数据mounted() 周期函数内获取画布节点,并且调用加载loading和图表渲染computed计算属性内定义echarts渲染内容以及数据请求当服务器返回数据 hideLoading()注意:loading方法要定义在计算属性的get方法中,set可以不做任何定义。这样图表于loading样式在画布上不会冲突 <template> ...原创 2019-03-20 13:24:09 · 21199 阅读 · 0 评论 -
Vue全家桶学习 三、promise封装axios使用详解
1. 安装axiosnpm命令npm install axios --saveyarn命令yarn add axios2. axios Promise 封装个人案例 import axios from 'axios' export default class Axios { static ajax(options){ return new Pr...原创 2019-03-12 14:21:35 · 917 阅读 · 1 评论 -
使用Vue框架之前需要懂ECMAScript 6 那些知识?
1. 常用的es6特性。参数默认值:var link = function(height = 20, color = 'orange', url = 'http://baidu.com') { ... }模板对象:在字符串里面输出变量, 使用新的语法 $ {params},并把它放在反引号里 。并且 ` 为多行字符串允许换行使用var first=1;var last=1...原创 2019-04-30 15:54:35 · 3922 阅读 · 2 评论 -
npm 和 yarn 缓存清理
npm cache clean --forceyarn cache clea原创 2019-05-30 11:30:03 · 64717 阅读 · 1 评论 -
vue 项目资源文件 static 和 assets 不说区别直接使用?
assets中资源会webpack构建压缩到你代码中,而static文件直接引用。static 中长存放类包、插件等第三方的文件,assets里放属资源文件比如自己资源图片、css文件、js文件。...原创 2019-05-30 12:00:03 · 27381 阅读 · 3 评论 -
vue中更改 element-ui主题色
第一步打开“elementUI官网“点击“自定义主题“,找到“在线主题生成工具“第二步点击“在线主题生成工具“,会进到一个新的页面,点击“切换主题色“,点完之后,会出现一个弹出层,可以自己选择颜色,也可以自己输入自己的主题色,选择好之后,点击“确定“,最后记得点击“切换“,你就会看见主题色已经已经切换了。例如我设置的主题色是“#4FCC19“。第三步点击“下载主题“。下载到你...原创 2019-05-30 14:21:18 · 23567 阅读 · 1 评论 -
Vue图片在为动态变量路径显示不出来怎么办 ,但是通过img标签显示正常 这是为什么?
案例例如:如何动态显示图片, 直接这样定义是不可以的。 这样只是把属性src赋值不能请求资源<template> <img :src="img" width="100%" height="100%" alt=""></template><script> export default { name: "test",...原创 2019-06-05 14:45:32 · 18424 阅读 · 8 评论 -
vue使用scss,并且全局引入公共scss样式
要如何在我们的vue项目中全局引入scss文件呢?main.js可以直接import css文件,而不可以直接import scss文件。在index.html中link引入的话,不起作用。公共样式可以写在app.vue这个父组件的style标签中,这样我们写的子组件就能继承这些公共样式,但是!!!我们自定义的scss的变量继承不了!!如果我们想使用公共的scss样式变量(...转载 2019-06-12 16:29:49 · 25604 阅读 · 3 评论 -
vue中如何使用sass插件
安装yarn add node-sass sass-loader配置在webpack.base.conf.js文件中修改module ->rules添加{ test: /\.scss$/, loaders: ['style', 'css', 'sass']}示例:module: { rules: [ { test: /\.vue$/...原创 2019-06-03 16:38:35 · 13898 阅读 · 1 评论 -
内网项目:vue + 百度离线地图 apiv2.0
制作离线地图的步骤:1、用Visual Studio打开项目目录,编译2、将html整个目录复制到BaiduMapTile\bin\Debug下,目录变为:BaiduMapTile\bin\Debug\html3、运行项目,下载瓦片地图,默认会在BaiduMapTile\bin\Debug下创建maptile目录,瓦片地图就保存在这个目录中4、将瓦片地图所在的目录maptile移到Baid...原创 2019-09-05 14:08:46 · 21049 阅读 · 9 评论 -
vue使用百度地图插件vue-baidu-map不显示地图? 可能你要注意以下几点!
官方文档地址官方的话就不多说了, 这里面使用npm、yarn包管理工具自行下载这里注意百度地图开发者平台申请的密钥ak不要错误, 要用浏览器ak 详见百度开发者开放平台import Vue from 'vue'import BaiduMap from 'vue-baidu-map'Vue.use(BaiduMap, { ak: 'YOUR_APP_KEY'})...原创 2019-07-02 14:08:38 · 14938 阅读 · 15 评论 -
Vue全家桶学习 一、vue项目环境搭建(vue-cli4.4)
Vue项目环境搭建安装node.js、npm(npm集成在node.js,所以在安装Node.js的时候就已经自带了npm 注:.node -v 稳定版本4.4.5以上)这里不过多讲解了网上资料太多了,直接上链接 http://www.runoob.com/nodejs/nodejs-install-setup.html脚手架搭建 Vue 工程目录 运行命令:npm install -g...原创 2019-03-11 11:14:48 · 15867 阅读 · 0 评论