vue
关注
分享
扫一扫
edisonMamba
github: www.github.com/mamba666
展开
-
自定义指令的学习
说来惭愧，vue的项目都做出来了一个，居然今天才知道自定义指令。呜呜呜。但是自我感觉也没有很大必要，毕竟现在JS是万能的哈哈哈哈两种定义方式全局// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.f...原创 2020-03-08 13:07:02 · 195 阅读 · 0 评论 -
v-show与v-if的困惑
有一个小demo，就是点击父组件然后控制子组件的显示。但是发现用v-if和v-show都可以实现。那么这两玩意区别在哪儿呢？机智如我，打开控制台发现了一点端倪先看v-show。看不懂？h1使用了v-html引入了msg1模板，所以能显示span。那么style哪儿来的？想都不用想，是v-show创造的。那么逻辑是什么呢？就是通过控制display来控制显示与否<h1 data-v-...原创 2020-03-06 11:47:30 · 263 阅读 · 1 评论 -
对模板字符串语法的深入理解（基于vue2.6 cli4）
昨天在B站看完了一点vue的基础。今天在重新复习一下关于props的传递首先来看一下HelloWorld组件。 <!-- 这里的msg是通过父组件Home传递过来的 --> <h1>{{ msg }}</h1>那么，这个msg是从哪儿来的呢？别急往下看 props: { msg: String },看到props就...原创 2020-03-06 11:13:50 · 269 阅读 · 1 评论 -
props遇到的一些问题
今天重学vue基础时，突发奇想在props上使用了自己瞎定义的一个单词，刚好就有一个大写字母：itemAtr==>itemAttribute然后呢就一直报错：提示无法读取data中定义的数据。后来将A改写为a就正常了！ Vue.component('todoItem', { props: ['itematr'], ...原创 2020-02-23 17:17:16 · 198 阅读 · 0 评论 -
computed VS watch
computed是计算属性，什么意思呢？就好比通过两个值计算出来第三个值，并且这第三个值不需要提前声明。不理解？等下上代码就懂了watch是侦听属性，什么意思呢?还是跟上面一样，现在需要计算第三个值，但是呢，它需要先提前声明，然后让它去等于另外两个值的结果。不理解？等下上代码就懂了好好体会 ...原创 2020-02-23 19:58:50 · 166 阅读 · 1 评论 -
使用 @vue/cli 初始化一个Vue项目
现在一起来学习如何初始化一个Vue项目1.现在一般都会同步到github。所以首先在github新建一个仓库2.然后将线上的仓库clone至本地。最好选择ssh3.进给希望保存代码的路径，然后git bash here。4.执行命令：git clone "复制的ssh地址"5.安装脚手架工具npm install -g cnpm --registry=https:/...原创 2020-02-25 15:40:43 · 156 阅读 · 0 评论 -
vue中修改别名（alias）
这里踩了很大的坑，记录下来。因为使用的是最新的脚手架工具 @vue/cli ，它不会生成任何webpack文件，所以需要手动创建。 根据官方文档 ：需要创建vue.config.js还有一个坑，就是没有安装 path ，导致无法解析路径下面上代码就懂了const path = require('path');function resolve(dir) {...原创 2020-02-25 20:23:22 · 8346 阅读 · 1 评论 -
如何在一个组件中修改另一个组件的样式
其实可以直接修改，但是现在vue的style都会加上scoped，是为了防止样式污染。这样也就带来了其他的不便，比如今天要解决的这个问题。使用穿透符号 >>>。表示让 .wrapper 下面的所有 .swiper-pagination-bullet-active 都加上样式。这样就可以不受scoped的限制 .wrapper >>>...原创 2020-02-26 10:51:14 · 1253 阅读 · 0 评论 -
使用axios跨域（错误！！！）
由于教程用的 vue-cli 2，但是现在使用 4 版本了。已经不能按着教程搞了。当然了，实际上教程对我也只是学习一下css布局和基础的东西，虽然css写的很烂接下来就来看一下，在@vue/cli中如何处理跨域先看远古时期的版本： webpack从proxyTable开始接下来就是现在的，弄了接近一个钟，操！当然了，还得引入mockconst moc...原创 2020-02-26 22:09:18 · 198 阅读 · 0 评论 -
使用axios解决跨域、显示mooc数据（正确版）
天杀的 vue cli 4 。一晚上就弄这个了~~~~。之前的错误版该说的都说了，这次直接贴正确代码。不过有几点要先说。1.首先，不懂的一定要先看vue.config.js配置的官网：https://cli.vuejs.org/zh/config/#devserver-proxy2.之前在vue cli 2中，显示mooc和打印mooc都是在vue组件中写的，但是现在是直...原创 2020-02-26 23:16:00 · 225 阅读 · 0 评论 -
父子组件之间的传值
解决了axios第一座大山，就来到了第二座，可预见的是第三座应该是vuex。废话不多说，直奔主题。首先，假设一个场景。有一个mooc数据文件，然后有一个父组件，父组件有若干个子组件，每一个子组件都需要到mooc提取数据。问题来了，如果让每一个子组件去获取，假设有10个子组件，那么就需要发送10个axios请求，这对性能是不好的。所以现在只让父组件去获取，这样就可以只发一个请...原创 2020-02-27 11:05:34 · 440 阅读 · 0 评论 -
配置路由
现在已经写完了第一个大页面，所以得创建第二个。然后有一个需求，就是点击第一个页面的某个地方，然后实现跳转，可以到新创建的页面去。这段代码的重点在 <router-link to="/city"> 意思是点击之后，会被跳转到 "/city" 路径下。 通过查看DOM，实际上这里被转换成为了一个a标签。并且a标签还自带了两个默认属性，其中一个就是color，会将字...原创 2020-02-27 12:10:53 · 110 阅读 · 0 评论 -
简单的使用ref
今天使用一个插件 better-scroll 。但是文档里使用方法如下：import BScroll from 'better-scroll'const wrapper = document.querySelector('.wrapper')const scroll = new BScroll(wrapper)可以看到需要获取这个dom元素，然后还要去使用它。那么问...原创 2020-02-27 17:03:50 · 153 阅读 · 1 评论 -
数据为对象的v-for的使用
之前 v-for 都是对数组使用，这次遇到了对象。这有很大的不同。废话不多说，上代码就懂了key就是对象的属性名，又因为属性名是不能重复的，所以使用key直接座键值即可<template> <div> <ul class="list"> <li class="item" v-for="...原创 2020-02-27 19:20:19 · 681 阅读 · 0 评论 -
全局事件的解绑
如果不进行解绑，那么就会在所有页面生效这个事件。因为他是绑定在window对象上的，所以相当于全局事件原创 2020-03-02 09:25:32 · 233 阅读 · 0 评论 -
vue跳转页面
vue有两种方法跳转页面使用router-link <router-link to="/detail"> <li class="item" v-for="item of recommendList" :key="item.id"> <img :src=...原创 2020-03-01 19:16:09 · 359 阅读 · 0 评论 -
打包上线过程
使用@vue/cli自带的ui。打包完成后会在目录下生成一个dist文件夹，然后将dist文件移到服务器根目录即可，如果需要放在根目录下的一个文件夹里，则需要到vue.config.js中去修改assetsPublicPath即可 ...原创 2020-03-02 15:20:29 · 237 阅读 · 0 评论 -
异步组件实现按需加载
为什么要有这个东西呢，道理很简单，因为vue时单页应用，这回导致一个问题，就是第一次加载时会变得很慢，因为它在第一次加载时九八所有的页面就加载完了假设有5个页面，那么第一就要加载5个页面，但是如果只想看第一个页面，那么其他4个页面时没有必要加载的，这样会浪费导致体验不行，影响性能。所以，引入了按需加载，即访问那儿一个页面就加载哪儿一个但是要注意，只有当j...原创 2020-03-02 15:39:56 · 349 阅读 · 0 评论 -
mapState的使用
如果要获取store里面的state的city属性。首先来看看没有使用mapState的情况,{{this.$store.state.city}}再来看看使用mapState后{{this.city}}那么为什么会这样呢？先来看看官方的定义：当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapSta...原创 2020-03-01 15:58:58 · 2944 阅读 · 0 评论 -
递归组件的使用
假设有这样一个数据,可以发现是一个嵌套的数据关系，在id为0的数据中还包含了二级数据，如果要使用的话就可以使用递归组件。在此之前，我都以为组件的名字只是用来在父组件中使用的，但是还有一个大用处，就是自身去调用自身！牛逼了但是有一点很奇怪，组件使用了DetailList的名子，但是在使用自己使用自己是总是报错该组件未被注册，后来就换了一个组件名，改成了li...原创 2020-03-02 11:52:49 · 303 阅读 · 0 评论 -
vue-router看这一篇就够了
vue-router是vue的核心插件之一，要好好理解牢记前端路由的概念路由其实分两种，一种前端路由，一种是后端路由。先谈谈后端，在我做的koa2中，没有使用任何前端框架，只是用了ejs模板。所有的页面跳转都是后端完成的，这就带来一个问题，频繁的后端渲染实际对性能有损害。所以前端路由就出现了，在vue中，页面的跳转都是又前端完成的，后端只在第一页面刷新时使用。所以后端路由的本质就是浏览器...原创 2020-03-05 19:06:52 · 357 阅读 · 0 评论 -
axios的学习
在vue中调用接口时会使用axios，并且这也是vue官方推荐的。axios的简单使用axios.get("api/index.json") .then(res=>{ //这里的data时固定的，用来获取后端响应的数据 //res返回的是一个对象，而真实的数据都在data属性里 console.log(res.data) })看了在代码中如何应用后，再看看官...原创 2020-03-04 20:25:55 · 169 阅读 · 0 评论 -
fetch的学习
fetch和ajax很像，但是推荐使用fetch去代替ajax。简单的使用可以发现，fetch调用接口使用的是promise。有一点需要注意，text()是fetch的一个api，返回一个promise对象，所以才能在后面继续thenfetch("api/index.json").then(data=>data.text()).then(ret=>console.log(re...原创 2020-03-04 18:23:29 · 173 阅读 · 0 评论 -
vue之数组更新检测
首先得明白，JS操作数组有一些是改变原数组的，有一些则是生成一个新数组。那么vue又是响应式的，所以就会想是不是操作数组就可以改变视图。以下参考官方文档数组更新检测变异方法顾名思义，变异的单词为mutation，也有改变之意，即会修改原数组，但不会返回新的。有以下方法push()pop()shift()unshift()splice()sort()reverse()...原创 2020-03-04 16:56:19 · 427 阅读 · 0 评论 -
使用vue过滤器
首先得知道过滤器是干嘛用的。比如说自来水从水厂到家，肯定是经过了多重的过滤才能被使用。那么vue过滤器也是如此。用一张图来生动表示一下过滤器的使用方法<!-- 在双花括号中 -->{{ message | capitalize }}<!-- 在 `v-bind` 中 --><div v-bind:id="rawId | formatId">&...原创 2020-03-04 11:51:29 · 218 阅读 · 1 评论 -
三七互娱笔试题
明天下午就要参加三七互娱的前端笔试了，但是心里没底，没有做过题，所以今天恶补一下。一下题目均为三七互娱前端题一、用js写出一个冒泡排序算法。看到这个题我是懵的，因为冒泡排序我已经忘了具体是啥了。知识点：冒泡排序算法首先解释一下冒泡排序算法：好比有一个水缸，现在有 N 个水泡在里面，并且杂乱无章的竖直排列。然后因为自然规律，水泡大的会先浮出来。所以算法来了，就是从水缸底部开始依...原创 2020-03-04 10:23:09 · 5144 阅读 · 1 评论