Web前端开发

w3school 在线教程

组成部分

• 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