Harmony在线教育app平台开发开发日志——day3

1.JS UI框架

1.框架结构‘
其主要包含四层框架

HarmonyOS中的JS UI框架采用的是单向数据流的操作

2.HML，CSS，JS复习

这里为大家介绍先介绍一个学习html，css，js的一个网址菜鸟教程

菜鸟教程中都有对html各类命令的操作以及操作的实例，这里就不在一个一个的叙述
下面是我根据视频对前端进行的一个小的修改尝试

<div class="container">    <text class="title"> {{ $t('strings.hello') }} {{ title }}    </text>    <text>{{msg}}</text>    <text>{{hobby[0]}}:{{hobby[1]}}</text>    <text>student age is {{student.age}}</text><text>student name is  {{student.name}}</text><text>student sex is{{student.sex}}</text></div>

export default {    data: { title: "", msg:"this is my message", hobby:["play","reading"], student:{      name:"张三",      age:18,      sex:"男" }    },    onInit() { this.title = this.$t('strings.world');    }}

2.普通事件绑定

/* xxx.css */.container {    display: flex;    flex-direction: column;    justify-content: center;    align-items: center;    left: 0px;    top: 0px;    width: 454px;    height: 454px;}.title {    font-size: 30px;    text-align: center;    width: 200px;    height: 100px;}.box {    width: 454px;    height: 200px;    justify-content: center;    align-items: center;    flex-wrap: wrap;}.btn {    width: 200px;    border-radius: 0;    margin-top: 10px;    margin-left: 10px;}

/* xxx.js */export default {    data: { count: 0    },    increase() { this.count++;    },    decrease() { this.count--;    },    multiply(multiplier) { this.count = multiplier * this.count;    }}

<div class="container">    <text class="title">{{count}}</text>    <div class="box"> <input type="button" class="btn" value="increase" onclick="increase" /> <input type="button" class="btn" value="decrease" @click="decrease" />     <input type="button" class="btn" value="double" @click="multiply(2)" /> <input type="button" class="btn" value="decuple" @click="multiply(10)" /> <input type="button" class="btn" value="square" @click="multiply(count)" />    </div></div>

其他的几个案例不再一个一个的描述，每个案例都成功完成
其中css与js的内容我在菜鸟教程进行了学习，并完成了视频的观看

3.生命周期（这里只是简单的进行了了解，等后期会单独进行生命周期的学习）

页面生命周期

China香烟网