组件指令

在网络开发和 Vue.js、Angular 或类似框架中，指令是标记中的一个特殊标记，用于告诉库或框架对页面中的某个元素进行操作。指令是以特殊字符或关键字为前缀的扩展 HTML 属性，通常是一个符号，如 Vue.js 中的 v- 或 Angular 中的 ng-。它们将反应行为应用于 DOM，甚至可以转换 DOM 元素及其子元素。

Vue.js 指令是`v-` 类型的参数，如`v-if` 或`v-on` 。在 stipple 中，这些参数通过宏`@click` 、@on 、@iif 、@els 、@elsiif 、@recur 、@text 、@bind 、@data 和`@showif` 来实现。每个宏都提供了一种在用户界面代码中通过生成等效 HTML 来操作组件的方法：

julia> span(@showif(true))
"<span v-show=\"true\"></span>"

julia> span(@click(:mybutton))
"<span v-on:click=\"mybutton = true\"></span>"

julia> span(@click("process = !process"))
"<span v-on:click=\"process = !process\"></span>"

请注意，如果指令使用字符串参数，其内容必须是有效的 Javascript 代码。

使用`@recur`

@recur 宏用于在列表上循环生成 UI 组件。该宏添加了一个`for` 循环，对指定的列表进行迭代。在每次迭代中，嵌套组件将根据循环变量的当前值进行评估。

module App
using GenieFramework
@genietools

@app begin
    @out messages = ["msg1", "msg2", "msg3"]
end

function ui()
    row([card(style="margin: 10px;", @recur("msg in messages"), [
        p("{{msg}}")
    ]),])
end
@page("/", ui)
end

在本例中，@recur 宏用于遍历`messages` 列表。对于列表中的每条信息，都会创建一个包含信息内容的段落 (p) 组件。这样就形成了一排卡片，每张卡片包含一个段落，其中有一条信息。

当您需要根据数据列表生成大量类似组件时，@recur 宏特别有用。它可以让您避免重复代码，使您的应用程序更具可维护性和可扩展性。

使用`@showif`

@showif 宏用于根据反应式变量的状态有条件地呈现用户界面中的元素。您可以将其与按钮一起使用，在用户界面中切换显示元素：

@app begin
    @in show_element = false
end

function ui()
    [
        btn("Toggle Element", @click("show_element =! show_element")),
        div("This is a hidden element", @showif("show_element"))
    ]
end

在本例中，点击 "切换元素 "按钮将切换`show_element` 反应变量的状态，进而切换 div 元素的可见性。当`show_element` 为`true` 时，div 将是可见的；当`show_element` 为`false` 时，div 将被隐藏。