温州年丰文体 发表于 2024-6-29 00:30:15

petite-vue 基本使用指南

前言

petite-vue 是为渐进增强而优化的另一种 Vue 发行版。它提供与标准 Vue 相同的模板语法和反应性心智模型。
不过,它专门针对在由服务器框架呈现的现有 HTML 页面上“散布”少量交互进行了优化。
petite-vue,它在提供 vue 基本功能的同时,还能一个轻量级,简单应用的微框架,这样也能保证开发者有一个不错的使用体验。

[*]只有 ~6kb
[*]兼容 Vue 的模板语法
[*]基于 DOM,就地变化
[*]由 @vue/reactivity 驱动
[*]无需构建
引入项目

CDN 引入
{{ count }}
<button @click="count++">inc</button>当然也可以把该地址内部代码全部赋值到本地 js 文件中使用

[*]defer 属性可使脚本在文档被解析后执行
如不使用 defer 则需手动初始化 PetiteVue.createApp().mount()
[*]init 属性会告诉 petite-vue 自动查询和初始化页面上所有具有 v-scope 的元素
[*]v-scope 标记页面上需要使用 petite-vue 渲染的地方
根作用域

使用 createApp 在页面上注册一个根作用域, 内容在 html 代码中可用. 可以理解为在 Vue 中的暴露至 template

<p>{{ count }}</p>
<p>{{ plusOne }}</p>

<button @click="increment">increment</button>全局状态管理

<p>Global {{ store.count }}</p>
<button @click="inc">增加全局数据</button>

<p>Local {{ localCount }}</p>
<button @click="localCount++">增加局部变量</button>生命周期

可以监听挂载与卸载事件
组件

使用组件可以复用逻辑 但 petite-vue 的组件并不那么好用
按照 Vue 的习惯, 也可以使用一个 js 文件作为一个组件
// footer.js
// 可以传递 props
export default function (props) {
return {
    // 组件模板
    $template: `<footer>页脚组件</footer>`,
    msg: "A message",
    print() {
      console.log(props);
    },
};
}如果创建了一个独立的 js 文件作为组件, 则模板只能为字符串形式
在官方的 README 中模板有template元素的用法. 但那种只能写在 html 文件中, 而写在 html 文件内的组件无法复用. 故在此不作展示
需要注意的是 @vue:mounted="print" 这个print方法的作用域是组件内的print
基本示例

<body v-scope @vue:mounted="loadArticle()">

<ul v-show="!store.currentHash.includes('#4')">
    <li v-show="store.currentHash.includes('#1-')">
      <a target="_blank" href="https://www.cnblogs.com/javascript:;" >导航栏</a>
      <dl>
      
      <dd :>
          <a target="_blank" href="https://www.cnblogs.com/#1-1">1-1</a>
      </dd>
      </dl>
    </li>
</ul>


</body>参考链接

https://github.com/vuejs/petite-vue

来源:https://www.cnblogs.com/UmaruChan/p/18273604
免责声明:由于采集信息均来自互联网,如果侵犯了您的权益,请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容,谢谢合作!
页: [1]
查看完整版本: petite-vue 基本使用指南