w_t_y_y的博客

nodejs的作用和jvm的一样一样的，也是js的运行环境，不管是你是什么操作系统，只要安装对应版本的nodejs，那你就可以用js来开发后台程序。vue.js有路由的叫vue-route.js，vue.js也有数据请求叫vue-resource.js。Vue.js 的目标是通过尽可能简单的 API 实现响应的道数据绑定和组合的视图组件。Vue.js的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进DOM的系统。Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。

这里用的轻量级的raphael.js首先：npm install --save raphael代码：<!-- @format --><template> <div id="map"> </div></template><script>import Raphael from 'raphael';export default { name: 'china_map', data() {

自定义参数：组件方法 = "(原参数1，原参数2，...) => 方法名(自定义参数)"如：el-select的：remote-method:remote-method="(query) => myFunction(query, <自定义参数>)"el-tree的@check @check="(data,checkinfo)=>selectNode(data,checkinfo,value)"...

一、数据类型：数据分为基本数据类型(String, Number, Boolean, Null, Undefined，Symbol)和对象数据类型。1、基本数据类型的特点：直接存储在栈(stack)中的数据；2、引用数据类型的特点：存储的是该对象在栈中引用，真实的数据存放在堆内存里。引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体。二、浅拷贝与深拷贝：1、定义：深拷贝和浅拷贝是只针对Object

一、事件冒泡：当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级，一直到window 。（注意这里传递的仅仅是事件 并不传递所绑定的事件函数。所以如果父级没有绑定事件函数，就算传递了事件 也不会有什么表现 但事件确实传递了。）且事件冒泡与位置无关，只跟html代码中的层级关系有关系。例：var div1 = document.getElementById("div1");var div2 = document.getElementById("div2"); div2.onclick

一、概念： Event 对象代表事件的状态，当dom tree中某个事件被触发的时候，会同时自动产生一个用来描述事件所有的相关信息（比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。）的对象，这个对象就是event（事件对象）。二、获取event对象的方法：1、通过函数参数传递：注意调用处参数只能叫$event <a class="detail-btn" @click="clickRoleToDetail($event, role)">详情</a>

1、直接粘贴：<!-- @format --><template> <div class="body"> <textarea @paste="onPaste" style="height:200px;width:200px"></textarea> </div></template><script>export default { name: 'Default', dat

一、语法：用于组件通信，这两个组件可以是父子关系、兄弟关系，也可以没有任何关系。bus使用$emit， $on， $off 分别来分发、监听、取消监听事件。使用方法：1、引入：在main.js中加上：import VueBus from 'vue-bus';Vue.use(VueBus);2、分发事件的组件// ...methods: { todo: function () { this.$bus.$emit('todoSth', params); //para

vue除了可以应用css的animation动画外，vue自带了动画组件transition

一、准备工作：

一、定义：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。所以就衍生出了这个获取更新后的DOM的Vue方法。所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码；nextTick()，是将回调函数延迟在下一次dom更新数据后调用，简单的理解是：当数据更新了，在dom中渲染后，自动执行该函数。二、举例：1、不使用nextTick()获取更新后的DOM值：<template> <di

UI组件 element- 饿了么出品的Vue2的web UI工具套件 Vux- 基于Vue和WeUI的组件库 mint-ui- Vue 2的移动UI元素 iview- 基于 Vuejs 的开源 UI 组件库 Keen-UI- 轻量级的基本UI组件合集 vue-material- 通过Vue Material和Vue 2建立精美的app应用 muse-ui- 三端样式一致的响应式 UI 库 vuetify- 为移动而生的Vue JS 2组件框架 vonic- 快速构...

一、回调函数：二、this指向问题：

一、介绍：通过打印可以看出Promise是一个构造函数，有all、reject、resolve、then、catch等方法。这样用Promise new出来的对象肯定就有then、catch等方法。二、用法：created() { var p = new Promise(function (resolve, reject) { //做一些异步操作 setTimeout(function () { console.log('Promise执行.

一、介绍：回调，顾名思义，回头再调。

一、用法：ajax请求默认都是异步的，即如果当前请求没有及时响应，会先执行后面的代码。如果某些场景对顺序有要求，需要同步（按顺序）执行，可以使用async搭配await实现，await函数不能单独使用。语法如下：async methodName(params){ let isSuccess = false; await this.$http({ url: URL, method: "get", params: this.$http.adornParams({

一、v-if和v-show：vue框架中提供了v-if 和 v-show两个指令，用于控制页面不DOM结构的显隐性。相同点：均可以实现局部DOM的显示和隐藏。不同点：显示和隐藏的原理不同。v-show隐藏元素的本质是给元素本省添加了display = none这个css属性，其实DOM结构仍存在于页面，可以通过F12查看DOM结构。v-if隐藏元素的本质是不加载DOM结构，不能通过F12查看DOM结构之后再v-if绑定的布尔变量为true时，才添加对应的DOM结构。报错解决：本人使用v-if

写法有两种：:title="`字符串${xx}`" 或 :title="'字符串' + xx" 都可以。如：1、vue绑定值与字符串拼接： <el-option v-for="item in tableData" :key="item.account" :label= '`${item.name}${item.account}`' :value=...

一、整个表格（表头加数据）动态变化：1、效果：点击表头，弹出选择框：2、代码：<template> <div> <!--<div v-show="true" class="menu1" style="width:10%;float:left"> <el-checkbox-group v-model="colOptions"> <el-checkbox v-for="item in .

<template><vuedraggableclass="wrapper"v-model="list"><transition-group><divv-for="iteminlist":key="item"class="item"><p>{{item}}</p></div></transition-group>...

一、集成方法：1、先安装依赖 ：进入到项目目录下，执行 npm install vue-quill-editor --save 或者cnpm安装。2、在需要引用富文本编辑器的地方引入以下代码：import { quillEditor } from "vue-quill-editor"; //调用编辑器import "quill/dist/quill.core.css";import "quill/dist/quill.snow.css";import "quill/dist/q...

先回顾下原生js和jquery操作dom：一、原生js操作dom：二、jquery操作dom：三、vue js操作dom：

.

一、后端：现有两个接口，package com.demo.rest;import com.demo.dto.UserDTO;import org.springframework.web.bind.annotation.RequestBody;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestParam;impo

1、标签语言中拼接字符串：如：this.personList.forEach(item => { item.label = `${item.userName}(${item.account})`; }); <el-option v-for="item in tableData" :key="item.account" :label= '`${it

一、watch用法：1、基础写法<div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type="text" v-model="firstName"></p></div> new Vue({ el: '#root', data: { firstName: 'Dawei', lastName: 'Lou'

文件过大上传处理：一、图片压缩上传：图片过大时上传会占用服务器内存，可以在前端进行压缩后上传，如图是我上传后下载的图片，原图为14M，压缩后只有270KB<!-- @format --><template> <div > <div ref="articalImg" class="articalImg"> <span> <label class="butto.

一文件异步上传：1、前端：（1）request请求util：import axios from 'axios'// 配置session跨域axios.defaults.withCredentials = trueimport { Message, MessageBox } from 'element-ui'import store from '../store'import { getToken } from '@/utils/auth'// 创建axios实例const se

Vue 框架很核心的功能就是双向的数据绑定。 双向是指：HTML 标签数据 绑定到 Vue 对象，另外反方向数据也是绑定的。通俗点说就是，Vue 对象的改变会直接影响到 HTML 的标签的变化，而且标签的变化也会反过来影响 Vue 对象的属性的变化。这样以来，就彻底变革了之前 Dom 的开发方式，之前 Dom 驱动的开发方式尤其是以 jQuery 为主的开发时代，都是 dom 变化后，触发 js 事件，然后在事件中通过 js 代码取得标签的变化，再跟后台进行交互，然后根据后台返回的结果再更新 HTML 标

常用的有三种方法，最后一种用的比较多：1.使用window.location.hrefwindow.location.replace()window.location.reload()会出现空白，体验不是很好2.先进入一个空路由，然后返回reflashPage(){ let NewPage = '_empty' + '?time=' + new Date().getT...

一、引入echarts库：如果用的页面比较多，可以在main.js中全局引入echarts库；如果用的页面不多，可以单独引入。这里采用全局引入：import Vue from 'vue'import 'normalize.css/normalize.css'// A modern alternative to CSS resetsimport ElementUI from 'el...

VUE调用高德地图获取地区名称、经度、纬度。一、效果：点击添加位置，弹出选择“选择地图”、“删除”，点击选择地图，展示高德地图页面，点击目标地址即可选中；最后点击提交按钮，弹框展示所选择的区域：二、代码：1、在index.html中引用高德地图js：<!DOCTYPE html><html> <head> ...

RSA是一种非对称加密算法。现在，很多登陆表单的密码都采用RSA加密。为登录安全，登录表单输入密码，会加密后传入后台，后台再解密得到原密码，而数据库中存储的一般为原密码MD5加密后的密码，所以后台获取这个原密码后再MD5加密，与数据库中存储的用户密码比较判断密码是否正确。一、后端：1、后端校验接口： public Authentication authenticate(Authent...

定时函数setInterval，销毁定时clearTimeout。如页面没隔10s从后台获取下当前时间<template> <div>时间{{timeStr}}</div></template><script>import { getTime } from "@/api/test";export default {...

1、列表页面： this.$router.push({ name: 'userTemplate', params: { reportUrl: reportUrl, reportType: reportType }}) 点击查看后触发事件，带入参数跳转到userTemplate页面；reportType有两种类型，0表示reportUrl是绝对网址，1表示reportUrl是本...

一、数组常用方法：二、字符串常用方法：

一、route二、demo：跳转页面使用router的push方法切换路由，path为跳转后的路由，query为携带的参数；跳转页面：methods:{update(user) { this.saveSearchData(); this.$router.push({ path: "/sessionstore/detail", ...

一、cookie、sessionStorage和localStorage的区别：二、demo：

一、介绍：二、项目中使用：

父子组件通信注意事项：一、单向传递问题：子组件一般不修改props中的数据1、先看报错：如果直接在子组件中修改props中的属性值，f12会有报错：[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on th.