要素
#
Stipple.Elements.root
— Function
function root(app::M)::String where {M<:ReactiveModel}
生成一个有效的 JavaScript 对象名称,作为 Vue 应用程序及其相应 HTML 容器的名称。
#
Stipple.Elements.elem
— Function
function elem(app::M)::String where {M<:ReactiveModel}
生成包含 Vue 应用程序模板的 DOM 元素的 JS id`#` 引用。
#
Stipple.Elements.vm
— Function
function root(app::M)::String where {M<:ReactiveModel}
生成一个有效的 JavaScript 对象名称,作为 Vue 应用程序及其相应 HTML 容器的名称。
#
Stipple.Elements.vue_integration
— Function
function vue_integration(model::M; vue_app_name::String, endpoint::String, debounce::Int)::String where {M<:ReactiveModel}
生成 JS/Vue.js 代码,用于处理 Julia 和 JavaScript/Vue.js 之间的双向数据同步。它由`Stipple.init` 内部调用,允许配置所有参数。
#
Stipple.Elements.@if
— Macro
@if(expr)
使用`expr` 作为条件,生成`v-if` Vue.js 代码。https://vuejs.org/v2/api/#v-if。
示例
julia> span("Bad stuff's about to happen", class="warning", @if(:warning))
"<span class="warning" v-if='warning'>Bad stuff's about to happen</span>"
#
Stipple.Elements.@elseif
— Macro
@elseif(expr)
使用`expr` 作为条件,生成`v-else-if` Vue.js 代码。https://vuejs.org/v2/api/#v-else-if。
示例
julia> span("An error has occurred", class="error", @elseif(:error))
"<span class="error" v-else-if='error'>An error has occurred</span>"
#
Stipple.Elements.@else
— Macro
@else(expr)
使用`expr` 作为条件,生成`v-else` Vue.js 代码。https://vuejs.org/v2/api/#v-else。
示例
julia> span("Might want to keep an eye on this", class="notice", @else(:notice))
"<span class="notice" v-else='notice'>Might want to keep an eye on this</span>"
#
Stipple.Elements.@for
— Macro
生成`v-for` 指令,根据数组渲染项目列表。 https://vuejs.org/v2/guide/list.html#Mapping-an-Array-to-Elements-with-v-for
@for
既支持字符串形式的 js 表达式,也支持包含向量或字典的 Julia 表达式
示例 Javascript
julia> p(" {{todo}} ", class="warning", @for("todo in todos"))
"""
<p v-for='todo in todos'>
{{todo}}
</p>
"""
Julia expression
julia> dict = Dict(:a => "b", :c => 4);
julia> ul(li("k: {{ k }}, v: {{ v }}, i: {{ i }}", @for((v, k, i) in dict)))
"""
<ul>
<li v-for="(v, k, i) in {'a':'b','c':4}">
k: {{ k }}, v: {{ v }}, i: {{ i }}
</li>
</ul>
"""
请注意,与 Stipple 重组相比,值、键和索引的顺序颠倒了。也可以在`(v, k)` 或`v` 上循环;索引始终为零
#
Stipple.Elements.@text
— Macro
@text(expr)
为元素的`textContent` 属性创建`v-text` 或`text-content.prop` Vue biding。 https://vuejs.org/v2/api/#v-text
示例
julia> span("", @text("abc | def"))
"<span :text-content.prop='abc | def'></span>"
julia> span("", @text("abc"))
"<span v-text='abc'></span>"
#
Stipple.Elements.@bind
— Macro
@bind(expr, [type])
将模型参数绑定到 Vue 组件,生成`v-model` 属性,可选择定义参数类型。 https://vuejs.org/v2/api/#v-model
示例
julia> input("", placeholder="Type your name", @bind(:name))
"<input placeholder="Type your name" v-model='name' />"
julia> input("", placeholder="Type your name", @bind(:name, :identity))
"<input placeholder="Type your name" v-model.identity='name' />"
#
Stipple.Elements.@data
— Macro
@data(expr)
为需要的元素创建 Vue.js 数据绑定。
示例
julia> plot(@data(:piechart), options! = "plot_options")
"<template><apexchart :options="plot_options" :series="piechart"></apexchart></template>"
#
Stipple.Elements.@on
— Macro
on(action, expr)
定义一个 js 例程,由 Vue 组件的给定`action` 调用,例如`:click` 、:input
示例
julia> input("", @bind(:input), @on("keyup.enter", "process = true"))
"<input v-model='input' v-on:keyup.enter='process = true' />"
如果`expr` 是一个符号,则必须存在`Stipple.notify` 覆盖,即为名称为`expr` 的相应事件设置一个事件处理函数。
示例
julia> Stipple.notify(model, ::Val{:my_click}) = println("clicked")
或需要事件信息
Stipple.notify(model, ::Val{:my_click}, event_info) = println(event_info)
请注意,在处理程序中`model` 指的是接收模型,而事件是事件信息的 Dict。处理程序与 ui-element 中的
btn("Event test", @on("click", :my_click))
有时需要对事件进行预处理,例如添加或跳过信息
@on(:uploaded, :uploaded, "for (f in event.files) { event.files[f].fname = event.files[f].name }")
#
Stipple.Elements.@showif
— Macro
@showif(expr, [type])
v-show 将始终呈现并保留在 DOM 中;v-show 只切换元素的显示 CSS 属性。https://vuejs.org/v2/guide/conditional.html#v-show
使用 @showif 和 @iif 时的区别
v-if 的切换成本较高,而 v-show 的初始呈现成本较高
示例
julia> h1("Hello!", @showif(:ok))
"<h1 v-show="ok">Hello!</h1>"
#
Stipple.Elements.stylesheet
— Function
function stylesheet(href::String; args...) :: String
生成相应的 HTML`link` 标记,以引用`href` 中的 CSS 样式表。
示例
julia> stylesheet("https://fonts.googleapis.com/css?family=Material+Icons")
"<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet" />"