简介

• 前端原生分为三个部分
  • html：添加元素，比如添加图片
  • css：添加样式，比如更改位置
  • js：添加事件，比如打印 “欢迎光临”
• 后来发展出框架
  • vue：比用原生写更简单，更快

前端原生

• 任务：制作一个脸，并且能说欢迎光临
• 空白页链接：what'sFrontEnd/vue

html

• 超文本标记语言（Hyper Text Markup Language）
• 链接：what'sFrontEnd/html
• 代码

<img src="脸.png">
<img src="左眼.png">
<img src="右眼.png">
<img src="嘴.png">

• 效果
• 对应关系
• html能添加 眼、鼻子 这些元素

css

• 层叠样式表（Cascading Style Sheets）
• 链接：what'sFrontEnd/css
• 代码

<img src="脸.png">
<img src="左眼.png" style="top: 40px;left: 60px;position:absolute;">
<img src="右眼.png" style="top: 40px;right: 60px;position:absolute;">
<img src="嘴.png" style="bottom: 20px;left: 100px;position:absolute;">

• 效果
• 对应关系

• css能改变元素的样式，确定了 眼、嘴 的位置

js

• javaScript(蹭java热度)
• 链接：what'sFrontEnd/js
• 代码

<img id="嘴" src="嘴.png" style="bottom: 20px;left: 100px;">

<script>
    document.getElementById("嘴").onclick = ()=> console.log("欢迎光临")||console.log("");
</script>

• 效果

• 对应关系

• js能给元素添加事件，让嘴能说话

总结

• html：添加元素，让网页有鼻子有眼
• css：添加样式，让网页不会嘴歪眼斜
• js：添加事件，让网页能说会道

vue

• 空白页链接：what'sFrontEnd/vue

添加元素

Vue.set(我,"脸",{})
Vue.set(我,"左眼",{})
Vue.set(我,"右眼",{})
Vue.set(我,"嘴",{})

添加样式

Vue.set(我.左眼,"左",60)
Vue.set(我.左眼,"上",40)

Vue.set(我.右眼,"右",60)
Vue.set(我.右眼,"上",40)

Vue.set(我.嘴,"左",100)
Vue.set(我.嘴,"下",20)

添加事件

Vue.set(我.嘴,"说",欢迎光临)

一步到位

Vue.set(vm,"我",{
    脸:{},
    左眼:{
        左:60,
        上:40,
    },
    右眼:{
        右:60,
        上:40,
    },
    嘴:{
        左:100,
        下:20,
        说:欢迎光临
    },
})

总结

• 用vue更简单更快

前端可以做什么

• 开发网页：前端为网页而生
• 开发桌面软件：Electron，让前端可以开发Windows，MacOs,Linux桌面应用，如VSCode编辑器
• 开发app：uni-app,让前端可以开发 安卓、ios app
• 开发后端：nodejs,让js可以开发后端
• 开发物联网：JerryScript，让js能运行在内存小于64KB的物联网设备上，如鸿蒙OS的JS UI框架的js引擎

总结

前端的优点是极强的跨平台性，网页、移动端app、pc端桌面软件甚至是物联网设备。目前没有任何一个技术栈能到达如此广泛的跨平台能力。 缺点是，性能方面不如原生开发。