一、环境准备

• jQuery依赖环境

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

• Vue依赖环境

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>

二、计数器

• jQuery实现方式
  html

<div class="count_box">
  <button id="reduceBtn">-</button>
  <input type="number" id="countInput" value="0" />
  <button id="addBtn">+</button>
</div>
当前计数为：<span id="count">0</span>

js

    var count = 0
    var reduceBtn = $("#reduceBtn")
    var countElement= $("#count")
    var countInput = $("#countInput")
    var addBtn= $("#addBtn")
    /* 监听减少按钮 */
    reduceBtn.on("click", function () {
       count--
      renderCount()
      renderInput()
    })
    /* 监听增加按钮 */
    addBtn.on("click", function () {
      count++
      renderCount()
      renderInput()
    })
    /* 监听输入 */
    countInput.on("input", function (event) {
        count = $(event.target).val()
        renderCount()
    })
    /* 更新数量展示 */
    function renderCount () {
      countElement.html(count)
    }
    /* 更新输入框 */
    function renderInput () {
        countInput.val(count)
    }

css

    .count_box{
        display: flex;
        align-items: center;
    }
    .count_box button {
        cursor: pointer;
    }
    #count{
        margin: 0 5px;
    }

• Vue实现方式
  html

    <div id="app">
        <div class="count_box">
            <button id="reduceBtn" @click="reduce">-</button>
            <input type="number" id="countInput" v-model="count" />
            <button id="addBtn" @click="add">+</button>
        </div>
        当前计数为：<span id="count">{{count}}</span>
    </div>

js

    new Vue({
        el: "#app",
        data () {
            return {
                count: 0
            }
        },
        methods: {
            add () {
                this.count++
            },
            reduce () {
                this.count--
            }
        }
    })

可以看到，jQuery改变视图层(View)时，需要先拿到视图层对象也就是dom对象，然后再通过dom对象更新视图。Vue改变视图层(View)只需通过监听的事件改变模型层(model)，Vue框架(ViewModel)会帮你改变视图层(View)。开发人员无需频繁的操作dom对象，只需要关注抽象数据模型就可以了

Vue中的@click为v-on:click的缩写，详细请看
Vue指令