无服务器渲染
QNoSsr 组件仅在创建 SSR 网站/应用时才有意义。
¥The QNoSsr component makes sense only if you are creating a SSR website/app.
它避免在服务器上渲染其内容,而只将其留给客户端。当你的代码非同构且只能在客户端(浏览器)运行时很有用。
¥It avoids rendering its content on the server and leaves that for client only. Useful when you got code that is not isomorphic and can only run on the client side, in a browser.
或者,你也可以使用它仅在服务器端渲染内容,如果它最终在客户端浏览器上运行,它会自动删除它。
¥Alternatively, you can also use it to render content only on server-side and it automatically removes it if it ends up running on a client browser.
用法(Usage)
¥Usage
基本(Basic)
¥Basic
<q-no-ssr>
<div>This won't be rendered on server</div>
</q-no-ssr>
content_paste
多个客户端节点(Multiple client nodes)
¥Multiple client nodes
<q-no-ssr>
<div>This won't be rendered on server.</div>
<div>This won't either.</div>
</q-no-ssr>
content_paste
带有标签属性的多个客户端节点(Multiple client nodes with tag prop)
¥Multiple client nodes with tag prop
<q-no-ssr tag="blockquote">
<div>This won't be rendered on server.</div>
<div>This won't either.</div>
</q-no-ssr>
content_paste
占位符属性(Placeholder property)
¥Placeholder property
<q-no-ssr placeholder="Rendered on server">
<div>This won't be rendered on server</div>
</q-no-ssr>
content_paste
占位符槽(Placeholder slot)
¥Placeholder slot
<q-no-ssr>
<div>This won't be rendered on server</div>
<template v-slot:placeholder>
<div>Rendered on server</div>
</template>
</q-no-ssr>
content_paste
占位符槽中的多个内容(Multiple content in placeholder slot)
¥Multiple content in placeholder slot
<q-no-ssr>
<div>This won't be rendered on server</div>
<template v-slot:placeholder>
<div>Rendered on server (1/2)</div>
<div>Rendered on server (2/2)</div>
</template>
</q-no-ssr>
content_paste
仅占位符(Only placeholder slot)
¥Only placeholder slot
<q-no-ssr>
<template v-slot:placeholder>
<div>Rendered on server</div>
</template>
</q-no-ssr>
content_paste