petite-vue JS库

在生产环境中引用
https://unpkg.com/petite-vue@0.2.2/dist/petite-vue.iife.js
使用方法：
//注意，中间的defer init自动初始化步骤必须执行，否则无法使用

<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页面上的所有元素。

或者手动初始化：

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

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

<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()
模板参考

不支持

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

示范：

<!-- 控制元素显示或隐藏，点击按钮切换 -->
<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秒

<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>

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

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

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

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

三元表示法：

<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根据条件显示

<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的值>'来判断是不是选中了自己

<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>

调用其他js里的方法

index.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：

//根据本地存储桶读取的变量来返回布尔，是否是黑暗模式，并为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)
}

初始化完成立即执行

<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>