vuejs
关注
分享
扫一扫
文章平均质量分 57
三金de鑫
前端开发攻城狮，AI 探索者，公众号[三金得鑫]
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
Vuejs 中常用的工具函数
isUndef判断参数是否是 undefined 或者是 nullfunction isUndef (v) { return v === undefined || v === null}isDef判断参数已定义且不为空function isDef (v) { return v !== undefined && v !== null}isTrue判断参数是否为 truefunction isTrue(v) { return.原创 2021-05-07 23:09:36 · 761 阅读 · 2 评论 -
Vue BUS总线
Vue Bus 总线作用：在vue中实现非父子组件之间通信。场景：bus适合小项目、数据被更少组件使用，或者数据量少的项目。本质：实际上是一个发布订阅者模式的使用，利用 vue 的自定义事件机制，在触发时通过 $emit 向外发布一个事件，而在需要使用的页面，通过 $on 监听事件或者说是注册事件。是一个不具备DOM的组件。它就像是所有组件共用相同的事件中心，用它来作为沟通桥梁，可以向该中心注册发送事件或接收事件。实现：使用一个空的 Vue 实例(bus.js)作为中央事件总线。// bus原创 2020-12-22 10:27:44 · 3695 阅读 · 0 评论 -
sass 配置全局变量
场景：在前端工程中，我们会经常用到css预编译，有sass，less，styuls等，拿sass来说，通常我们会在项目里建一个variables.scss文件，里面会定义一些公共的样式，可以是单纯的变量，也可以是mixin混入，类似于函数。$activeColor: #043156;$defaultColor: #3f3f3f;/* flex布局 */@mixin flex($justify:space-between, $align: center, $wrap: nowrap) { dis原创 2020-11-10 09:13:33 · 6411 阅读 · 1 评论 -
在vue中二级页面返回一级页面
场景：在vue后台管理端项目，需要实现从列表页面跳到详情页面，再从详情页面返回到列表时，列表页面保持跳转之前的状态。方案一：keep-alive实践证明，效果是实现了，但是带来了其他问题，会将其他页面的状态都缓存住，而我们只是想要缓存一级列表页面的。所以这方案 pass。方案二：mixins和vuex想法是写一个全局的方法，通过 mixins 混入，在需要的页面引进来，这样的话，就可以灵活实现该场景。当然，这里会把列表页面状态存到 vuex 里，在mixins中去调用缓存的状态。具体实现：//原创 2020-11-09 09:00:53 · 1659 阅读 · 0 评论 -
this dependency was not found
在新版的vue-cli中已经帮我们把sass-loader配置好了，放在了util.js里面，之前我们还需要去在webpack.base.config.js中去配置相关的设置，现在只需要安装相应的loader即可。如果还在webpack.base.config.js中去配置，只会重复配置sass-loader，从而导致报错：this dependency was not found...原创 2020-07-03 09:26:53 · 612 阅读 · 0 评论 -
Module build failed: TypeError: this.getResolve is not a function
这是因为当前sass的版本太高，webpack编译时出现了错误，这个时候只需要换成低版本的就行.卸载当前版本，并安装低版本的 sass-loader 即可。原创 2020-07-02 09:20:31 · 252 阅读 · 0 评论 -
Vue-router 里 import 动态导入模块报错
router 里 import 报错import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)export default new Router({ routes: [ { path: '/', name: 'layout', component: () => import('@/layout/Index') } ]})如果没有安装babel-plu原创 2020-06-29 09:18:28 · 4575 阅读 · 0 评论 -
用原生js监听vue里调用的bootstrap模态框
因为是MVC的项目，所以虽然用了vue，但不是我们平常写的SPA，而是在页面中去单独引用。那么当我们在vue中去调用bootstrap中的模态框时，怎么去监听模态框的显示和隐藏呢？首先，对于bootstrap中的模态框显示隐藏的监听，bootstrap本身是有一套方法的。事件类型描述show.bs.modalshow方法调用之后立即触发该方法。如果是通过点击某个作为触发...原创 2020-01-20 17:39:28 · 1316 阅读 · 0 评论 -
Vuex学习笔记（四）——getters
Vuex中的getter，可以认为是store的计算属性。就跟计算属性一样，getter的返回值会根据它的依赖被缓存起来，且只有当它的以来至发生了改变才会被重新计算。我们来看一个例子：// 先创建一个storeconst store = new Vuex.Store({ state: { todos: [ { id: 1, text: '......原创 2020-01-17 13:51:00 · 304 阅读 · 0 评论 -
Vuex笔记（三）——state
在Vuex中，我们会发现所有的状态都包含在了一个对象state中。即Vuex使用单一状态树。那我们在Vue组件中获取和展示状态的方法，在上一个笔记里已经有写过：// 在vue实例中引入storeconst vm = new Vue({ el: "#app", // 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件 store, /...原创 2020-01-15 11:50:37 · 556 阅读 · 2 评论 -
vuex笔记（一）——什么是vuex？
Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态。项目中，它相当于一个中央管理仓库，来存储一些页面共用的数据或状态，主要包含以下几个部分：state，驱动应用的数据源——也就是你初始化定义公共数据状态的部分；Vue Components，以声明方式将state映射到视图——也就是把需要的数据从仓库中取出来并渲染到页面上；actions，...原创 2020-01-15 11:49:24 · 237 阅读 · 0 评论 -
Vuex笔记（二）——store
Vuex的核心就是store(仓库)。里面包含着项目中共用的数据状态。我们可以来看一个简单的例子：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ...原创 2020-01-14 10:39:34 · 208 阅读 · 0 评论 -
vue笔记（二）：vue的核心思想之数据驱动
vue.js的核心思想包括：数据驱动和组件化思想。什么是数据驱动？什么是事件驱动？1.事件驱动所谓的事件驱动简单来说就是用户通过点击，修改，删除，输入等等，来操作DOM，并触发对应的事件，然后通过后台响应处理，随之更新UI。2.数据驱动，更直白来说就是不操作DOM，用数据来渲染，通过虚拟的抽象数据层来直接更新页面。当数据发生变化的时候，用户界面发生相应的变化，开发者不需要手动的去修改d...原创 2019-10-20 22:32:02 · 911 阅读 · 0 评论 -
vue笔记（一）：什么是vue
vue是一套用于构建用户界面的渐进式框架。什么是渐进式框架？所谓的渐进式框架就是：主张最少。具体可以看看知乎上的文章《Vue2.0 中，“渐进式框架”和“自底向上增量开发的设计”这两个概念是什么？》下面是摘抄的部分观点，以供参考：“在我看来，渐进式代表的含义是：主张最少。每个框架都不可避免会有自己的一些特点，从而会对使用者有一定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影...原创 2019-10-20 22:30:38 · 209 阅读 · 0 评论 -
如何使用vue-cli快速搭建项目
vue-cli是vue中一个强大的构建工具，大大降低了webpack的使用难度，支持热更新。使用vue-cli使你快速的搭建项目。首先，你得要先安装vue-cli，那么在安装之前你得先确认一下你的电脑有没有node.js（如果没有，那么请先安装node）,有了node以后直接在命令行进行操作：全局安装：npm install -g vue-cli安装完成之后输入：vue -V查看版...原创 2018-08-30 00:27:39 · 300 阅读 · 0 评论 -
安装vue-cli时出现4058错误
今天在安装vue脚手架的时候出现了4058的报错；npm ERR! errno -4058那么这到底是哪里出错了呢？查了一下，貌似是已经安装过脚手架以后，又想重新安装到其他目录时会报这样的错误。解决办法也很简单粗暴，可以直接找到C:\Users\Administrator\AppData\Roaming\npm\node_modules下的vue-cli，即删除本机全局安装的no...原创 2018-09-02 14:19:54 · 2340 阅读 · 0 评论 -
vue 轮播图插件vue-awesome-swiper
在做vue项目时，咱们会经常遇到轮播图效果，那么这给大家介绍一个好用的轮播图插件vue-awesome-swiper，首先在github中搜索vue-awesome-swiper，然后根据里面的文档去进行下载安装：git install vue-awesome-swiper --save但是这里咱们需要去定义版本号，因为最新的版本会有一些小的Bug，所以这里咱们使用的是2.6.7的版本。g...原创 2019-03-26 13:15:59 · 237 阅读 · 0 评论 -
在vue中如何使用自己写的js
在做弹框部分时，要用到一个拖拽的效果，搜了好久的插件，但是感觉没有很符合我需要的那种，所以就把之前写的js拖拽拿了过来，放到vue里。那具体操作时怎样的呢？咱们一起来看一下：1.首先在assets/js里新建一个drag.js2.将拖拽的js拷贝到里面，并export default出去。export default function drag (id) { // 代码内容}...原创 2019-04-27 16:46:46 · 15358 阅读 · 3 评论 -
vue项目在IE11下空白
今天遇到了vue项目在IE11下显示空白的地方，第一个反应是兼容性，然后仔细检查了一下项目，然后发现没有去安装babel-polyfill，所以就第一时间去安装：npm install babel-polyfill -D然后在main.js里引入（一般放在首行）：import 'babel-polyfill'然后在webpack.config.base.js里：entry: { a...原创 2019-06-14 00:58:00 · 4053 阅读 · 0 评论 -
vue里router-link在IE里的兼容
还是IE的兼容，在IE浏览器中，router-link的跳转是失效的，主要是因为当url的hash变化的时候，浏览器没有做出相应的反应。这时候需要当浏览器是IE的时候手动给url加一个hashChange事件了。有两个解决方法。第一个，直接在渲染的时候去执行一个兼容浏览器的方法：new Vue({ el: '#app', router, store, template: '&...转载 2019-07-08 10:18:31 · 1946 阅读 · 0 评论 -
vue局域网访问
在vue中要让局域网内都能访问到你起的服务，需要去config目录下的index.js文件中去修改：module.exports = { dev: { assetsSubDirectory: 'static', assetsPulicPath: '/', proxyTable: {}, // 修改host host: '0.0.0.0', port: 8080, a...转载 2019-07-29 10:08:15 · 222 阅读 · 0 评论 -
vue中动态渲染组件的方法
在项目中，我们会经常遇到动态加载不同组件（内容）的场景，也就是想通过一个页面，根据不同的参数或者条件，来加载不同的内容。那在vue里，给大家提供了一个很简单的方法，使用component组件来实现以上功能：<component :is="变量"></component><scrpit> export default { components: { ...原创 2019-08-03 16:40:24 · 14110 阅读 · 0 评论 -
vue中如何解决跨域？
一，跨域问题是如何产生的？跨域产生的原因是出于安全考虑，浏览器会对不同源的地址做一些限制。而做限制的原因就是为了保证用户信息的安全，防止别的网站恶意窃取数据。也因而引出了同源策略（三同：同协议，同域名，同端口）。当任意一个不同，就会产生跨域。二，跨域的问题如何解决？1.后端解决2.前端解决3.通过jsonp跨域4.vue设置反向代理5.常见的跨域方法（https://segment...原创 2019-08-17 11:01:39 · 987 阅读 · 0 评论 -
修改本地hosts
咱们将本地hosts修改之后，可以避免域名的重复，那怎么修改呢？首先找到hosts文件：C:\Windows\System32\drivers\etc然后使用记事本打开hosts文件：<IP> <对应地址>// 如127.0.0.1 test.baidu.cn然后将vue中的config下的index.js中的host改为这个地...原创 2019-08-17 12:34:45 · 390 阅读 · 2 评论 -
vue-cli@3.0版本
3.0版本区别于之前的2.0做了很大的调整，之前的2.0在下载安装时是这样的：npm install -g vue-cli那么现在的3.0是这样的：npm install -g @vue/cli其次，快速创建项目的命令也是不一样的，2.0：vue init webpack map// 详见https://blog.youkuaiyun.com/qq_42345237/article/detai...原创 2019-09-04 23:46:29 · 183 阅读 · 0 评论 -
$router.push，只是路由参数改变，页面无反应的解决方法
这里咱们需要监听路由的变化，从而实现数据的重新加载。首先，把数据加载单独提出来，在created的时候执行这个方法，然后监听路由的变化：watch: { '$router' (to, from) { // 监听路由参数变化，重新加载数据 this.getInit(); }}...原创 2019-09-08 22:28:15 · 3827 阅读 · 0 评论 -
vue如何实现双向数据绑定？
vue中实现数据绑定的一个重要点：Object.defineProperty()函数<input type="text" id="a" /><span id="b"></span><script> var obj = {} Object.defineProperty(obj, 'test', { // 不需要监...原创 2019-10-04 11:51:47 · 232 阅读 · 0 评论 -
vue.js下载及安装的三种方法
vue.js下载及安装的三种方法要下载安装vue首先得下载安装node.js和npm。下载安装好这两样以后就可以安装vue了，下面给大家介绍三种安装vue的方法。1.直接在官网上下载在官网上下载vue.js。并用<script>标签引入。注意：下载时网址是https://vuejs.org/v2/guide/installation.html。而不是https://cn.vuejs.o...原创 2018-07-02 19:09:01 · 147121 阅读 · 6 评论