petite-vue的简单使用
编辑时间:2023-09-22 作者:金满斗 浏览量:1640 来源:原创

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>


确实好用,以后慢慢学习慢慢更新。

来说两句吧