十次方中的前端知识点随记
1. 十次方中的前端知识点随记
好久没上传笔记了,主要最近的笔记都零零散散,知识点也不集中,就不传了;最近项目想用到前后端分离,而且前端我也想参与下,就先基本的学一遍,记点零星的笔记,各位能从中看到有用的东西最好
1.1. Node.js
1.1.1. node基本使用
- 查看
nodejs.cn
中文文档地址
var http = require("http")引入模块
http.createServer(function(request,response){response.writeHead(200,{'Content-Type':'text/plain'});resposne.end('Hello world!');
}).listen(8888);cmd运行`node demo4`制作模块
exports.add=function(x,y){ return x+y;
}
1.1.2. NPM命令
- node package manager 用来node包管理工具
npm init
初始化工程,生成package.json,相当于maven中pomnpm install express
安装模块express
npm root -g
显示全局目录npm install jquery -g
,全局安装- 只有
package.json
时,需要npm install
下载对应的node_modules
- 安装淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
- 通过
cnpm -v
查看版本 - 使用cnpm下载js库,
cnpm install
需要下载的js库 - 运行
npm run dev
- 编译工程
npm run build
1.1.3. webpack
- 打包工具
cnpm install webpack -g
全局安装cnpm install webpack-cli -g
命令包webpack -v
查看是否安装完毕,安装版本- 打包命令
webpack
- CSS打包,需要先安装
cnpm install style-loader css-loader --save-dev
1.2. 开发工具VsCode
- 安装插件的方式支持不同语言
- 安装地址
https://code.visualstudio.com
- 常用插件
vetur
,HTML Snippets
,HTML CSS Support
,Debugger for Chrome
,VueHelper
1.3. ES6
- ECMAScript是由ECMA制定的规范
var
是全局的,let
作用域局部的- 常量声明
const
,常量不可变 - 模板字符串
let name = "bac";console.log('hello, ${name}')
- 函数默认参数
function action(num = 200){console.log(num)
}
action();
action(100);
- 箭头函数
function add(a,b){return a+b;
}
console.log(add(100,200));//ES6
add = (a,b) => {return a+b;
}
add = (a,b) => a+b;
- 对象初始化简写
// ES5
function people(name ,age){return {name:name,age: age}
}//ES6
function people(name, age){return {name,age}
}
- 解构
//ES5
const people= {return {name:name,age: age}
}
const name = people.name;
const age = people.age;//ES6
const {name ,age} = people;
console.log(name);
console.log(age);
- Spread Operator 追加数组,对象...
const color = ['red','green'];
const colorful =[...color,'pink'];const people = {name:'xyx',age:20};
const peopleful = {...people,address:'aaaa'}
- import和export导入导出
let fn0=function(){console.log('fne...');
}export {fn0}
//从某个js文件中导入某个模块
import {fn0} from './lib'
node8 不支持import,可以用require,不用import,或者用babel
的命令行工具来执行
- Promise异步编程的一种解决方案
1.2. ElementUI
- 饿了吗开源的前端架构,基于vue.js
- 脚手架推荐:vueAdmin-template-master
cnpm install
,npm run dev
1.3. EasyMock
- 模拟请求数据,在后端没完成前,模拟数据
1.4. NUXT
- 服务端渲染框架,基于vue.js
1.5. 整理一个vueAdmin-template-master的架构
build
构建目录,构建的相关配置config
配置目录,需要修改config/dev.env.js
中的mock路径,此处测试可以用easyMock,生产则改config/prod.env.js
node_modules
通过cnpm install
安装的依赖,不用自己写src
主要的编写目录src/api
编写请求接口的封装src/assets
静态资源管理src/router
路由信息src/store
存储全局信息方法src/styles
样式信息src/utils
工具方法src/views
视图信息,需要着重修改的地方src/App.vue
全局视图基本框架src/main.js
主入口,实例化Vue
package.json
打包文件,一般不用修改
1.6. 路由配置
- 在模板代码
template
中,<router-view/>
用来表明需要路由的标签区域 <router-link to="/" >首页</router-link>
表示路由连接地址,连接到另一个模板- 路由连接到模板的配置
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import List from '@/components/list'
import Item from '@/components/item'Vue.use(Router)export default new Router({routes: [{path: '/',name: 'HelloWorld',component: HelloWorld},{path: '/list',name: 'List',component: List},{path: '/item/:id',name: 'Item',component: Item}]
})
1.7. vuex安装使用
- 安装
# 创建一个基于 webpack 模板的新项目
vue init webpack vuexdemo
# 安装依赖,走你
cd vuexdemo
cnpm install --save vuex
npm run dev
- store创建
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({state: {count: 0}
})
export default store
- store纳入vue
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({el: '#app',router,store,components: { App },template: '<App/>'
})
- count的值不能直接修改,需要通过commit(mutation)
const store = new Vuex.Store({state: {count: 0},mutations: {increment(state){state.count++}}
})
this.$store.commit('increment')
1.7.1. 提交荷载
- 需要加额外参数,则
mutations: {increment (state,x) {state.count += x}}
this.$store.commit('increment',10)
1.7.2. Action
- 提交的是
mutation
,可以包含任意异步操作 - action的提交是用如下
mutations: {increment(state,x){state.count+=x}},
actions: {increment(context,x){context.commit('increment',x)}}
this.$store.dispatch('increment')
所以
key | 方法 |
---|---|
mutations | $store.commit('increment') |
actions | $store.dispatch('increment') |
1.7.3. 派生属性Getter
- 调用
{{$store.getters.remark}}
- 配置
getters: {remark(s){if(s.count<50){return '加油'}else if(s.count<100){return '你真棒'}else{return '你是大神'}}}
1.8. 额外备注
- 三点运算符
...
,比如item是一个对象,下列表示item中加了个属性count
{...item,count:0
}
转载于:https://www.cnblogs.com/sky-chen/p/10865254.html
十次方中的前端知识点随记相关推荐
- 十次方专属社交平台前端系统开发 网站前台-活动与招聘
学习目标: 掌握NUXT框架的基本使用方法 完成十次方网站前台的搭建 完成十次方网站前台活动模块的功能 完成十次方网站前台招聘模块的功能 1服务端渲染技术NUXT 1.1什么是服务端渲染 服务端渲染又 ...
- 前端知识点总结——JS高级(持续更新中)
前端知识点总结--JS高级(持续更新中) 1.字符串 什么是: 连续存储多个字符的字符数组 相同: 1. 下标 2. .length 3. 遍历 4. 选取: slice(starti[, endi] ...
- 十次方前端系统开发(6)
完成用户注册功能 完成用户登陆功能,掌握js-cookie的使用 完成微信扫码登陆的功能 完成用户中心嵌套布局,掌握nuxt嵌套路由的使用 1 用户注册 1.1 页面构建 创建pages/login. ...
- 第七天 黑马十次方 吐槽列表与详细页、发吐槽与评论功能、问答频道功能、掌握DataURL和阿里云OSS
第7章 网站前台-吐槽与问答 学习目标: ** 完成吐槽列表与详细页 完成发吐槽与评论功能,掌握富文本编辑器的使用 完成问答频道功能 掌握DataURL和阿里云OSS** 1 吐槽列表与详细页 1.1 ...
- 第五天 黑马十次方 NUXT框架、前台的搭建、前台活动模块的功能、前台招聘模块的功能
第5章 网站前台-活动与招聘 学习目标: 掌握NUXT框架的基本使用方法 完成十次方网站前台的搭建 完成十次方网站前台活动模块的功能 完成十次方网站前台招聘模块的功能 1 服务端渲染技术NUXT 1. ...
- 「划线高亮」和「插入笔记」—— 不止是前端知识点
如今前端领域:serverless,low code,全栈化等概念遍布漫天.开发者们热衷于讨论「如何把前端格局做大」,「如何将高高在上的概念落地」.此时,你有没有感受到「还不知道发展方向到底是什么,就 ...
- 前端知识点汇总、深入浅出
一.JavaScript常考题 1.原始(Primitive)类型 涉及面试题:原始类型有哪几种?null 是对象吗? 7种原始: boolean 布尔值 null 空值 undefined 未定义 ...
- java十次方社交项目实战(完整)
资源目录: 前端系统开发 ├─1-1 十次方项目 前端环境搭建 ├─1-2 前端 API文档与模拟数据接口 ├─1-3前端 使用elementUI开发管理后台 ├─1-4 路由与状态管理 ├─1-5 ...
- 十款让 Web 前端开发人员更轻松的实用工具
这篇文章介绍十款让 Web 前端开发人员生活更轻松的实用工具.每个 Web 开发人员都有自己的工具箱,这样工作中碰到的每个问题都有一个好的解决方案供选择. 对于每一项工作,开发人员需要特定的辅助工具, ...
最新文章
- 2019 ICPC Asia Nanjing Regional K.Triangle(求一个能将三角形分成两个面积相同的线段、计算几何)
- mysql 系统参数优化方法_Mysql 性能优化2 系统参数配置方法 和 文件系统
- kubernetes1.4版本遇到的坑
- WCF双向通讯netTCP
- CH - 0802 占卜DIY(简单模拟,水题)
- android开启前台服务_如何在PC端一次性开启Tasker的所有权限和服务
- Hibernate简单例子以及笔记
- IIS负载均衡-Application Request Route详解第四篇:使用ARR实现三层部署架构
- 吴恩达,确诊新冠阳性!
- 【SpringBoot 2】(九)异常处理 web原生组件的注入
- snmp服务 2003 镜像_美国掌握全球70%根服务器,一旦对中国关闭,我们将无法上网?...
- Android 系统性能优化(43)---Android OOM案例分析
- 英特尔CEO重申全球性芯片短缺需要数年才能解决
- 晨哥真有料丨等女神分了我上位!
- 一分钟看懂mysql_冬天发财树“最怕”它,遇上就烂根,一分钟看懂就能养好
- s7epaapidll丢失怎么办_s7epaapidll下载
- Python3.7下载与安装pygame
- android虚拟机改变sim,逍遥安卓模拟器修改手机型号的方法
- PSCC2014前端切图小方法(不断补充)
- c语言编写生日祝福语大全,生日祝福语(精选50句)