客户端渲染的Vue界面
在vuet渲染模式中(在自带应用中的/vapps下),XML页面一般混合使用客户端和服务端渲染。页面也能用一个VueJS组件(.js文件)和一个嵌入或分离的Vue模板(.vuet文件)来以100%客户端渲染的方式搭建。
这有一个页面定义的例子。
摘抄如下:
<screen xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="http://moqui.org/xsd/xml-screen-2.1.xsd"
default-menu-title="Dynamic Items" default-menu-index="9" render-modes="js,vuet" server-static="js,vuet">
<!-- 省略部分内容 -->
<widgets>
<render-mode>
<text type="js" location="component://example/screen/ExampleApp/Example/DynamicExampleItems/ExampleItems.js"/>
<text type="vuet" location="component://example/screen/ExampleApp/Example/DynamicExampleItems/ExampleItems.vuet"/>
</render-mode>
</widgets>
</screen>
与一般的XML页面相比,最重要的区别是:
- 使用screen render-moders="js.vuet" 属性来告诉WebrootVue路由和页面加载器:这个页面支持js和vuet渲染模式;对于用嵌入式模板而不是分离的文件的Vue组件,只是"js"而不是"js,vuet"。
- 如果.js和.vuet文本是服务器上的静态内容,即不是一个FTL或其他模板,可以用server-static="js,vuet"属性告诉WebrootVue页面加载器它可以缓存。
在 screen.widgets元素下,有一个单个的render-mode元素,带一个type="js"和另一个type="vuet"的text元素(因为有一个分离的Vue模板文件)。
这里是 .js 和 .vuet 文件的链接: ExampleItems.js ExampleItems.vuet
这是一个非常简单的有一个添加表单和条目列表的例子。这个添加表单演示了vue组件的数据绑定和在浏览器中处理表单提交的方法。条目列表演示了遍历用jQuery.ajax()调用从服务器加载的一个列表。
用这种实现,页面在WebrootVue根组件的上下文中运行,WebrootVue处理路由和多种其他的事情。如同标准的VueJs能在其他组件中用this.$root引用,在此例中.js脚本从WebrootVue组件中的currentParameters对象获得exampleId参数。
this.exampleId = this.$root.currentParameters.exampleId;
也能使用在Moqui的vuet模板中使用的Vue组件,例如在例子中使用的drop-down组件(它支持用v-model属性进行数据绑定)。