用jQuery写出vue的味道，这个小插件真猛！-一一网

你肯定用过vue，别猜，我隔着屏幕都能读到你此刻的想法。但是，你想过用jquery写出的代码像vue一样简单，也具有响应式效果吗？话不多说，先来 show me the code：

<template id="app">
  <span>{{name}}</span>
  <span>{{age}}</span>
  <button jq-on="click:grow">Grow</button>
</template>

<script>
  $('#app')
      .vm({ name: 'tom', age: 10 })
      .fn('grow', state => state.age ++)
      .mount()
</script>
复制代码

怎么样有没有一种熟悉的味道？而这，仅仅靠一个几百行的jquery插件。
你只需要在你的页面中引入对应的插件文件：

<script src="https://unpkg.com/jquery/dist/jquery.min.js"></script>
<script src="https://unpkg.com/jqvm/dist/jqvm.min.js"></script>
复制代码

编译？构建？都没有，它只是一个jquery插件。当然，你也可以使用构建系统来做，比如：

import { useJQuery } from 'jqvm'
import jQuery from 'jquery'

const $ = useJQuery(jQuery)
const view = $(`
  <template>
      <span>{{name}}</span>
      <span>{{age}}</span>
      <button jq-on="click:grow">Grow</button>
  </template>
`)
    .vm({ name: 'tom', age: 10 })
    .fn('grow', state => state.age ++)
    
view.mount('#app')
复制代码

和vue的响应式方式一样，你只需要直接修改state就可以让界面重新渲染。

指令控制？没问题的：

<div jq-if="age > 10">I am older than 10.</div>
复制代码

循环？这个有点难搞，不过也没问题：

<div jq-repeat="value,index in data traceby value.id">
  <span>{{index + 1}}</span>
  <span>{{value.name}}</span>
  <span>{{value.time}}</span>
</div>
复制代码

双向绑定？嗯，有的：

<input jq-bind="age" />
复制代码

组件？这个稍微没那么好，勉强够用：

<template id="box">
  <div>width: {{width}}</div>
  <div>height: {{height}}</div>
</template>

<template id="app">
  <my-box></my-box>
</template>

<script>
  const box = $('#box').vm({ width: 100, height: 100 })
  const app = $('#app').vm({})
      .component('my-box', box) // 把box注册为一个组件
</script>
复制代码