记一些前端简单的概念

关于简单的概念

• html、css、js共同构成了浏览器能识别及运行的文件。

• 类比JPG用图片工具打开、MP4用视频工具打开，html就是用浏览器打开。

• 以建房子为例，html是房子的结构框架（页面整体展示），css是内外装修（好看的样式），js是家电家具（可以处理数据）。

• 网页一般都是由html、js、css构成，后面学到的框架 vue2/vue3、react 等前端框架，最终也是要通过一些构建工具去把代码重新编译成 html、css、js等文件。所以说html、css、js是最终目的地。

• 可以跟这个网址敲着体验下html： https://www.runoob.com/html/html-tutorial.html

• 为什么不直接写 html、js、css文件？没有框架之前确实都是直接写的html等文件，主要的原因就是随着互联网越来越庞大，直接写html对开发人员来说越来越不友好，开发的时候和维护的时候，都是需要很多时间。而使用vue等框架，可以极大地提高网页开发时的效率，有些ui组件库都可以直接拿来用，不用自己去敲样式。

• 使用vue等框架虽然多了一个步骤（需要通过编译工具重新编译成html等文件），但却极大的方便了开发人员的开发效率。

js 简单概念

// 定义字符,注意：当使用 const 定义时，数据赋值后就不能再修改
let b = 123 
const c = "abcde"

// 常用循环list方式
const c = []
// 方式1
for(let i = 0; i < c.length(); i++ ) {
    // 当前循环所循环到的对象
    let item = c[i] 
}
// 方式2
c.map(item=>{
    // 当前循环所循环到的对象
    let _item = item
})
// 方式3
c.forEach(item=>{
    // 当前循环所循环到的对象
    let _item = item      
})

js方法

方法一般写在<script/>里面,或者分离出来独立做一个 xxx.js 文件，然后再在<script/>引入。（分离独立出来的好处是 有些方法函数里边的代码特别长，不独立出来的话，<script/>太多代码会显得很臃肿）

方法在vue3中一般长这样

<template>
  // 页面内容
</template>

<script lang="ts" setup> //<script>就是<方法标签>
    // 引入自己分离出去的js文件
 import {login} from "@/api/login.js"
    
    // 方法有两种写法，
    // 第一种 使用关键字
    function confs (a:number) {
      // 方法体
  }
    // 第二种 使用箭头函数（推荐）(可以避免this指向问题)
  const confirm = (a:string) => {
      // 方法体
  }
</script>

在vue2中一般长这样

<template>
  // 页面内容
</template>

<script> //<script>就是<方法标签>
import { getCodeImg } from "@/api/login";
export default {
  // vue2中方法要写在这个methods里面包裹起来
  methods: {
    // 这里就是方法了
    getCode() {
        // 方法体
    }
  }
};
</script>

使用组件库

以 饿了么ui库为例子：https://element-plus.gitee.io/zh-CN/component/button.html
。。。待补充