使用Vue.js框架中的ref，创建一个简单的计数器应用。页面上有一个按钮和一个显示数字的文本框。每点击一次按钮，文本框中的数字增加1。

在 Vue.js 中，你可以通过 `v-model` 和 `ref` 属性轻松地创建一个计数器应用。首先，你需要设置一个模板来展示界面，然后创建数据属性用于存储计数值，并在模板中绑定到元素上。接下来，利用 `ref` 创建一个引用以便于操作DOM。

下面是一个简单的例子：

<template>
  <div>
    <input type="text" v-model.number="counter" ref="counterInput">
    <button @click="incrementCounter">点击我</button>
    <p>当前计数：{{ counter }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      counter: 0, // 初始计数值
    };
  },
  methods: {
    incrementCounter() {
      this.$refs.counterInput.value++; // 通过ref更新输入框的值
      this.counter++; // 更新数据模型，保证视图同步
    },
  },
};
</script>

在这个例子中，`v-model.number` 表示将输入框的值绑定到 `counter` 数据属性上，并自动转换为数字类型。当你点击按钮时，`incrementCounter` 方法会被触发，它会先通过 `this.$refs.counterInput.value++` 增加输入框的值，然后更新 `counter` 的值，从而使得页面上的计数同步变化。