客户端渲染的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属性进行数据绑定）。