CML模板语言协议

CML支持两种语法，在模板template标签中声明 lang属性即可

声明模板中用 cml 语法

<template lang="cml"> </template>

声明模板中用类 vue 的语法

<template lang="vue"> </template>

如果不声明的话默认就是cml语法

CML语法协议

数据绑定

模板中的数据要使用 Mustache{{}}将变量包起来，可以作用于

标签内容

<view >{{message}}</view>

class Index{
  data = {
    message:"hello chameleon"
  }
}

组件属性

简单属性

<view id="item-{{id}}"></view>

class Index{
  data = {
    id:0
  }
}

控制属性

<view c-if="{{condition}}"></view>

运算：可以在 {{}}中进行简单的运算，支持如下几种形式

三元运算

<view class="{{true ? 'cls1':'cls2'}}"></view>

逻辑判断

<view c-if="{{length > 5}}"> </view>

字符串运算

<view >{{'hello' + name}} </view>

class Index{
  data = {
    name:'chameleon'
  }
}

数据路径运算

<view >{{object.key}} {{array[0]}}</view>

class Index{
  data = {
    object:{key:'Hello'},
    array:['Chameleon']
  }
}

组合

可以在 {{}}中直接写数组；

<view 
  c-for="{{[{name:'apple'},{name:'orange'}]}}">
  {{item.name}}
</view>

列表渲染

默认数组的当前项的下标变量名为 index,数组当前项的变量名为item

<view c-for="{{array}}">
{{index}}:{{item.message}}
</view>

class Index{
  data = {
    array:[{
      message:"foo",
    },{
      message:"bar",
    }]
  }
}

使用 c-for-item可以用来指定数组当前元素的变量名

使用c-for-index可以指定数组当前下标的变量名

<view c-for="{{array}}" c-for-item="itemName" c-for-index="idx">
{{idx}}:{{itemName.message}}
</view>

如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态

c-key 的值以两种形式提供

字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。 保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字，如： 当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

c-key等于item项中某个property

<view c-for="{{array}}" c-key="id">
</view>

class Index{
  data = {
    array:[{
      id:"foo",
    },{
      id:"bar",
    }]
  }
}

c-key等于关键字 *this

<view c-for="{{array}}" c-key="*this">
</view>

class Index{
  data = {
    array:[1,2,3]
  }
}

条件渲染

<view c-if="{{condition}}"></view>

结合c-else-if c-else

<view c-if="{{condition}}"></view>
<view c-else-if="{{condition}}"></view>
<view c-else></view>

事件绑定

c-bind表示可以冒泡的事件

<view c-bind:click="handleClick"></view>

class Index{
  methods = {
    handleClick(e){
      console.log(e)  //默认传递一个事件对象参数
    }
  }
}

c-catch表示阻止冒泡的事件

<view c-catch:click="handleClick"></view>

内联事件

内联事件可以直接传递参数，特殊的参数 $event代表事件对象参数

<view c-for="{{array}}" >
  <view c-bind:click="handleClick1(1,'string',item,index)"></view>
  <view c-bind:click="handleClick2(1,'string',item,index,$event)"></view>
</view>

class Index{
  data = {
    array:[{name:'apple'},{name:'orange'}]
  }
  methods = {
    handleClick1(...args){
      console.log(...args)
    }
    handleClick1(...args){
      console.log(...args)
    }
  }
}

类Vue语法协议

数据绑定

标签内容

模板中的标签内容中的变量要使用 Mustache{{}}包起来

<view >{{message}}</view>

class Index{
  data = {
    message:"hello chameleon"
  }
}

标签中的内容支持简单的运算

字符串运算

<view >{{'hello' + name}} </view>

class Index{
  data = {
    name:'chameleon'
  }
}

数据路径运算

<view >{{object.key}} {{array[0]}}</view>

class Index{
  data = {
    object:{key:'Hello'},
    array:['Chameleon']
  }
}

组件属性

简单属性

模板中组件属性中的变量要通过 :id="value"或者 v-bind:id="value"这种形式去使用。

<view :id="'item-'+id"></view>

class Index{
  data = {
    id:0
  }
}

控制属性

<view v-if="condition"></view>

列表渲染

v-for指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 （item,index) in items 形式的特殊语法，items 是源数据数组并且 item是数组元素迭代的别名,index是数组元素的下标

<view v-for="(item,index) in array">
{{index}}:{{item.message}}
</view>

class Index{
  data = {
    array:[{
      message:"foo",
    },{
      message:"bar",
    }]
  }
}

如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态

:key 的值以两种形式提供

<view v-for="(item,index) in array" :key="item.id">
</view>

class Index{
  data = {
    array:[{
      id:"foo",
    },{
      id:"bar",
    }]
  }
}

:key等于 数组元素

<view v-for="(item,index) in array" :key="item">
</view>

class Index{
  data = {
    array:[1,2,3]
  }
}

条件渲染

<view v-if="condition"></view>

结合v-else-if v-else

<view v-if="length < 5"></view>
<view v-else-if="length > 5"></view>
<view v-else></view>

class Index{
  data = {
    length:5
  }
}

事件绑定

@eventName或者 v-on:eventName 表示可以冒泡的事件

<view @click="handleClick"></view>

class Index{
  methods = {
    handleClick(e){
      console.log(e)  //默认传递一个事件对象参数
    }
  }
}

@eventName.stop或者v-on:eventName.stop表示阻止冒泡的事件

<view @click.stop="handleClick"></view>

内联事件

内联事件可以直接传递参数，特殊的参数 $event代表事件对象参数

<view v-for="(item,index) in array" >
  <view @click="handleClick1(1,'string',item,index)"></view>
  <view @click.stop="handleClick2(1,'string',item,index,$event)"></view>
</view>

class Index{
  data = {
    array:[{name:'apple'},{name:'orange'}]
  }
  methods = {
    handleClick1(...args){
      console.log(...args)
    }
    handleClick1(...args){
      console.log(...args)
    }
  }
}