【愚公系列】2022年01月 华为鸿蒙OS-02-页面语法的使用（JS开发版）

<div class='container'>
    <text> 我是变量:{{title}}text>
    <text> 我是数组:{{arr[0]}}-----{{arr[1]}}text>
    <text> 我是对象: 姓名 :{{obj.name}}text>
    <text> 我是对象: 年龄 :{{obj.age}}text>
div>

export default {
    data: {
        title:"模板语法",
        arr: ['001','002'],
        obj:{name:'愚公',age:30}
    },
}

<div class="container">
    <text class="title">计数器：{{count}}text>
    <div class="box">
        <button class='btn' onclick="increase">
            加
        button>
        <button class='btn' @click="decrease">
            减
        button>
        <button class='btn' @click="multiply(2)">
            乘2
        button>
        <button class='btn' @click="multiply(10)">
            乘10
        button>
        <button class='btn' @click="multiply(count)">
            乘计数器
        button>
    div>
div>

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

<div>
   
    <div on:touchstart.bubble="touchstartfunc">div>
    <div on:touchstart="touchstartfunc">div>
    
    <div grab:touchstart.bubble="touchstartfunc">div>
    <div grab:touchstart="touchstartfunc">div>
    
    <div on:click.bubble="clickfunc">div>
    <div on:click="clickfunc">div>
    
    <div grab:click.bubble="clickfunc">div>
    <div grab:click="clickfunc">div>
div>

export default {
    clickfunc: function(e) {
        console.log(e);
    },
    touchstartfuc: function(e) {
        console.log(e);
    },
}

<div>
    <!-- 使用事件捕获模式绑定事件回调函数。5+ -->
    <div on:touchstart.capture="touchstartfunc"></div>
    <!-- 绑定事件回调函数，但阻止事件向下传递。5+ -->
    <div grab:touchstart.capture="touchstartfunc"></div>
</div>

export default {
    touchstartfuc: function(e) {
        console.log(e);
    },
}

<div  on:touchstart.capture="capture1"  on:touchstart.bubble="bubble1">
    <div on:touchstart.capture="capture2"  on:touchstart.bubble="bubble2">
        <text on:touchstart.capture="capture3"  on:touchstart.bubble="bubble3">测试text>
    div>
div>

export default {
    capture1(){
        console.log("capture1")
    },
    capture2(){
        console.log("capture2")
    },
    capture3(){
        console.log("capture3")
    },
    bubble1(){
        console.log("bubble1")
    },
    bubble2(){
        console.log("bubble2")
    },
    bubble3(){
        console.log("bubble3")
    }
};

<div class="container">
    
    
    <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>

export default {
    data: {
        array: [
            {id: 1, name: '愚公', age: 30},
            {id: 2, name: '愚婆', age: 20},
        ],
    },
    changeText: function() {
        if (this.array[1].name === "愚公"){
            this.array.splice(1, 1, {id:2, name: '愚小一', age: 18});
        } else {
            this.array.splice(2, 1, {id:3, name: '愚小二', age: 15});
        }
    },
}

<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="{{visible}}"> 我是if-1 text>
    <text elif="{{display}}"> 我是if-2 text>
    <text else> 我是if-3 text>
    
    <button class="btn" type="capsule" value="toggle" onclick="toggle">button>
    <text show="{{visibleShow}}" >我是showtext>
div>

export default {
    data: {
        visible: false,
        display: true,
        visibleShow:false,
    },
    toggleShow: function() {
        this.visible = !this.visible;
    },
    toggleDisplay: function() {
        this.display = !this.display;
    },
    toggle: function() {
        this.visibleShow = !this.visibleShow;
    },
}

<list>
    <block for="glasses">
        <list-item type="glasses">
            <text>{{$item.name}}text>
        list-item>
        <block for="$item.kinds">
            <list-item type="kind">
                <text>{{$item.name}}text>
                <text>{{$item.color}}text>
            list-item>
        block>
    block>
list>

export default {
    data: {
        glasses: [
            {name:'销售系统', kinds:[{name:'订单管理',color:'001'},{name:'产品管理',color:'002'}]},
            {name:'财务系统', kinds:[{name:'成本会计',color:'003'}]},
        ],
    },
}

<div class="item"> 
  <text>Name: {{name}}text>
  <text>Age: {{age}}text>
div>

<element name='comp' src='../../common/template.hml'>element>
<div>
    <comp name="愚公" age="30">comp>
div>

@import '../../common/style.css';
.container {
  justify-content: center;
}

import router from '@system.router';

import utils from '../../common/utils.js';

//获取app.js对象
this.$app.$def

export default {
  data: {
    keyMap: {
      OS: 'HarmonyOS',
      Version: '2.0',
    },
  },
  getAppVersion() {
    this.$set('keyMap.Version', '3.0');
    console.info("keyMap.Version = " + this.keyMap.Version); // keyMap.Version = 3.0

    this.$delete('keyMap');
    console.info("keyMap.Version = " + this.keyMap); // log print: keyMap.Version = undefined
  }
}

 <image-animator class="image-player" ref="animator" images="{{images}}" duration="1s" onclick="handleClick">image-animator>
 <image-animator class="image-player" id="animator" images="{{images}}" duration="1s" onclick="handleClick">image-animator>

const animator = this.$refs.animator; // 获取ref属性为animator的DOM元素
const animator = this.$element('animator'); // 获取id属性为animator的DOM元素

<element name='parentComp' src='../../common/component/parent/parent.hml'>element>
<div>
  <parentComp>parentComp>
div>

export default {
  data: {
    text: 'I am root!',
  },
}

<element name='childComp' src='../child/child.hml'>element>
<div>
  <childComp id = "selfDefineChild">childComp>
div>

console.info(`${this.$parent().text}`);//获取主视图的text
console.info(`${this.$child('selfDefineChild').childClicked()}`);//获取指定id子视图的方法

<div class="item" onclick="textClicked">
  <text class="text-style" onclick="childClicked">child component clickedtext>
div>

export default {
  data: {
    text: 'I am child component!',
  },
  childClicked () {
    console.info(`${this.$parent().text}`);//获取父视图
    console.info(`${this.$root().text}`);//获取顶级视图
  },
}