前端笔记
关注
分享
扫一扫
java学累了，学点前端的休息一下。
记录前端简单的知识点，能够快速上手开发一个前端项目。
jarvis314159
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
vue-admin-template实现分页查询功能
框架介绍 入口文件：src目录下的main.js和框架根目录下的index.html build目录：放置项目构建的脚本文件 config目录：放置配置文件 搭建前端环境 config目录下的index.js文件中，将useEslint改为false 注：ESLint是语法检查的插件，但是语法检查太严格，故此不用 安装依赖：在项目根目录下执行 npm install ，会根据package.json中的依赖配置进行安装 启动：根目录下执行npm run dev 如果不报错且弹出默认登录页面，则搭建完成原创 2021-01-13 22:03:41 · 2109 阅读 · 1 评论 -
Webpack简单学习
什么是Webpack Webpack是前端资源打包工具，可以将多个静态文件打包为一个文件，减少资源的请求次数。 Webpack安装 npm install -g webpack webpack-cli #查看Webpack版本 webpack -v 项目演示 1. 创建一个项目webpack 2. npm init -y 进行初始化 3. 创建js文件 4. 打包 ----4.1 webpack目录下创建webpack.config.js const path = require("path"); /原创 2021-01-12 15:48:16 · 147 阅读 · 0 评论 -
前端模块化
前端的模块化 前端的模块化是指js文件之间的调用 ES5实现模块化 01.js //在01.js中创建js方法 const sum = function(a,b){ return parseInt(a) + parseInt(b); } const sub = function(a,b){ return parseInt(a) - parseInt(b); } //设置可以被其他js调用的方法 module.exports = { sum, sub } 02.js //在02.js中调用01.原创 2021-01-10 16:43:04 · 229 阅读 · 0 评论 -
Babel简单学习
什么是Babel ES6代码简单，开发中一般都写ES6，但是ES6代码的浏览器兼容性很差，所以可以使用Babel将ES6的代码转换成ES5。 安装Babel npm install -g babel-cli babel --version # 查看版本 写一段es6代码 //转码前 let input = [1,2,3]; //将数组的每个元素+1 input = input.map(item=>item+1) console.log(input) //[2,3,4] 配置.babelrc原创 2021-01-10 15:00:29 · 166 阅读 · 0 评论 -
npm命令记录
npm init：初始化前端项目 npm init -y：按照默认配置初始化前端项目 npm config set registry https://registry.npm.taobao.org：修改镜像为淘宝镜像 npm config list：查看npm配置信息 npm install 依赖名：下载依赖包 如：npm install jquery npm install 依赖名@X.X.X：下载特定版本的依赖包 如：npm install jquery@3.4.1 npm install：在项目.原创 2021-01-09 21:15:51 · 142 阅读 · 0 评论 -
axios发送ajax请求
axios概念 用于更加简洁地发送ajax请求 用法 模拟后台返回的数据 { "success":true, "code":100, "messsage":"成功", "data":[ {"name":"诺亚","des":"第一道光"}, {"name":"雷杰多","des":"宇宙中的传说"}, {"name":"撒加","des":"传说级奥特曼"} ] } axios发送ajax请求，并渲染数据 <div id="app">原创 2021-01-09 19:52:31 · 190 阅读 · 0 评论 -
Vue路由
引入vue-router.js vue-router.js要放到vue.js之后 <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <script src="js/vue-router.js"></script> 简单例子 <div id="app"> <h1>hello,world!</h1> <p>原创 2021-01-08 19:10:18 · 109 阅读 · 0 评论 -
Vue生命周期
基础概念 每个 Vue 实例在被创建时都要经过一系列的初始化过程，在Vue实例生命周期的不同阶段调用会调用不同的钩子函数。一般主要使用created函数和mounted函数。 created：在实例创建之后，数据渲染之前执行 mounted：在数据渲染之后执行 验证created和mounted函数执行顺序 <div id="app"> {{msg}} </div> <script> var vm = new Vue({ el:"#app", data原创 2021-01-08 18:17:16 · 150 阅读 · 0 评论 -
ES6新特性
<script> var a=1; //var声明的变量会变量提升 console.log(a); { let b=2; //let声明的变量有严格的作用域，且同一个变量只能用let声明一次 console.log(b); } const c=3; //常量 console.log(c); //数组解构 let arr=[1,2,3]; let [x,y,z] = arr; console.log(x,y,z); //对象解构 const person=原创 2021-01-05 18:08:24 · 103 阅读 · 0 评论 -
Vue双向绑定v-model
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app">原创 2020-12-23 23:29:16 · 146 阅读 · 0 评论 -
Vue基本语法
<html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> **v-bind** <spa原创 2020-12-23 22:54:26 · 117 阅读 · 0 评论 -
第一个Vue程序
使用HBuilderX新建一个Vue项目 vue.js：开发版本 vue.min.js：vue.js的压缩版，用于生产环境 index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8">原创 2020-12-23 22:05:01 · 94 阅读 · 0 评论