组成部分
- HTML
- CSS
- JavaScript
HTML
常用标签
- a
- img
- table
- form
- input
- select
- textarea
- div
- span
- label
- button
- ……
JS
引入方式
- 内部脚本
- 外部脚本
- PS: CSS三种 内联、内部、外部
基础语法
输出语句
- window.alert() 写入警告框(弹出的那个)
- document.write() 写入HTML输出
- console.log() 写入浏览器控制台
变量
- var 弱类型语言,变量可以存储不同类型的值
- 数字不能开头
- 特点1 作用域是全局变量
- 特点2 可以重复定义
- let关键字 作用域在代码块,不能重复定义
- const关键字 常量,不能改变
数据类型、运算符
- 基本(原始)数据类型:number、string、boolean、undefined、null
- typeof() null返回object
- 引用数据类型:object、array、function
- 运算符:+、-、*、/、%、++、–、、**=**、!=、!==、&&、||、!、>、<、>=、<= ……
- parseInt()
- 流程控制语句
函数
function add(a,b){
return a+b;
}
var add = function(a,b){
return a+b;
}
function (e){
console.log(e);
}
(e) => {
console.log(e);
}
对象
-
Array
- var arr = new Array(1,2,3)
- var arr = [1,2,3]
- length
- forEach(), push(), splice(索引,删几个)
-
String
- var str = new String(“1”)
- var str = “1”
- length
- charAt(), indexOf(), trim(), substring(开始索引,结束索引)
-
JSON
-
// JavaScript自定义对象 var user = { age: 20, eat : function(){ } }
-
JavaScript Object Notation
-
// Json var user = {"age": 20} var userJson = '{"age":20}' var userObject = JSON.parse(userJson); // 从 JSON 字符串转换为对象 var userJsonString = JSON.stringify(user); // 从对象转换为 JSON 字符串
-
-
BOM
-
Browser Object Model
-
Window
-
history, lcoation, navigator
-
alert(), confirm(), setInterval(), setTimeout()
-
var flag = confirm("确认删除?"); alert(flag); setInterval(function(){ },2000); setTimeout(function(){ },2000)
-
-
Navigator
-
Screen
-
History
-
Location
- location.href
-
-
DOM
-
Document Object Model
-
Core DOM
-
Document
-
Element
-
var h1 = document.getElementById('h1') var divs = document.getElementsByTagName('div') var hobby = document.getElementsByName('hobby') var clss = document.getElementsByClassName('cls') divs[0].innerHTML = "更改"
-
-
Attribute
-
Text
-
Comment
-
-
XML DOM
-
HTML DOM
-
事件监听
<!--通过HTML标签-->
<input type="button" οnclick="on()" value="按钮">
<script>
fucntion on(){
alert("111");
}
</script>
<!--通过DOM-->
<input type="button" id="btn" value="按钮">
<script>
document.getElementById('btn').onclick = function(){
alert("111");
}
</script>
Vue
前端框架,免除原生JavaScript的DOM操作,简化书写
MVVM(Model-View-ViewModel),数据双向绑定
<script src="js/vue.js"></script>
<script>
new new Vue({
el: "#app",
data: {
message: "Hello Vue!"
}
})
</script>
<div id="app">
<input type="text" v-model="message">
{{message}}
</div>
生命周期八个阶段
mounted() 钩子
Ajax
Asynchronous JavaScript And XML
- 数据交换
- 异步交互
Axios
npm install axios
mounted(){
axios.get().then((result) => {
this.tableData = result.data.data;
})
}
插槽
<template slot-scope="scope">
{{}}
</template>
vue路由
VueRouter
redirect: '/dept' //重定向
打包
npm run build
dist目录
部署nginx
nginx 占有内存少,并发能力强
复制到html下
启动nginx,使用80端口
nginx.conf更改listen端口号
localhost:80