HarmonyOS应用开发第一次作业笔记_鸿蒙记事本作业-CSDN博客

本文链接：https://blog.csdn.net/m0_61507413/article/details/125240133

1、根据P6视频做出做出记事本删除添加案例

export default {
    data: {
        todoList:[
         {
            info:'给老王打个电话',
            status : true
        },
        {
            info:'输出工作计划',
            status : false
        },
        {
            info:'和小王对接需求',
            status : true
        },
        {
            info:'整理客户资料',
             status : false
        },
         {
             info: '和朋友一起聚餐',
             status: false
         }
        ]
    },
    onInit() {
        this.title = this.$t('strings.world');
    },
    remove(index){
    console.log(index)
    this.todoList.splice(index,1);
    },
    switchChange(index){
    this.todoList[index].status = !this.todoList[index].status
    },
    addTodo(){
        this.todoList.push({
            info: 'IDE工具无法监听键盘输入',
            status: false
            })
    },
    computed :{
        todocount(){
            let num =0;
            this.todoList.forEach(element => {
                if( !element.status){
                    num++
                }
        });
        return num
        }
    }
}

.container {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-bottom : 100px;
}
.title {
    font-size: 25px;
    margin-top: 20px;
    margin-bottom: 20px;
    color: #000000;
    opacity: 0.9;
    font-size: 28px;
}
.item {
    width: 325px;
    padding: 10px 0;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    border-bottom: 1px solid #eee;
}
.todo {
    color: #000;
    width: 180px;
    font-size: 18px;
}
.switch{
    font-size: 12px;texton-color: green;textoff-color : red;text-padding : 5px;width: 100px;
    height: 24px;
    allow-scale: false;
}
.remove {
    font-size: 12px;
    margin-left: 10px;
    width: 50px;
    height: 22px;
    color: #fff;
    background-color: red;
}
.info {
    width: 100%;
    margin-top: 10px;
    justify-content: center;
}
.info-text{
    font-size: 18px;
    color: #AD7A1B;
}
.info-num {
    color: orangered;
    margin-left: 10px;
    margin-right: 18px;
}
.add-todo {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 108%;
    height: 68px;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    background-color: #ddd;
}
.plan-input{
    width: 248px;height: 40px;
    background-color : #fff;
}
.plan-btn {
    width: 90px;
    height: 35px;
    font-size: 15px;
}

<div class="container">
    <text class="title">待办事项</text>
    <div class="item" for="{{todoList}}">
        <text class="todo">{{$item.info}}</text>
        <switch showtext="true" checked="{{$item.status}}"
            texton="完成" textoff="待办"
            class="switch"
            @change="switchChange($idx)"></switch>
        <button class="remove" @click="remove($idx)">删除</button>
    </div>
    <div class="info">
        <text class="info-text">您还有</text>
        <text class="info-num">{{todocount}}</text>
        <text class="info-text">件事情待办，加油! </text>
    </div>
    <div class="add-todo">
        <input class="plan-input" type="text"></input>
        <button class="plan-btn" onclick="addTodo" @click="addTodo">添加待办</button>
    </div>
</div>

2.目录

JS FA 应用的 JS 模块 (entry/src/main/js/module) 的典型开发目录结构如下：

目录结构中文件分类如下：

.hml 结尾的 HML 模板文件，这个文件用来描述当前页面的文件布局结构。
.css 结尾的 CSS 样式文件，这个文件用于描述页面样式。
.js 结尾的 JS 文件，这个文件用于处理页面和用户的交互。

各个文件夹的作用：

app.js 文件用于全局 JavaScript 逻辑和应用生命周期管理。
pages 目录用于存放所有组件页面。
common 目录用于存放公共资源文件，比如：媒体资源和 JS 文件。
i18n 目录用于配置不同语言场景资源内容，比如：应用文本词条，图片路径等资源，注意 i18n 是开发保留文件夹，不可重命名。

3.组件

组件（Component）是构建页面的核心，每个组件通过对数据和方法的简单封装，实现独立的可视、可交互功能单元。组件之间相互独立，随取随用，也可以在需求相同的地方重复使用。
鸿蒙 JS API 提供了完善的组件介绍，详细情况我们去查阅一下官方文档：组件 - 官方介绍
根据组件的功能，可以分为以下四大类：

组件类型	主要组件
基础组件	text、image、progress、rating、span、marquee、`image-animator`、`divider`、search、menu、`chart`
容器组件	div、list、list-item、stack、swiper、tabs、tab-bar、tab-content、list-item-group、refresh、dialog
媒体组件	video
画布组件	canvas