vue开发小程序

<template>
  <view class="container">
    <text>{{ message }}</text>
    <button @click="increment">点击我</button>
    <text>计数: {{ count }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: '欢迎使用Vue开发小程序',
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

<style>
.container {
  padding: 20px;
}

text {
  margin: 10px 0;
}
</style>

解释说明：

• 模板部分 (<template>)：定义了页面的结构。这里有一个 view 容器，包含了一个文本显示组件 text 和一个按钮 button。点击按钮会触发 increment 方法，更新计数器。

• 脚本部分 (<script>)：定义了组件的逻辑。data 函数返回一个对象，包含两个属性：message 和 count。methods 中定义了 increment 方法，用于增加 count 的值。

• 样式部分 (<style>)：定义了页面的样式。.container 类设置了内边距，text 标签设置了上下间距。

这个示例展示了如何使用 Vue 来开发小程序的基本结构和交互功能。