- 博客(34)
- 收藏
- 关注
RSS订阅原创 vue在组件中监听vuex中的值
介绍三种方法，其实这三种也没什么太大区别，使用的是cli3脚手架第一种也是最简单的一种watch: { '$store.state.test': function () { //你需要执行的代码 } }第二种computed: { test() { return this.$store.state....
2020-03-12 17:32:18
1300
原创 前端非对称加密的加密操作和解密操作，使用了jsencrypt.js实现
本文说的的如何使用公钥私钥本文使用的vue，具体如下首先需要下载包使用npmnpm i jsencrypt -D使用yarnyarn add jsencrypt先引入jsencryptimport JSEncrypt from 'jsencrypt'在methods中书写方法methods: { // 加密 // publicKey传入的是公钥，用于加密 ...
2019-10-15 17:27:10
1408
原创 前端实现非对称加密，使用node-rsa生成公钥私钥
有时候需求前端需要数据不明文显示，数据需要加密，就可以考虑下非对称加密。实现非对称加密呢就需要公钥私钥了。简单形容就是生成一个公钥私钥，然后使用公钥加密数据，使用私钥解密数据。下一篇讲使用公钥私钥实现加密解密。本文用的vue，具体如下使用npm下载包npm i node-rsa -D觉得慢可以用淘宝镜像 镜像连接，需要的可以自己点进去看cnpm i node-rsa -D我用...
2019-10-15 17:03:41
2704
1
原创 禁止页面右击事件，禁止当前页面F12按键
只是提供一个思路，可以按自己需要的去更改//禁用右键（防止右键查看源代码） //禁用右键（防止右键查看源代码） window.oncontextmenu=function(){return false;} // 禁止任何键盘敲击事件（防止F12和shift+ctrl+i调起开发者工具） window.onkeydown = window.onkeyup = ...
2019-09-26 17:36:18
995
原创 vue中实现文件上传，本文使用axios实现文件的上传操作，使用的是post方法
首先是html<template> <input type="file" name="fileUpload" id = "input_updata" @change="change($event)" ref="inputFile" > <input type="submit" value="提交" id = "btn_u...
2019-09-26 16:08:42
4493
1
原创 在vue中封装axios，以及使用方法
有时间补全，先记着。这是一个post方法注意！因为axios的post方法发送去后台的是一个json字符串，后端只能接收到键值对形式的值，所以使用qs.stringify()将值转换使用时需要在顶部引入qs使用npm/cnpm或yarn下载的axios会将qs一起下载，无需再下载，直接引入即可<script>import qs from 'qs'//引入qs模块...
2019-08-02 14:32:07
1048
原创 vue实现表格的添加，删除，修改，搜索。使用了element-ui
继上一篇文章，加了新需求，要求有搜索功能。有兴趣的可以复制看看，依然是vue-cli3脚手架。有时间详述。<template> <div class = "width_100 height_100" style="padding:50px 20px"> <div class = "width_100 height_80"> <e...
2019-08-01 19:50:22
1161
原创 vue实现表格的添加，删除，修改，使用了element-ui
使用了vue-cli3脚手架有兴趣可以直接复制去看，有时间了在详细描述 <template> <div> <el-row> <el-col :span="24"> <el-table size="mini" :data="master_user.data" border style="w...
2019-08-01 16:09:44
3117
原创 编写第一个react应用程序
编写第一个react应用程序react开发需要引入多个依赖文件：react.js、react-dom.js，分别又有开发版本和生产版本，create-react-app里已经帮我们把这些东西都安装好了。把通过CRA创建的工程目录下的src目录清空，然后在里面重新创建一个index.js. 写入以下代码:// 从 react 的包当中引入了 React。只要你要写 React.js 组件就必须引...
2019-05-13 19:54:56
369
原创 react中的JSX原理
JSX 原理要明白JSX的原理，需要先明白如何用 JavaScript 对象来表现一个 DOM 元素的结构?看下面的DOM结构<div class='app' id='appRoot'> <h1 class='title'>欢迎进入React的世界</h1> <p> React.js 是一个帮助你构建页面 UI 的库 <...
2019-05-13 19:54:11
384
原创 React介绍与create-react-app的安装
Reactcreate-react-app全局安装create-react-app$ npm install -g create-react-app创建一个项目$ create-react-app your-app 注意命名方式Creating a new React app in /dir/your-app.Installing packages. This might take...
2019-05-13 19:38:41
424
原创 vuex的基本组成介绍
vuex1. 什么是状态？用一条数据去管理一个视图或是视图中的一部分，那么我们就将这个数据称之为状态2. 什么是状态管理？用一条数据去管理一个视图或是视图中的一部分，那么我们就将这个数据称之为状态，这种管理的形式我们称之为 状态管理3. vuex是做什么的？（概念）vuex是一个集中式的存储仓库【状态】，类似于 本地存储、数据库，vuex是vue的状态管理工具，它的功能主要是...
2019-04-30 11:44:10
2651
原创 路由的动效实现
1.路由路由激活A: 自己书写一个类名或是使用第三方给的类名B；在router-link组件身上添加一个 active-class 的属性 <router-link to = "/home" active-class = "active"/>路由的缓存在router-link组件上添加一个属性 keep-alive <router-link...
2019-04-29 18:11:07
260
原创 vue的cli3中路由的使用
1.创建一个vue的cli3脚手架2.配置vue cli3的反向代理在根目录下面新建一个 vue.config.js下载 axios 第三方跨域插件yarn add axios -D在根目录下面新建一个 vue.config.js文件这是一个webpack的配置文件，可以添加，覆盖webpack文件3.vue.config.js中可以默认直接使用 http-prox...
2019-04-28 22:12:15
1345
原创 Vue的cli3脚手架中Router（路由）的基础使用
Router基础vue 路由的mode(模式)有几种， 分别是什么？在那些环境下运行？hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器。history: 依赖 HTML5 History API 和服务器配置。【需要后端支持】abstract: 支持所有 JavaScript 运行环境，如 Node.j...
2019-04-26 20:23:11
2648
原创 vue之cli（脚手架）的基本搭建
cli（脚手架，民间约定俗成的名字），官网并没有个名字1.作用快速构建vue项目，底层使用的是webpack2.版本cli2 cli33.安装调节工具优先级为：npm<cnpm<yarnnpm install @vue/cli -g cli3的版本npm install vue-cli -g cli的版本yarn add @vue/cli global注...
2019-04-25 17:50:15
150
原创 webpabe的使用小结
1. 前端的工程化工具grunt资源打包单元测试gulp流式操作工具资源打包webpack 【 主流 】资源打包工具， 比如 js文件打包压缩 ， img 打包压缩 。。。可以自动解决模块化依赖问题es6模块化2. webpack.config.js配置全局cnpm i webpack webpack-cli -g  ...
2019-04-24 22:26:44
171
原创 vue组件小扩展
动态组件动态组件就是 component组件 ， 组件身上可以绑定一个is属性， 用来表示某一个组件例：<div id="app"> <keep-alive> <component is = "B"></component> </keep-alive> </div><...
2019-04-24 21:42:33
237
原创 vue中组件生命周期（ 组件内钩子 ）
组件生命周期（ 组件内钩子 ）钩子函数，就是options里面的key, 它的值是函数钩子函数写在其他配置项的后面组件的有哪几个阶段？初始化阶段运行中阶段销毁阶段初始化阶段分为两个大阶段， 每一个大阶段包含两个生命周期钩子函数 ---- 生命周期 --》人的一生 钩子函数 --》 （人在某个阶段做得一些事情， 这些事情是自动触发）有那四个...
2019-04-23 21:22:48
652
原创 Vue中的组件通信
组件注册Vue.component(组建名称, 组件的配置)在组件中使用components的配置项来表示问题：组件命名问题组件命名和html原生标签冲突 Header Footer ----> header footer大驼峰的写法 Vue.componennt('ZhangJun',{ template: '<div&...
2019-04-22 19:42:09
130
原创 小小的介绍vue.js中的组件使用
1.先说说组件化思维组件化针对的是页面中的整个完整的功能模块划分 （项目的分工）2.组件的概念（ 一个文件 ）组件是一个html、css、js、image等外链资源，这些部分组成的一个聚合体优点：代码复用，便于维护划分组件的原则：复用率高的，独立性强的3.那么Vue中如何定义， 使用， 操作组件组件Vue.extend() ===> 组件中也可以书写 Vue这个构造器函数中...
2019-04-20 18:14:21
117
原创 虚拟DOM( vue.js中的VDOM ) 和 diff算法
虚拟DOM1. 虚拟DOM 是什么？虚拟DOM是利用 了js的对象的Object的对象模型来模拟真实DOM, 那么它的结构是一个树形结构2.为什么要使用虚拟DOM解答：虚拟dom对应的是真实dom， 使用document.CreateElement 和 document.CreateTextNode创建的就是真实节点，而真实节点每次都要全部重新渲染，对性能造成巨大的浪费。虚拟DOM判断新...
2019-04-20 11:22:51
414
原创 vue使用的axios fetch 数据请求
axios 是封装的第三方库使用前要引入<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>axios的get方法例：axios({url: 'http://localhost/get.php',method: 'get',params: {a: 1,b...
2019-04-19 21:22:58
381
原创 vue深入响应式原理及双向绑定原理
1. vue深入响应式原理深入响应式原理：当视图模型（VM）中的数据模型（M）发生改变时， 视图（V）就会进行更新Vue通过watcher将data中的属性全部使用Object.definePropery编程getter和setter,当属性值发生改变的时候， 就会触发， 然后wather就会触发， 告诉视图（V）进行重新渲染数据必须放在data选项中才能进行响应式4.数据模型...
2019-04-19 20:54:50
1237
原创 关于vue.js的特点与基本语法
1.vue.js源代码最外层使用了匿名函数(function(){}) ()1. 特点安全性高减少了函数命名冲突第二个括号才是函数的真正运行， 里面可以传入实际参数第一个括号确定了匿名函数的作用范围， 语法不会报错， 里面放一个没有名字的函数， 函数可以接收形式参数2. 底层代码封装* 匿名函数作用确定vue.js这个库的使用方法直接将Vue当做全局的一个方法...
2019-04-17 20:39:10
359
原创 关于vue.js中的事件
原生js中的事件基础内容：属性绑定<div onClick = "alert"></div>function alert(){alert('hello vue.js')}js操作// 1. 获取数据var data = ‘hello vue.js’// 2. 获取DOMvar app = document.querySelector(’#app’...
2019-04-17 20:36:50
415
原创 关于Vue.js介绍及下载使用
Vue介绍尤雨溪 google实习 阿里任职 weex研究团队（访问原生设备的库） vue.js是属于他的个人项目vue.js目前适用于中小型项目vue.js借鉴了 react 和 angular扩展：和vue.js很类似一个库 avonlon.js也是一个个人项目司徒正美微博尤小右vue.js是一个前端的js的渐进式框架名词渐进式： 越学越难（ 上手门槛低 ...
2019-04-17 11:50:00
283
原创 关于前后端的跨域问题
Access to XMLHttpRequest at 'http://localhost:3000/login' from origin 'http://localhost:9001' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resou...
2019-04-17 11:39:30
129
原创 前端的开发规范
前端的开发规范1. 目录构建的规范命名原则：简洁比如： src 源代码 img 图片资源 js JavaScript脚本 dep 第三方依赖包不使用复数比如： 不使用 imgs docs根目录（root）结构按职能划分比如：src 源代码（逻辑）doc 文档dep 第三方依赖包test 测试根据业务逻辑进行文件夹的划分srccommon 公共资源i...
2019-04-16 20:08:19
89
原创 关于前端的异步处理
1. 前端异步流程工具传统的方案：回调函数事件工具的方案：1. Promise通过new Promise()参数是一个回调函数， 回调函数中有两个参数 （resolve reject）resolve也是一个函数， 函数中接收参数， 参数为任务resolve 中任务主线程 ， 而then中任务是放在异步队列中的，执行在主线程之后Promise对象的api...
2019-04-16 09:05:26
308
原创 express框架与RMVC架构
express框架与RMVC架构webServerapiServer( 后端工程师， 前端写接口 ) —》 测试工具（postman insomina ）express框架1.在views文件夹中创建一个新文件position.ejs.此为需要渲染的页面2.在routes文件夹中新建一个position.js文件，此为路由文件。3.在position.js中输入： var...
2019-04-12 08:04:57
639
原创 MongoDB数据库的使用
前后端分离和耦合概念介绍面向过程 -》 面向对象 --》 面向服务数据库 Node.js mongodb(bson json的超集)分类：关系型数据库： MySql非关系型数据库: MongoDBMongoDB安装环境变量设置系统服务添加有问题安装系统不太支持高版本、 降版本 3.2 3.4写在mongodb时候， 记得删除之前创建好的文件夹每次启动最好先net ...
2019-04-10 18:50:46
91
原创 linux命令，node.js，express框架
linux命令mkdir 创建文件夹vim 简写 vi 创建文件的rm -rf 文件名称 删除递归删除find ./ -name ‘文件名称’ -print -exec rm -rf {} ;举例： find ./ -name ‘node_modules’ -print -exec rm -rf {} ;cat 文件名称 查看某个文件的内容前端渲染 vs 后端渲染前端拿到数据之...
2019-04-10 08:30:31
139
原创 nodejs基础
1. vs code 里面如何切换自定义终端？2. 浏览器 vs node异：node里面没有 BOM DOMnode多了很多自带的api同：都是chrome v8都支持js都支持 ECMA Script3. 需求： sum这个方法， 我想三个参数 ， 计算三个参数值？Node.js 命令行有时候用起来不方便解决： 我们使用文件 .jsNode.js命令行退出t...
2019-04-08 19:19:03
159
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人