uniapp 简单案例

以下是一个简单的UniApp案例，实现了一个简单的计数器功能：

1. 在HBuilderX中创建一个新的UniApp项目，并选择默认模板。

2. 打开pages/index/index.vue文件，在template标签中添加以下代码：

<template>
  <div class="content">
    <div class="count">{{ count }}</div>
    <button @click="increment">增加</button>
    <button @click="decrement">减少</button>
  </div>
</template>

3. 在script标签中添加以下代码：

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    },
    decrement() {
      this.count--
    }
  }
}
</script>

4. 在style标签中添加以下代码：

<style>
.content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  flex-direction: column;
}
.count {
  font-size: 5rem;
  margin-bottom: 2rem;
}
button {
  padding: 1rem 2rem;
  font-size: 1.5rem;
  margin: 1rem;
}
</style>

5. 运行项目，在浏览器中打开http://localhost:8080，就可以看到一个简单的计数器应用。

这个案例中，我们使用了Vue.js的数据绑定机制和事件处理机制，实现了一个简单的计数器应用。