Petite-Vue.js使用示例

PetiteVue简介

如果你有一个后端框架，并且它已经渲染了大部分的 HTML，或者你的前端逻辑并不复杂，不需要构建步骤一个适用于此类无构建步骤场景的Vue的替代版Petite-vue，主要为渐进式增强已有的 HTML 作了特别的优化。功能更加精简，十分轻量。

代码示例1

<div v-scope>
{{count}}
{{mm}}
<button @click="changetxt()">修改文本</button>
<p v-for="item in arr">{{item}}</p>
</div>

<script src="https://unpkg.com/petite-vue"></script>
<script>
   PetiteVue.createApp({
    // exposed to all expressions
    count: 0,
	mm:"文本",
	arr:[1,2,3],
    // getters
    get plusOne() {
      return this.count + 1
    },
    // methods
    increment() {
      this.count++
    },
	//改变文本的方法
	changetxt(){
		this.mm="文本哈哈哈"
	}
  }).mount()
  
</script>

示例代码2

//加载esm模块写法
<script type="module">
  import { createApp } from 'https://unpkg.com/petite-vue?module'
  createApp().mount()
</script>
//引用js文件写法
<script src="https://unpkg.com/petite-vue"></script>
<script>
PetiteVue.createApp().mount()
</script>

挂载到指定元素

createApp().mount('#only-this-div')