一、js的语法
初步上手感觉鸿蒙的语法和小程序相似，又结合了vue的语法糖，加上可以使用ES6的语法，更加丝滑
二、项目的目录结构
三、数据绑定
html
<div onclick="changeText"> <text> {{content[1]}} </text> </div>
js
export default { data: { content: ['Hello World!', 'Welcome to my world!'] }, changeText: function() { this.content.splice(1, 1, this.content[0]); } }
四、普通事件绑定
事件通过'on'或者'@'绑定在组件上，当组件触发事件时会执行JS文件中对应的事件处理函数。
事件支持的写法有：
- "funcName"：funcName为事件回调函数名（在JS文件中定义相应的函数实现）。
- "funcName(a,b)"：函数参数例如a，b可以是常量，或者是在JS文件中的data中定义的变量（前面不用写this.）。 html
<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>
js
export default { data: { count: 0 }, increase() { this.count++; }, decrease() { this.count--; }, multiply(multiplier) { this.count = multiplier * this.count; } };
五、列表渲染
html
<div class="array-container"> <!-- div列表渲染 --> <!-- 默认$item代表数组中的元素, $idx代表数组中的元素索引 --> <div for="{{array}}" tid="id" onclick="changeText"> <text>{{$idx}}.{{$item.name}}</text> </div> <!-- 自定义元素变量名称 --> <div for="{{value in array}}" tid="id" onclick="changeText"> <text>{{$idx}}.{{value.name}}</text> </div> <!-- 自定义元素变量、索引名称 --> <div for="{{(index, value) in array}}" tid="id" onclick="changeText"> <text>{{index}}.{{value.name}}</text> </div> </div>
js
export default { data: { array: [ {id: 1, name: 'jack', age: 18}, {id: 2, name: 'tony', age: 18}, ], }, changeText: function() { if (this.array[1].name === "tony"){ this.array.splice(1, 1, {id:2, name: 'Isabella', age: 18}); } else { this.array.splice(2, 1, {id:3, name: 'Bary', age: 18}); } }, }
tid属性主要用来加速for循环的重渲染，旨在列表中的数据有变更时，提高重新渲染的效率。tid属性是用来指定数组中每个元素的唯一标识，如果未指定，数组中每个元素的索引为该元素的唯一id。例如上述tid="id"表示数组中的每个元素的id属性为该元素的唯一标识。for循环支持的写法如下：
- for="array"：其中array为数组对象，array的元素变量默认为$item。
- for="v in array"：其中v为自定义的元素变量，元素索引默认为$idx。
- for="(i, v) in array"：其中元素索引为i，元素变量为v，遍历数组对象array。
数组中的每个元素必须存在tid指定的数据属性，否则运行时可能会导致异常。 数组中被tid指定的属性要保证唯一性，如果不是则会造成性能损耗。比如，示例中只有id和name可以作为tid字段，因为它们属于唯一字段。 tid不支持表达式。
六、条件渲染
条件渲染分为2种：if/elif/else和show。两种写法的区别在于：第一种写法里if为false时，组件不会在vdom中构建，也不会渲染，而第二种写法里show为false时虽然也不渲染，但会在vdom中构建；另外，当使用if/elif/else写法时，节点必须是兄弟节点，否则编译无法通过。如
html
<div class="container"> <button class="btn" type="capsule" value="toggleShow" onclick="toggleShow"></button> <button class="btn" type="capsule" value="toggleDisplay" onclick="toggleDisplay"></button> <text if="{{show}}"> Hello-TV </text> <text elif="{{display}}"> Hello-Wearable </text> <text else> Hello-World </text> </div>
js
export default { data: { show: false, display: true, }, toggleShow: function() { this.show = !this.show; }, toggleDisplay: function() { this.display = !this.display; } }
优化渲染优化：show方法。当show为真时，节点正常渲染；当为假时，仅仅设置display样式为none。
html
<div class="container"> <button class="btn" type="capsule" value="toggle" onclick="toggle"></button> <text show="{{visible}}" > Hello World </text> </div>
js
export default { data: { visible: false, }, toggle: function() { this.visible = !this.visible; }, }
禁止在同一个元素上同时设置for和if属性。
