我正在使用Orckestra CMS(在Composite之前)和Razor Templates进行 asp.net 工作,并尝试使用Vue框架。
使用 {{option.text}} 时一切正常
<select class="form-control" id="myExample1">
<option v-for="option in options">{{option.text}}</option>
</select>
但是当我插入 v-bind 属性时,页面已损坏:
<select class="form-control" id="myExample1">
<option v-for="option in options" v-bind:value="option.value">{{option.text}}</option>
</select>
呈现页面失败并显示"错误:"v-bind"是未声明的前缀。
也许为时已晚,但对于那些搜索的人来说,我从这里找到了很好的解决方案:
格式正确的 XML 不能使用
:
和@
快捷方式进行v-bind:
和v-on:
.在 XML 中,这些属性被解释为命名空间名称。要在 XML 中使用
v-bind:
和v-on:
语法(例如 XSLT 文件),请添加这些作为 XML 中的虚拟命名空间,例如<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:v-bind="https://vuejs.org/v2/api/#v-bind" xmlns:v-on="https://vuejs.org/v2/api/#v-on">
然后将虚拟
<html>
xmlns:v-bind
添加到输出 – 否则定义将在任何地方重复。
v-bind
可以在没有:
的情况下绑定,如下所示:
<option v-for="option in options" v-bind="{value: option.value}">{{option.text}}</option>
等于
<option v-for="option in options" v-bind:value="option.value">{{option.text}}</option>
参见 Vue.js#v-bind
正如这把小提琴所显示的那样,vuejs 不是问题。Razor 模板引擎不知道命名空间v-bind:
,只有 :
是无效的 xml。你需要告诉模板引擎关于 vuejs 的命名空间。这是另一篇关于将自定义命名空间添加到 Razor 模板引擎的堆栈溢出文章。
已解决:问题是XHTML验证,对标签,属性等非常严格。
对此验证进行排序的方法是在< ![CDATA[ "blablabla" ]]>
<select class="form-control" id="myExample1">
<![CDATA[
<option v-for="option in options" v-bind:value="option.value">{{option.text}}</option>
]]>
</select>