moon_tang的博客

转载 js中三种弹窗的简单使用alert、confirm、prompt

原创 vue 使用定时器setInterval，且解决不起作用

在网上看到一篇Vue中使用定时器setInterval和setTimeou讲解得很好，但是放在自己代码中却不能实现定时器的作用，后来了解到是因为vue中要用箭头函数才能使setInterval起作用解决方案 this.timer = setInterval(this.get, 1000); 修改为 var _this = this; //注意，要有，因为有箭头函数所以this作用域...

原创 vue 纯css环形加载Loading

动态的，可以转。其实就是一张动态图片<div v-if="isOk" class="loading"></div>.loading{ margin: 40px auto; display: block; width: 65px; height: 65px; border: 1px solid #ddd; border-...

原创 vue 路由传参

由OrderDetail页面跳转到OrderPayment页面，且传两个参数orderNo和qrPathOrderPayment获取参数

原创 用watch监听this.$store数据的变化

如监听this.$store.state.username的值，在watch对象中写watch: { '$store.state.username': function () { //你需要执行的代码 } },

原创 两个平级div顶部不对齐

问题div宽高一样就是里面内容有所不同，有些div顶端不对齐，如图解决给每个div设置属性vertical-align:top;

原创 There are multiple modules with names that only differ in casing.

问题在 npm run dev 后，控制台出现警告，没有出现链接，但是在浏览器上直接输入地址http://localhost:8080/#/ 又可显示界面There are multiple modules with names that only differ in casing.This can lead to unexpected behavior when compiling on...

原创 vue项目中自定义toast弹框

直接引用别人封装的 vue toast组件，地址http://www.jq22.com/jquery-info10876 直接进去看演示效果以及下载代码 （声明：如有不妥请联系可删）接下来我就操作怎样下载下来的文件让他在vue项目中运行起来1、将toast文件放在 src 目录下2、 自定义toast.js文件export function Toast(msg, type) { ...

原创 报错 Uncaught (in promise) TypeError: Cannot read property 'id' of undefined

//出错的代码块formatTableData(data){ for (var i = 0; i <=data.length; i++) { var obj = new Object(); obj.id = data[i].id; obj.name = data[i].name; obj.price = data...

原创 github新建仓库 + 初始化vue项目

在GitHub上新建一个仓库，并且将它拉取到本地，本地文件中放vue项目。以后项目每次修改直接从Vscode上推更新到GitHub。1、GitHub上新建仓库2、克隆到本地git bash herecd test （进入test）vue init webpack (初始化vue项目）完成-----------...

原创 vscode统计项目代码总行数

edit -> find in files输入正则表达式 b*[:b#/]+.*$ ，图中10331就是代码行数

原创 vue中当内容超出一定长度以……代替

转载 button被点击后的蓝框 css button 的四种状态

1.普通状态2，鼠标hover状态 3.active 点击状态 4.focus 取得焦点状态focus 经常用来取消a链接点击后产生的虚线边框a:focus{outline: none;} <style type="text/css"> .btn { color: white; background-col...

原创 slot 插槽子组件向父组件传值

slot 插槽要实现子组件向父组件传值，则需要运用 作用域插槽1、父组件中用 标签加上 slot-scoped 的属性，属性值随性。（旧版本是scope,vue新版本必须用slot-scope)2、子组件中给 加上一个自定义属性，在父组件中的slot-scope就能接收这个自定义属性的值//父组件<template slot-scope="props" slot="append-o...

转载 不能在slot上绑定和触发事件

在 slot 上进行事件的监听和分发，这是不可能的。组件的 slot 由调用它的父组件提供，这意味着所有事件都应该与父组件相关联。尝试去倾听这些变化意味着你的父子组件是紧密耦合的，可以使用 $parent 来操作。<script src="https://unpkg.com/vue@2.1.3/dist/vue.js"></script><div id="ap...

原创 table tr th td 去除默认的边距，间距

给table的表头设置背景色后，发现每列之间有间隙解决办法：给table标签加上**border=“0” cellspacing=“0” cellpadding=“0”**即可<table border="0" cellspacing="0" cellpadding="0"> ...

原创 npm run dev 报错：missing script:dev

在 npm run dev 或 npm start 报错打开package.js，发现没有script 里面的内容，本应该有如图内容解决方法：1、 vue init webpack， package.js文件中会添加内容2、npm run dev 即可...

转载 解决vue中v-model绑定的变量赋值给了另一个变量后，两个变量同时改变

先来看一下问题背景我们要做一个 搜索+分页 的功能，使用vue我们将分页控件绑定了点击事件，点击后提交v-model绑定的formData表单，但是我们忽略了一个问题，就是当输入的信息改变的情况下，不点击搜索，直接点击分页控件，提交的将会是新现在搜索框中的搜索条件。这样就不和逻辑了。于是我们在data中新加了一个表单的对象 submitForm，只有在点击 查询 的时候，v-model绑定的...

原创 vue中央事件总线bus

全局1、新建 eventBus.js 文件import Vue from 'vue'export default new Vue()2、引用 (哪里要用就import eventBus.js 文件）$on : 监听$emit ：触发$off : 释放 ( 监听后一定要在beforeDestroy中释放）...

转载 vue移动端项目屏幕适配--flexible rem

开始首先，我们使用 vue 的脚手架 vue-cli 来初始化一个 webpack 项目没有安装过 vue-cli 的请先安装 vue-cli安装所需依赖后安装 lib-flexible 和 px2rem-loader1.下载lib-flexiblenpm i lib-flexible --save2.引入lib-flexible在main.js中引入lib-flexibleimp...

原创 1、Vitual Dom、 render函数

样例展开的思维导图

原创 8、$nextTick、x-template、手动挂载实例

原创 7、组件高级用法

在这里插入图片描述

原创 6、slot

在这里插入图片描述

原创 5、组件通信

原创 4、表单与v-model

原创 3、vue详解

原创 2、vue详解

原创 3、DOM

原创 ２、JavaScript语法

原创 6、建立基本模型——类图

类图：描述了系统中各类对象以及他们之间的关系1、对象与类的表示法1）类： 分为三栏，从上到下分别写类名，属性列表，操作列表2）对象：一个类的对象所拥有的操作是相同的，所有对象只描述对象名、属性和属性值2、类之间的关系： 继承、关联 和 依赖1）继承 : 如果类A的全部对象都是类B的对象，而类B中存在不属于类A的对象，则A是B的特殊类。A与B之间的关系叫继承。类之间继承的表示法： ...

原创 5、建立需求模型——用况图

1、参与者：在系统之外与系统交互的事物2、用况：描述系统的一项功能的一组动作序列，这样的动作序列表示参与者与系统之间的交互，系统执行该动作序列要为参与者产生结果。3、用况与参与者之间的关系——关联把参与者和用况间的交互关系称为关联（实线）4、用况之间的关系1)包含：在一个或几个用况中存在着的重复的交互行为。为了避免重复，把重复交互行为放在一个用况中（供应者用况），原有的用况（基...

原创 4、OOA 面向对象分析

1、面向对象分析（object-oriented analysis ，OOA），运用面向对象方法进行系统分析，他是软件开发周期的一个阶段。OOA强调运用面向对象方法，对问题域和系统责任进行分析和理解，找出描述问题域和系统所需要的对象，定义对象的属性、操作以及对象之间的关系，目标是建立一个符合问题域，满足用户需求的OOA模型。2、面向对象分析OOA 与面向对象设计OOD 区别两者的职责不同。O...

原创 3、UML统一建模语言

一、统一建模语言（ unified modeling language， UML )1、UML 最初是在多种面向对象分析与设计方法相互融合的基础上形成的，后来发展成为也可以用于业务建模以及其他非软件系统建模的语言。 UML 定义了建立系统模型所需的概念并给出了表示法，但他不涉及如何及进行系统建模。因此他是一种建模语言，而不是建模方法。2、UML 规范由四部分组成：基础结构、上层结构、对象约束语...

原创 2、面向对象方法 概念式理解

之前写了一篇面向对象，比较容易让人理解面向对象是什么东西https://blog.youkuaiyun.com/moon_tang/article/details/97235464接下来，说说面向对象中的一些概念，此篇文章的内容自动认为你已经知道了面向对象具体是什么，不知道的去看上面那篇博客1、****面向对象方法解决问题的思路是：从显示世界中客观对象（如人和事物)入手，尽量运用人类的自然思维方式从...

原创 i 标签设置背景图片作 icon的问题

写了一个 i 标签给它设置了宽高和背景图片，但是界面不显示,且宽高依然是0 .icon-name { background: url("../../img/username.png"); width: 40px; height: 35px; }**1、因为 i 标签是行内标签，它不可以设置宽高。**所以上面设置宽高不起作用让 i 标签...

原创 修改 input button 标签点击时的边框颜色以及消除

点击 input 会出现蓝色边框1、消除点击时标签边框的蓝色input { outline:none }2、修改点击时标签边框颜色button,input { outline-color: red; }

原创 两个不同html标签之间他们顶部/底部不对齐

今天用 i 标签 和 input 标签写用户登录，用 i 标签当icon， input输入框，结果遇到两者顶部不对对齐于是在网上找了一下，原因是 baseline 的对齐理解，可以自己去网上查 baseline 具体是什么将input的 vertical-aligin 设为 top就可以解决input { vertical-align: top;; }参考博客https:/...

原创 vue定义全局颜色变量

1、新建一个style文件夹，然后里面再新建一个baseColor.scss文件，里面定义全局颜色变量2、在 build 文件夹中找到utils.js文件，将它的**scss: generateLoaders(‘sass’)**修改为scss: generateLoaders('sass').concat( { loader: 'sass-resources-...

原创 Module not found: Error: Can't resolve 'sass-loader' Module build failed: TypeError: this.getReso

在网上看了许多，基本上都是这样告诉你的，然而以下方法根本不起任何作用后来看到一个良心评论npm install sass-resources-loader --save-dev然后 npm run dev 就不报错了这样子就对了...