HTML脚本标签中的Petite-vue Init属性
Posted
技术标签:
【中文标题】HTML脚本标签中的Petite-vue Init属性【英文标题】：Petite-vue Init attribute in HTML script tag 【发布时间】：2021-09-15 04:37:56 【问题描述】：我最近在 Twitter 上看到了 Evan You 的 Vue.jssn-p，我不明白 script 标签中的 init 属性是做什么的。我在 MDN 或类似网站上找不到任何关于此的内容。
defer 属性我很清楚。
<script src="https://unpkg.com/petite-vue" defer init></script>
<!-- anywhere on the page -->
<div v-scope=" count: 0 ">
count
<button @click="count++">inc</button>
</div>
【问题讨论】：
【参考方案1】：Usage 部分的 repo 自述文件中对此进行了解释：
init属性告诉petite-vue自动查询和初始化页面上所有具有v-scope的元素。
根据code snippet，它是一个自定义属性，如果存在脚本标签，它用于挂载应用程序：
let s
if ((s = document.currentScript) && s.hasAttribute('init'))
createApp().mount()
【讨论】：
【参考方案2】：正如@Boussadjra Brahim 提到的，init 是一个自定义属性，用于在petite-vue 中挂载应用程序。
除此之外，如果不想自动初始化，去掉init属性，把脚本移到<body>的末尾
<script src="https://unpkg.com/petite-vue"></script>
<script>
PetiteVue.createApp().mount()
</script>
或者，使用 ES 模块构建：
<script type="module">
import createApp from 'https://unpkg.com/petite-vue?module'
createApp().mount()
</script>
更多信息请参考：Docs
【讨论】：
【参考方案3】：petite-vue repo 上的 README 文件中的 init 属性指示 petite-vue 在页面加载时立即查找并初始化该页面上所有具有 v-scope 属性的元素。
但是，您可以通过省略 init 属性来手动初始化 petite-vue，并确保您正在初始化 petite-vue 的脚本标签位于主体标签 <body> 的末尾，然后按照有关初始化的文档进行操作步骤。
https://github.com/vuejs/petite-vue#manual-init
【讨论】：
以上是关于HTML脚本标签中的Petite-vue Init属性的主要内容，如果未能解决你的问题，请参考以下文章