鸿蒙简介以及鸿蒙ToDoList

1. 组件（Component）是构建页面的核心，每个组件通过对数据和方法的简单封装，实现独立的可视、可交互功能单元。组件之间相互独立，随取随用，也可以在需求相同的地方重复使用。

基础组件	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

TODO  LIST

export default{
    data:{
    },
    clickfunc: function(){
        ......
    }
}

import todoList from "../../common/datas/todoList.js"
export default {
    data: {
        // 待办事件列表
        todoList,
        inputTodo: "IDE无法调用输入"
    },
    computed: {
        needTodoNum(){
            let num = 0;
            this.todoList.forEach(item => {
                if(!item.status){
                    num++;
                }
            });
            return num;
        }
    },
    remove(index){
        console.log(index)
        this.todoList.splice(index,1)
    },
    addTodo() {
        console.log("在这里设置一个新值");
        this.todoList.push({
            info:'键盘输入',
            status: false
        })
    },
    checkStatus(index){
        console.log(index);
        this.todoList[index].status = !this.todoList[index].status;
    }
}

PS：需要注意的是 Prview 预览模拟器在 MAC 上无法接收键盘输入的内容，但是在真机模拟器上是正常的。我们使用一个日期选择器来模拟输入，在鸿蒙 JS 系统上没有 双向数据绑定，需要我们自行实现双向数据绑定。

<picker type="date" onchange="dateChange">{{date}}</picker>

export default {
    data: {
        date:'请选择日期'
    },
    dateChange(e){
        console.log(JSON.stringify(e))
        this.date = e.year + "年" + e.month + "月" + e.day + "日"
    }
};

1. 页面结构使用 HTML 相同的标签进行嵌套，最外层是 div 容器。
2. 文本内容放在<text>标签中才能呈现，否则不会呈现文本内容。
3. 可以直接调用 鸿蒙 JS 封装好的 组件，这里我们使用的是 switch 组件。
4. 页面 CSS 支持 id、class、tag 选择器，建议使用 class 选择器。
5. 页面样式系统基于 flex 弹性布局进行设置，默认就是 flex 弹性布局，需要注意，弹性布局会自动的拉升和压缩内部元素模块宽度、高度。
6. 鸿蒙封装的 JS 组件，有一个专门的样式说明，这个和我们传统的 CSS 写法有很大的差异，这个尤其需要注意。
7. 第三方 JSON 数据导入，注意使用相对路径

8. 数据绑定

   与vue用法类似

   hml {{ 变量名 }}

   js 变量放在 data 中

9. export default{
       data:{
           变量名： value
       }
   }

10. 列表渲染（for)

    tid 属性指定数组中每个元素的唯一标识，默认值为 id，用于加速for循环的重渲染。

    写法1（都不指定）：<div for="{{array}}" tid='id'></div> ,$idx代表元素索引，$item代表数组元素

    写法2（指定元素名称）：<div for="{{value in array}}" tid='id'></div>，$idx 代表元素索引，value 代表数组元素

    写法3（指定索引和元素名称）：<div for="{{(index,value) in array}}" tid='id'></div> ，index代表元素索引，value代表数组元素。

11. 事件绑定

    类似 v-on，在 js 中绑定的函数和 data 同级

    hml：<div onclick="clickfunc"></div> 或 <div @click="clickfunc"></div>

    js： 放在 data 后:

12. 使用计算属性 computed 和 Vue 中的用法一样，依赖 data 中的数据进行计算，return 返回计算的结果。