2018年06月_姜无忧

原创 Vue实现复制到粘帖板功能

1. 安装vue-clipboardnpm install --save vue-clipboard22.main.js引入import VueClipboards from 'vue-clipboards2'Vue.use(VueClipboards);3.案例<template> <div class="yeluosen"> <input type=...

2018-06-21 09:56:18 5352 3

原创 JS对象，获取key和value

var peopleArray=[] var peopleobj={jiangyx: "姜艳霞", yeluosen: "叶落森"} for(let i in peopleobj){ debugger...

2018-06-20 20:21:09 8175

原创 vue鼠标移入添加class样式,鼠标移出去除样式

<!DOCTYPE html><html><head> <title>Vue加class</title> <meta charset="utf-8"/> <style type="text/css"> .classred{ color:red;

2018-06-20 18:17:10 7342

原创 Vue点击本条添加加class样式，移除其他条class样式

<!DOCTYPE html><html><head> <title>Vue如何加class</title> <meta charset="utf-8"/> <style type="text/css"> .classred{ color:red;

2018-06-20 18:00:10 17531 5

原创 Vue生命周期

<!DOCTYPE html><html><head> <title>Vue生命周期</title> <meta charset="utf-8"/></head><body><div id="app"&am

2018-06-20 15:13:02 189

原创 vue前端模拟简单的分页

<Table border :columns="fieldColumns" :data="fieldData2" height='500'></Table>  <div class="result-foot"&g

2018-06-17 20:36:59 3817

原创 vue-router的基本使用

我的另一篇博客，详细介绍了，路由的基本原理https://blog.csdn.net/xiasohuai/article/details/81982821vue-router分为4种方式1.动态路由 2.嵌套路由 3.编程式路由 4.命名路由和命名视图简单的静态路由demo步骤：1.安装vue-routernpm install vue...

2018-06-14 17:00:57 1156

原创 Vuex的基本使用——异步情况下

如果有多页面，要使用store。并且感觉写在一个页面太乱。我们可以在store文件夹中。在建一个文件。如：user.jsstore/index.jsimport Vue from 'vue';import Vuex from 'vuex';import user from './user.js';Vue.use(Vuex);const store = new Vuex.Store({ ...

2018-06-13 12:56:39 2777

1.安装npm install vuex --save2.在自己的项目目录下新建一个store文件夹，并新建一个index.js，并使用Vuex。代码如下：import Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex);3.在main.js中，引入新建的store文件夹下的index.js再然后 , 在实例化 Vue对象时加入 stor...

2018-06-13 12:29:25 1253

原创正则——密码长度不小于8位，包含数字、字母大、小写、符号中的至少3种

var regUpper = /[A-Z]/; var regLower = /[a-z]/; var regNum = /[0-9]/; var regTeShu =new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（...

2018-06-12 16:04:31 20954 1

原创 vue兄弟组件的传值bus

兄弟组件通信通过bus，新建一个bus.js文件，并在两个组件分别引入注：当在a.vue组件上触发点击事件时，就会触发bus上监听的事件，而bus事件监听在b.vue里面，这个时候就会触发b.vue上的事件监听，而通过回调函数，就可以拿到a.vue组件传过来的数据，从而实现兄弟组件通信。 bus.jsimport Vue from "vue" export defa...

2018-06-12 14:21:15 2415 1

原创 vue父子组件之间传值以及方法调用

父组件向子组件传值注：这种方式只能由父向子传递，子组件不能更新父组件内的data先定义一个子组件，在组件中注册props<template> <div> <div>{{message}}</div> </div></template><script> export def

2018-06-12 12:53:24 12283

原创登录页面密码加密base64和md5

base64加密1.安装npm install --save js-base642.引用let Base64 = require('js-base64').Base64;3.使用Base64.encode('yeluosen'); // 加密后 eWVsdW9zZW4=Base64.encode('叶落森'); // 加密后 5Y+26JC95qOuBase64.decode(...

2018-06-12 12:29:10 2731

原创 Vue.filter()注册或获取全局过滤器

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和v-bind表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：{{ message | yeluosen }}<div...

2018-06-11 14:45:20 3189

原创 Vue.directive()注册自定义指令

定义的指令不支持驼峰式写法，所以指令命名统一变为小写,或者用用'-'或'_'分割要使用自定义的指令，需在对用的元素中，加上'v-'的前缀形成类似于内部指令'v-if'，'v-text'的形式<div id="app"> <div v-yeluosen="changeColor">{{num}}</div> <button @click="a...

2018-06-11 14:35:05 2295

原创 Vue.delete()删除对象的属性

Vue.delete( target, key ) data : { namelist : { id : 1, name : '叶落森' } }// 删除namedelete this.namelist.name;//js方法Vue.delete(this.namelist,'name');//...

2018-06-11 12:17:59 70326 1

原创 Vue.set()动态的新增与修改数据，触发视图更新

参数：target：要更改的数据源(可以是对象或者数组)key：要更改的具体数据(可以是字符串和数字)value ：重新赋的值用法：向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。例：data:{ namelist:[ {message:"叶落森",id:"1"}, {message:"姜艳霞",id:"2"}, ...

2018-06-11 11:45:23 15843

原创如何实现按钮水平居中

button是一个行内块级元素display:inline-block;所以处理方式很简单，可以用以下两种方式：方式一： <div style="text-align:center"> <button>按钮居中</button> </div>方式二：<div> ...

2018-06-07 18:26:53 252620 9

原创 css水平垂直居中

（1）父元素position:relative，子元素position:absolute兼容性：适用于所有浏览器（PC端推荐）<div class="parent"> <div class="child"></div> </div> .parent{ width: 200px; height: 200px;...

2018-06-07 18:11:10 213

原创 css水平居中

水平居中（方法7推荐移动端）（1）margin：0 auto;text-align:center;兼容性：适用于所有浏览器<div class="parent"> <div class="child"></div></div>.parent{/*父元素可以无宽度和高度*/ width:500px; height:300...

2018-06-07 17:56:45 239

原创 css高度塌陷3种常用方式

什么是高度塌陷？在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当子元素设置浮动之后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。原代码： <div id="yeluosen"> <div id="a1"></div> <div id="a2...

2018-06-07 15:43:05 11796 2

原创 vue安装搭建以及在项目中安装elementui

vue安装步骤在安装vue之前，先确保node和npm是否安装。如果安装ok，那么接下来安装vue1.npm install vue (安装vue)2.npm install --global vue-cli （安装vue-cli）因为npm是国外的，使用起来比较慢，使安装vue会出现报错，那么你可以试着安装淘宝镜像：1.npm install -g cnpm --registry...

2018-06-03 18:56:27 20307

原创相对路径和绝对路径

相对路径：./a.jpg a.jpg （本目录下）../a.jpg（源文件所在目录的上一级目录）../../a.jpg （源文件所在目录的上上一级目录）../../../a.jpg （源文件所在目录的上上上一级目录）绝对路径（就是从根目录开始）：/ （根目录）http://www.baidu.com/a.jpg（假设你注册的域名为www.baidu.com,并有自己的虚拟主机，那么h...

2018-06-03 18:09:51 271

xiasohuai的博客