petite vue 基本使用指南示例小结

更新时间：2024年07月02日 09:38:45 作者：Yune_Neko

petite-vue 是为渐进增强而优化的另一种 Vue 发行版,它提供与标准 Vue 相同的模板语法和反应性心智模型,这篇文章主要介绍了petite vue 基本使用指南,需要的朋友可以参考下

前言

petite-vue 是为渐进增强而优化的另一种 Vue 发行版。它提供与标准 Vue 相同的模板语法和反应性心智模型。

不过，它专门针对在由服务器框架呈现的现有 HTML 页面上“散布”少量交互进行了优化。

petite-vue，它在提供 vue 基本功能的同时，还能一个轻量级，简单应用的微框架，这样也能保证开发者有一个不错的使用体验。

只有 ~6kb
兼容 Vue 的模板语法
基于 DOM，就地变化
由 @vue/reactivity 驱动
无需构建

引入项目

CDN 引入

<div v-scope="{ count: 0 }">
  {{ count }}
  <button @click="count++">inc</button>
</div>
<script
  src="https://unpkg.com/petite-vue@0.4.1/dist/petite-vue.iife.js"
  defer
  init
></script>

当然也可以把该地址内部代码全部赋值到本地 js 文件中使用

defer 属性可使脚本在文档被解析后执行

如不使用 defer 则需手动初始化 PetiteVue.createApp().mount()
init 属性会告诉 petite-vue 自动查询和初始化页面上所有具有 v-scope 的元素
v-scope 标记页面上需要使用 petite-vue 渲染的地方

根作用域

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

<script type="module">
  import { createApp } from "../lib/petite-vue.js";
  createApp({
    // 暴露出的数据 直接写在 createApp 内的是响应式数据
    count: 0,
    // getter
    get plusOne() {
      return this.count + 1;
    },
    // methods
    increment() {
      this.count++;
    },
  }).mount();
</script>
<div v-scope>
  <!-- 经典的插值表达式 -->
  <p>{{ count }}</p>
  <p>{{ plusOne }}</p>
  <!-- v-on也是可用的 -->
  <button @click="increment">increment</button>
</div>

全局状态管理

<script type="module">
  import { createApp, reactive } from "../lib/petite-vue.js";
  // 定义单独一个对象存放数据 需要 reactive 来转为响应式数据
  const store = reactive({
    count: 1,
  });
  function inc() {
    store.count++;
  }
  // 执行一次
  inc();
  createApp({
    store,
    inc,
  }).mount();
</script>
<div v-scope="{ localCount: 0 }">
  <p>Global {{ store.count }}</p>
  <button @click="inc">增加全局数据</button>
  <p>Local {{ localCount }}</p>
  <button @click="localCount++">增加局部变量</button>
</div>

生命周期

可以监听挂载与卸载事件

<div
  v-if="show"
  @vue:mounted="console.log('mounted on: ', $el)"
  @vue:unmounted="console.log('unmounted: ', $el)"
></div>

组件

使用组件可以复用逻辑但 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 文件内的组件无法复用. 故在此不作展示

<!-- index.html -->
<!-- 使用组件 传递参数200 且在挂载时触发方法 -->
<div v-scope="footer(200)" @vue:mounted="print"></div>
<script type="module" src="src/lib/petite-vue.js" defer int></script>
<script type="module">
  import { createApp } from "../lib/petite-vue.js";
  // 引入组件
  import footer from "../components/footer.js";
  createApp({
    footer, // 注入组件
  }).mount();
</script>

需要注意的是 @vue:mounted="print" 这个print方法的作用域是组件内的print

基本示例

<!-- 在页面载入时执行函数 -->
<body v-scope @vue:mounted="loadArticle()">
  <!-- v-show 显示控制 -->
  <ul v-show="!store.currentHash.includes('#4')">
    <li v-show="store.currentHash.includes('#1-')">
      <a href="javascript:;" rel="external nofollow"  class="nav-header">导航栏</a>
      <dl>
        <!-- v-on 与 class 的绑定 -->
        <dd :class="{'layui-this':store.currentHash === '#1-1'}">
          <a href="#1-1" rel="external nofollow" >1-1</a>
        </dd>
      </dl>
    </li>
  </ul>
  <script type="module" src="src/lib/petite-vue.js" defer int></script>
  <script type="module">
    import "../lib/layui/layui.js";
    import { createApp, reactive } from "../lib/petite-vue.js";
    // 全局响应式数据
    const store = reactive({
      currentHash: "",
    });
    function loadArticle() {
      // do ...
    }
    // 当页面哈希改变时执行操作
    window.onhashchange = () => loadArticle();
    // 创建根作用域
    createApp({
      store,
      loadArticle,
    }).mount();
  </script>
</body>

参考链接

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

到此这篇关于petite vue 基本使用指南的文章就介绍到这了,更多相关petite vue 使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

petite
vue

超详细教程实现Vue底部导航栏TabBar
本文详细讲解了Vue实现TabBar底部导航栏的方法，文中通过示例代码介绍的非常详细。对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-11-11
深入理解Vue3组合式API的实现
组合式API为Vue3带来了更好的逻辑组织和复用性,支持TypeScript,提供灵活的响应式系统,它允许开发者将相关逻辑组合在一起,通过composable函数实现逻辑复用,摆脱了mixin的缺点,同时,组合式API与TypeScript的集成更紧密,能够提供更准确的类型推断
2024-10-10
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
今天小编就为大家分享一篇Vue 实现CLI 3.0 + momentjs + lodash打包时优化，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
Vue组件开发之LeanCloud带图形校验码的短信发送功能
Vue是目前使用较广泛的三大前端框架之一，其数据驱动及组件化的特性使得前端开发更为快捷便利。本文在LeanCloud 短信轰炸与图形校验码官方文档基础上，从封装需要出发开发一个简单的短信图形验证Vue组件,具体内容详情大家参考下本文
2017-11-11
Console高级用法总结
Console 对象提供了浏览器控制台调试的接口。在不同宿主环境上它的工作方式可能不一样，但通常都会提供一套共性的功能，本文主要总结了Console的一些高级用法，感兴趣的小伙伴可以参考一下
2023-04-04
Vue3中导航守卫结合Axios实现token认证机制
本文主要介绍了Vue3中导航守卫结合Axios实现token认证机制,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2025-01-01
vue 绑定使用 touchstart touchmove touchend解析
这篇文章主要介绍了vue 绑定使用 touchstart touchmove touchend解析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-03-03
如何使用 vxe-table 实现左边是树右边是表格联动功能
使用 vxe-table 来实现左边是树,右边是表格联动功能,当需要实现左右两侧联动时,表格 vxe-grid 配合分割模板 vxe-split 就很容易实现了,下面通过实例代码给大家介绍使用 vxe-table 来实现左边是树,右边是表格联动功能,感兴趣的朋友一起看看吧
2025-03-03
vue中v-model指令与.sync修饰符的区别详解
本文主要介绍了vue中v-model指令与.sync修饰符的区别详解，详细的介绍了两个的用法和区别，感兴趣的可以了解一下
2021-08-08
解决vue3传属性时报错[Vue warn]:Component is missing template or
这篇文章主要给大家介绍了关于解决vue3传属性时报错[Vue warn]:Component is missing template or render function的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
2024-01-01