在生产环境中引用
https://unpkg.com/petite-vue@0.2.2/dist/petite-vue.iife.js

使用方法：
//注意，中间的defer init自动初始化步骤必须执行，否则无法使用

html

<script src="https://unpkg.com/petite-vue" defer init></script>

<div v-scope="{ count: 0 }">
  {{ count }}
  <button @click="count++">inc</button>
</div>

用于v-scope标记页面上由petite-vue控制的区域
该defer属性使脚本在解析 HTML 内容后执行。
该init属性告诉petite-vue自动查询并初始化v-scope页面上的所有元素。

或者手动初始化：

html

<script src="https://unpkg.com/petite-vue"></script>
<script>
  PetiteVue.createApp().mount()
</script>

手动初始化并替换插值变量标签:

html

<script src="https://unpkg.com/petite-vue@0.2.2/dist/petite-vue.iife.js"></script>
<script>
	PetiteVue.createApp({
	$delimiters: ['${', '}']
	}).mount()
</script>

兼容Vue

{{ }}文本绑定（可使用自定义分隔符进行配置）
v-bind（包括:速记和类/样式特殊处理）
v-on（包括@简写和所有修饰符）
v-model（所有输入类型+非字符串:value绑定）
v-if// v-else_v-else-if
v-for
v-show 显示或隐藏
v-html
v-text
v-pre
v-once
v-cloak
reactive()
nextTick()
v-effect 类似watch

触发事件：

鼠标事件：
@mouseenter 鼠标指向
@mouseleave 鼠标离开
@mousedown：鼠标按下
@mouseup：鼠标松开
@mousemove：鼠标移动
@mouseover：鼠标移到元素上
@mouseout：鼠标移出元素
@dblclick：双击

键盘事件：
@keydown：按下键盘按键
@keyup：释放键盘按键
@keypress：按下并保持键盘按键

表单事件：
@input：输入框内容变化
@change：表单元素值变化
@submit：表单提交
@reset：表单重置

焦点事件：
@focusin：元素获得焦点（包括子元素）
@focusout：元素失去焦点（包括子元素）
@focus 元素激活
@blur 元素取消激活

剪贴板事件：
@copy：复制内容
@cut：剪切内容
@paste：粘贴内容

拖放事件：
@drag：拖动元素
@dragstart：开始拖动元素
@dragend：拖动元素结束
@dragenter：拖动元素进入目标区域
@dragover：拖动元素在目标区域上方
@dragleave：拖动元素离开目标区域
@drop：拖动元素放下

其他事件：
@click 点击元素
@scroll：滚动
@resize：调整窗口大小
@contextmenu：右键菜单
@wheel：鼠标滚轮

不支持

ref()，computed()ETC。
渲染函数（petite-vue没有虚拟 DOM）
集合类型的反应性（Map、Set 等，由于尺寸较小而被删除）
过渡、保活、传送、悬念
v-for深度解构
v-on="object"
v-is&<component :is="xxx">
v-bind:style自动前缀

项目链接:https://github.com/vuejs/petite-vue

示范：

html

<!-- 控制元素显示或隐藏，点击按钮切换 -->
<div v-show="isVisible">
该方法控制这个元素是否显示
</div>
<button @click="isVisible = !isVisible">

<!-- 绑定输入框为变量textnumber，监听输入事件触发updateCharCount函数
统计它的字符数量传递给charCount，也可以直接写成：@input="charCount = textnumber.length"这样就不需要下面的函数了
-->
<input v-model="textnumber" @input="updateCharCount" type="text">
<label>${ charCount }/300</label>


<script src="./static/petite-vue.js"></script>
<script>
    PetiteVue.createApp({
		//修改变量标识符
        $delimiters: ['${', '}'],
		//定义变量初始值
        isVisible: false,
        charCount: 0,
        textnumber: null,
		//定义函数
        updateCharCount() {
            this.charCount = this.textnumber.length;
        }
    }).mount();
</script>

v-text的示范
点击复制绑定文本，并在按钮内显示一个复制的图标状态5秒

php-template

<button @click="showIcon"">
<svg v-show="isHidden" />
</svg>复制txt</button>

<p v-text="nodeCopy"></p>
										
<script src="/static/petite-vue.js"></script>
  <script>
      PetiteVue.createApp({
          isHidden: false,
          nodeCopy: "这是文本",
          showIcon() {
                console.log("按钮运行")
                navigator.clipboard.writeText(this.nodeCopy)
                this.isHidden = true;
                setTimeout(() => {
                    this.isHidden = false;
                }, 2000);
            },
      }).mount();
  </script>

控制元素隐藏切换，但是初始化前要一直隐藏的方法

html

<style>
    [v-cloak] {
      display: none;
    }
</style>

<div v-cloak v-show="isVisible"> </div>

这样就会在isVisible被赋值前也一直保持隐藏

三元表示法：

html

<input :type="showPassword ? 'password' : 'text'">

<button type="button" @click="showPassword = !showPassword">
<svg v-show="showPassword">
	图标一
</svg>                       
<svg v-show="!showPassword">
	图标二
</svg>
</button>

该方法实现了一个密码输入框是否显示密码的功能，输入框根据showPassword变量来指定是password 还是text,而按钮也根据变量来显示眼睛和闭眼图标

添加class样式

这里的flex items-center会一直显示，而bg-indigo-600 text-white根据条件显示

html

<label @click="sKu='L'" :class="['flex items-center',{'bg-indigo-600 text-white':sKu==='L'}]">
</label>

这是一个sku选择的完整示范：
给每个sku 的input radio 都v-model="sKu"，然后追加的class都用sKu==='<value的值>'来判断是不是选中了自己

html

<label :class="['flex items-center justify-center rounded-md border py-3 px-3 text-sm font-medium uppercase sm:flex-1 cursor-pointer focus:outline-none',{'ring-2 ring-indigo-500 ring-offset-2 border-transparent bg-indigo-600 text-white':sKu==='L'}]">
	<input v-model="sKu" type="radio" value="L" class="sr-only">L
</label>

三元表示法就不用对象了:

<label :class="['cursor-pointer rounded-full px-2.5 py-1',payType==='2'?'bg-indigo-600 text-white':'text-gray-500']">

调用其他js里的方法

index.html:

html

<div v-html="msg"></div>

<script src="/static/petite-vue.js"></script>
<script src="/static/theme.js"></script>
<script>
  PetiteVue.createApp({
    $delimiters: ['${', '}'],
    isDark: theme(),  //theme()是temem.js的方法，返回布尔值


   
    //表单提交时运行事件
    checkPasswords(event) {
     Message(this,"这是一个测试",2);
		//第一个参数传入this，代表传入vue的app自身 
    },
        
  }).mount();
</script>

theme.js：

javacrcipt

//根据本地存储桶读取的变量来返回布尔，是否是黑暗模式，并为Html添加dark class
function theme () {
    var theme1 = localStorage.getItem('theme'); //读取本地主题
    if (theme1 != "dark") {
    document.documentElement.classList.remove('dark');
    return false;
    } else {
    document.documentElement.classList.add('dark');
    return true;
    }
}

function Message (app,msg,type) {
    html = "<div>类型:${type}，消息:${msg}</div>"
    app.msg = html; //访问vue里的msg对象
    //定时关闭
    setTimeout(() => {
        app.msg = "";
      }, 3500)
}

初始化完成立即执行

html

<div @vue:mounted="mounted"></div>

<script src="/static/tpetite-vue"></script>
<script>
  PetiteVue.createApp({
	  
	  //立即执行，需要在任意元素使用@vue:mounted="mounted"
    mounted() {
      console.log("它会立即执行")
    },
  }).mount();
</script>

常见错误：
某个，可能是变量没有初始赋值

axios

cdn引用：
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

惰性加载，渐进式分页

html


<div v-for="item in lists">
这里是遍历逻辑                   
</div>
<div v-if="loading" class="loading">加载中...</div>
<div v-if="noMoreData" class="no-more-data">没有更多数据了</div>

<script>
  PetiteVue.createApp({
      $delimiters: ['$[', ']'],
      lists: [], // 列表数据
      // 列表方法
      listff:{
        model:'4090', // 品牌
        type:'租赁价', // 类型
        page:1,
      },
      loading: false, // 是否正在加载
      noMoreData: false, // 是否没有更多数据
      // 获取列表
      getList() {
        // 如果正在加载或没有更多数据则不再请求
        if (this.loading || this.noMoreData) return;
        this.loading = true; // 开始加载
        axios.post('/api/indexList',this.listff)
        .then(response => {
          const newItems = response.data.lists;
          if (newItems != null) { // 如果返回数据不为空
            this.lists = [...this.lists, ...newItems]; // 将新数据添加到列表中
            this.listff.page += 1; // 页码加一
          } else {
            this.noMoreData = true; // 没有更多数据
			  window.removeEventListener('scroll', this.handleScroll); // 移除滚动事件
          };
          this.loading = false; // 加载完成

        })
        .catch(error => {
          console.error('Error:', error);
        });
      },
      mounted() {
        // 获取gpu数据
        this.getList();
        // 监听滚动事件
        window.addEventListener('scroll', this.handleScroll);
      },
      // 滚动到底触发事件
      handleScroll() {
        const bottomOfWindow = document.documentElement.scrollTop + window.innerHeight === document.documentElement.offsetHeight;
        if (bottomOfWindow) {
          this.getList();
        }
      },
  }).mount();
</script>

外部修改petite-vue内部便变量的方法

//定义一个变量，包含PetiteVue的所有方法
var app = {
	$delimiters: ['$[', ']'],
	menuOpen: false,
	//定义一个内部修改函数
	change(bool) {
		this.menuOpen = bool;
	  },
	},
};
PetiteVue.createApp(app).mount();

//在外部使用app的子方法change实现对PetiteVue内的修改
app.change(true);

调用外部dom元素

在模板中使用ref="fileInput",然后在vue对象中使用this.$refs.fileInput访问到这个对象

html

<input type="file" id="fileInput" ref="fileInput" class="hidden mt-2 rounded-lg border border-dashed border-gray-900/25 px-6 py-10" multiple>
<script>
PetiteVue.createApp({
	clickImage(){
		this.$refs.fileInput.click(); // 引用ref="fileInput"的元素
	},
})
</script>

petite-vue JS库

手动初始化并替换插值变量标签:

兼容Vue

触发事件：

不支持

示范：

控制元素隐藏切换，但是初始化前要一直隐藏的方法

添加class样式

调用其他js里的方法

初始化完成立即执行

axios

惰性加载，渐进式分页

外部修改petite-vue内部便变量的方法

调用外部dom元素