![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
前端笔记
java学累了,学点前端的休息一下。
记录前端简单的知识点,能够快速上手开发一个前端项目。
jarvis314159
这个作者很懒,什么都没留下…
展开
-
vue-admin-template实现分页查询功能
框架介绍入口文件:src目录下的main.js和框架根目录下的index.htmlbuild目录:放置项目构建的脚本文件config目录:放置配置文件搭建前端环境config目录下的index.js文件中,将useEslint改为false注:ESLint是语法检查的插件,但是语法检查太严格,故此不用安装依赖:在项目根目录下执行 npm install ,会根据package.json中的依赖配置进行安装启动:根目录下执行npm run dev如果不报错且弹出默认登录页面,则搭建完成原创 2021-01-13 22:03:41 · 1888 阅读 · 1 评论 -
Webpack简单学习
什么是WebpackWebpack是前端资源打包工具,可以将多个静态文件打包为一个文件,减少资源的请求次数。Webpack安装npm install -g webpack webpack-cli#查看Webpack版本webpack -v项目演示1. 创建一个项目webpack2. npm init -y 进行初始化3. 创建js文件4. 打包----4.1 webpack目录下创建webpack.config.jsconst path = require("path"); /原创 2021-01-12 15:48:16 · 91 阅读 · 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 · 154 阅读 · 0 评论 -
Babel简单学习
什么是BabelES6代码简单,开发中一般都写ES6,但是ES6代码的浏览器兼容性很差,所以可以使用Babel将ES6的代码转换成ES5。安装Babelnpm install -g babel-clibabel --version # 查看版本写一段es6代码//转码前let input = [1,2,3];//将数组的每个元素+1input = input.map(item=>item+1)console.log(input) //[2,3,4]配置.babelrc原创 2021-01-10 15:00:29 · 109 阅读 · 0 评论 -
npm命令记录
npm init:初始化前端项目npm init -y:按照默认配置初始化前端项目npm config set registry https://registry.npm.taobao.org:修改镜像为淘宝镜像npm config list:查看npm配置信息npm install 依赖名:下载依赖包 如:npm install jquerynpm install 依赖名@X.X.X:下载特定版本的依赖包 如:npm install jquery@3.4.1npm install:在项目.原创 2021-01-09 21:15:51 · 98 阅读 · 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 · 137 阅读 · 0 评论 -
Vue路由
引入vue-router.jsvue-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 · 62 阅读 · 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 · 72 阅读 · 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 · 61 阅读 · 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 · 94 阅读 · 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 · 76 阅读 · 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 · 50 阅读 · 0 评论