前端学习-cnblog

前端学习

1.环境安装

安装vscode，以及插件，html css support，Live server，auto rename tag。

2.常见文本标签

- <u>:下划线标签
- <i>:斜体标签
- <s>:删除线
- <b>/<strong>:加粗标签

列表
<table>
    //标签头
    <tr>
        <th></th>
    </tr>

    //每一行元素
    <tr>
        <td></td>
    </tr>

</table>

有序列表
<ol>
    <li></li>
</ol>

无序列表
<ul>
    <li></li>
</ul>

段落标签
<p></p>

标题标签
<h></h>

换行标签
<br>

分割线
<hr>
html

2，常见标签属性

超链接标签
<a herf="",target="">
这里target有默认取值，可以是_self,_blank,_parent,_top等，一般使用_self,_blank

图片标签
<img src="",alt="">
src指定一个图像路径，可以是绝对路径（包括网络绝对路径）或者相对路径
alt是指定当图片无法渲染时，展示的提示性文字

3.input、form表单


---

CSS

1.css三种导入方式
1. 内联样式
2. 内部样式表
3. 外部样式表

优先级：内联样式>内部样式>外部样式

2.常用选择器





JavaScript

1. 变量
2. 条件语句
3. 循环语句
4. 函数
5. 事件
6. dom
7. 练习，表格的增删改查
8. 移动端适配及rem
9. flex弹性盒子与容器属性





表格的增删改查

table.html

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格增删改查</title>

    <style>
        #table {
            margin-top: 20px;
            border-collapse: collapse;
            width: 100%;
            height: 100px;
        }

        th,td {
            border: 1px solid #333;
            padding:6px 12px;
            /*居中展示*/
            text-align: center;
        }
        th {
            background-color: #e9e9e9;
        }
        
    </style>
    <script src="./js/table.js"></script>
</head>
<body>
    <h1>表格增删改查</h1>
    <button onclick="addRow()">增加</button>
    <table id='table'>
        <tr>
            <th>姓名</th>
            <th>手机号码</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>李政</td>
            <td>12345678910</td>
            <td>
                <button onclick="editRow(this)">编辑</button>
                <button onclick="delRow(this)">删除</button>
            </td>
        </tr>
    </table>
</body>
</html>

table.js

function addRow(){
    // alert('增加一行内容');
    var table=document.getElementById('table');
    var len=table.rows.length;
    // alert(len);
    var tr=document.createElement('tr');
    tr.innerHTML=`
        <td>未命名</td>
        <td>未知</td>
        <td>
            <button onclick="editRow(this)">编辑</button>
            <button onclick="delRow(this)">删除</button>
        </td>
    `;
    table.appendChild(tr);
}

function delRow(button){
    var tr=button.parentElement.parentElement;
    if(confirm("确定删除这条数据？")){
        tr.remove();
    }
}


function editRow(button){
    var tr=button.parentElement.parentElement;

    var name=tr.cells[0];
    var phone=tr.cells[1];

    var newName=prompt("请输入姓名");
    var newPhone=prompt("请输入手机号码：");

    if(newName && newPhone){
        tr.cells[0].innerText=newName;
        tr.cells[1].innerText=newPhone;
    }
}

环境搭建，初始化项目；
理解数据双向绑定；
自定义组件传参；
生命周期；
路由管理；
pinia；
快速上手elementui-plus

开发一个简单的登录页面，然后完成一个页面表格，使用elementui-plus

1.使用脚手架构建vue项目

npm init vue@latest

2.配置npm镜像源

阿里云镜像源

https://registry.npmmirror.com

修改镜像源

npm config set registry https://registry.npmmirror.com

3.启动项目，安装依赖

npm install

npm run dev//启动项目

npm run build//打包项目

4.项目目录

一般修改src目录。

可以在这下面创建page目录，用于存放自己的vue页面。

可以创建types，用来存放ts文件。

可以创建store目录，用来存放store文件。

main.ts，项目启动文件；
package.json，配置文件，有依赖和版本，和pom.xml差不多；

5.引入elementui-plus

npm install element-plus --save

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

6.根据脚手架完成一个简单的demo，熟悉前端的简单开发

简单的登录页面与信息收集

<script setup lang="ts">
import {reactive, ref} from 'vue'
  let account = ref("");
  let password = ref("");

  let userInfo= reactive({
    name:"",
    sex:1,
    weight:0,
    height:0
  })
</script>

<template>
  <div>
    账号：<input type="text" placeholder="请输入账号" v-model="account"> {{ account }}<br>
    密码：<input type="password" placeholder="请输入密码" v-model="password"> {{ password }} <br>
    <hr>
    <p>个人信息</p>
    <div>
      姓名：<input type="text" v-model="userInfo.name"><br>
      性别：
      <input type="radio" name="gender" v-model="userInfo.sex" value="1" id="man">
      <label for="man">男</label>

      <input type="radio" name="gender" v-model="userInfo.sex" value="0" id="woman">
      <label for="woman">女</label>
      <br>
      体重：<input type="number" v-model="userInfo.weight" placeholder="单位是kg"> <br>
      身高：<input type="number" v-model="userInfo.height" placahodler="单位是cm"><br>
      信息汇总<p>{{ userInfo }}</p>  
    </div>
  </div>

</template>

<style scoped>

</style>

posted @ 2026-07-26 22:14 alij 阅读(2) 评论(0) 收藏举报

刷新页面返回顶部

alij

前端学习-cnblog

公告