Skip to content

[vue] vue和微信小程序写法上有什么区别? #334

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

[vue] vue和微信小程序写法上有什么区别?

Activity

Cai-zhiji

Cai-zhiji commented on Jul 7, 2023

@Cai-zhiji

模板语法

Vue使用类似HTML的模板语法,而微信小程序使用类似HTML和JavaScript混合的WXML语法。
vue

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="handleClick">Click me</button>
  </div>
</template>

miniprogram

<view>
  <text>{{ message }}</text>
  <button bindtap="handleClick">Click me</button>
</view>

组件开发

Vue使用单文件组件(.vue)来封装组件,而微信小程序使用JSON和WXML文件组合的方式来定义组件。
vue

<template>
  <div class="my-component">
    <!-- 组件内容 -->
  </div>
</template>

<script>
export default {
  // 组件逻辑
}
</script>

<style>
.my-component {
  /* 组件样式 */
}
</style>

miniprogram

// 组件的JSON配置文件
{
  "component": true,
  "usingComponents": {},
  "options": {},
  "style": {},
  "template": "<view class='my-component'></view>",
  "methods": {}
}

数据绑定

Vue使用双向数据绑定和响应式系统,而微信小程序使用单向数据绑定。
vue

<template>
  <div>
    <input v-model="message" />
    <p>{{ message }}</p>
  </div>
</template>

miniprogram

<view>
  <input bindinput="handleInput" value="{{ message }}" />
  <text>{{ message }}</text>
</view>

样式

Vue使用CSS来定义组件的样式,而微信小程序使用类似CSS的WXSS语法。

vue

<template>
  <div class="my-component">
    <!-- 组件内容 -->
  </div>
</template>

<style>
.my-component {
  color: red;
}
</style>

miniprogram

/* 组件的WXSS样式文件 */
.my-component {
  color: red;
}

生命周期

Vue和微信小程序都有自己的生命周期钩子,但具体的钩子函数和触发时机有所不同。
vue

export default {
  created() {
    // 组件创建时触发
  },
  mounted() {
    // 组件挂载到DOM时触发
  },
  // ...
}

miniprogram

Component({
  created() {
    // 组件创建时触发
  },
  attached() {
    // 组件挂载到DOM时触发
  },
  // ...
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @haizhilin2013@xunbie@Cai-zhiji

        Issue actions

          [vue] vue和微信小程序写法上有什么区别? · Issue #334 · haizlin/fe-interview