因为做一个用于生成水印的小型工具，使用到【原创不易，请尊重版权】【转载请注明来源】electron作为壳，在选ui框架的时【转载请注明来源】【本文首发于唐霜的博客】候，当然是首先想到vue，但是经过一会儿【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。使用后，发现vue机制在electron【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。下面无法直接使用脚本引入方式，有些遗憾，【原创内容，转载请注明出处】【本文首发于唐霜的博客】于是打算直接使用jquery。但是写了一未经授权，禁止复制转载。【原创不易，请尊重版权】会儿之后，又觉得别扭，写react和vu本文版权归作者所有，未经授权不得转载。【转载请注明来源】e太久，通过修改状态来触发界面重绘，这种本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。方式实在太顺手了，现在去写jquery的【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net代码，实在有些回不去的感觉。
【作者：唐霜】原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。于是乎，我自己写了一个基于jquery的【转载请注明来源】本文作者：唐霜，转载请注明出处。响应式插件，也可以把它当作是一个小框架。
【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。github.com/tangshuan转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】g/jqvm
【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。具体使用方法如下：
【本文受版权保护】【未经授权禁止转载】未经授权，禁止复制转载。<script src="https://unpkg.com/jquery/dist/jquery.min.js"></script>
<script src="https://unpkg.com/jqvm/dist/jqvm.min.js"></script>
<template id="app">
<span>{{name}}</span>
<span>{{age}}</span>
<button>grow</button>
</template>
<script>
$('#app')
.vm({
name: 'tomy',
age: 12,
})
.on('click', 'button', state => {
state.age ++
})
.mount()
</script> 以上就是最简单的用法。模板定义和vue差本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】不多，但是有个大的区别，vue直接在模板【未经授权禁止转载】未经授权，禁止复制转载。里面绑定事件，但是在jqvm中通过传统的【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】jquery的on绑定事件。
转载请注明出处：www.tangshuang.net【版权所有，侵权必究】它有一些内置的directive（指令）本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。，最常用的应该是jq-if了。
【本文首发于唐霜的博客】【原创内容，转载请注明出处】<template>
<div jq-if="isTouched">xxx</div>
</template> 还可以在mount 之前注册一些comp本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】onent和directive。
【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。const { component, directive } = $.vm
component('icon', function(el, attrs) {
const { type } = attrs
return `<i class="icon icon-${type}"></i>`
})
directive('jq-link', function(el, attrs) {
const link = attrs['jq-link']
const to = this.parse(link) // this.parse 是一个内置服务，用来将字符串解析成 state 上的对应值
el.attr('href', to)
})注册好之后，在模板里面使用。
【版权所有，侵权必究】【作者：唐霜】<template>
<icon type="search"></icon>
<a jq-link="xxx">jump</a>
</template>再来说说设计理念，我的想法，就是“简单”原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。。使用简单，也别整特别多概念，虽然我前面著作权归作者所有，禁止商业用途转载。【本文受版权保护】提到vm, state之类的，一看基本上【本文受版权保护】【本文首发于唐霜的博客】都能明白咋回事，拿过来就撸，别想那么多。【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】不过还是需要再解释一下on那里怎么绑定事著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。件，第三个参数是一个函数，这个函数接收s原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。tate，这个state被修改就会重新渲本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。染，这个函数返回一个函数，返回的这个函数著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】就是正常情况下我们用 jquery.fn著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】.on绑定的时候传入的那个函数。
【关注微信公众号：wwwtangshuangnet】【转载请注明来源】$('#app')
.vm({ ... })
.on('click', 'button', state => function(e) {
const color = $(this).css('color')
state.color = color
// ...
})这个小框架打包压缩之后，总体体积不到50【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.netk，可以说麻雀虽小，五脏俱全。也没有啥特转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】别新潮的东西，在一些需要1分钟内开始界面【本文首发于唐霜的博客】【转载请注明来源】编程的场景，再适合不过了。
【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】原创内容，盗版必究。github.com/tangshuan【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】g/jqvm
【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】如果你觉得这个项目有点意思，给个star著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】吧。
【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。
牛逼!