petite-vue的简单使用
编辑时间：2023-09-22
作者：金满斗
浏览量：2672
来源：原创
vue以前宣传是渐进式框架，可以在本身有的网页文件里无侵入使用，这点我很喜欢。
前端发展太快了，先是2，现在3，现在好像流行vue单文件了。
我不是专业程序员，没那么多精力跟踪。
有个小东西想有时间改下，据说现在petite-vue更适合无侵入改造原网页。
看看，先上人家的源码地址
https://github.com/vuejs/petite-vue
我个人喜欢什么都掌握在自己手上，因此那种js在别人服务器上的事情我是万万不敢的。放上两个js地址，源码里也了也有。
-
Global build: https://unpkg.com/petite-vue@0.2.2/dist/petite-vue.iife.js
- exposes PetiteVue global, supports auto init
-
ESM build: https://unpkg.com/petite-vue@0.2.2/dist/petite-vue.es.js
- Must be used with <script type="module">
上面是直接引入的js且不需要初始化了，下面是模块类型引入的js。
必须来个小例子了。
<!DOCTYPE html>
<html>
<head>
<title>Petite-Vue Example</title>
</head>
<body>
<div v-scope>
<p>{{ count }}</p>
<p @click="my">{{ plusOne }}</p>
<button @click="increment">increment</button>
</div>
<script type="module">
import { createApp } from './petite-vue.es.js'
createApp({
// exposed to all expressions
count: 0,
// getters
get plusOne() {
return this.count + 1
},
// methods
increment() {
this.count++
},
my:()=>{
alert("强大");
}
}).mount()
</script>
确实好用，以后慢慢学习慢慢更新。
好用记账软件、聚宝盆记账易
热文排行
最近分享