kusa-mochi

<TextBox x:Name="TestTextBox" Grid.Column="1" HorizontalAlignment="Center" Height="23" TextWrapping="Wrap" VerticalAlignment="Center" Width="200">
    <TextBox.Style>
        <Style TargetType="{x:Type TextBox}">
            <Setter Property="Text" Value="りんご"/>
            <Style.Triggers>
                <DataTrigger Binding="{Binding TestFlag}" Value="True">
                    <Setter Property="Text" Value="バナナ"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>

kusa-mochi

<template>
    <div class="my-class">
        サンプル{{sampleData}}
    </div>
</template>

<script>
export default {
    name: 'MyComponent',
    data () {

kusa-mochi

<template>
    <div>
        <div v-if="sampleProp === 1">template A</div>
        <div v-else-if="sampleProp === 2">template B</div>
        <div v-else>template C</div>
    </div>
</template>

<script>
export default {

kusa-mochi

<!-- template A と表示する。 -->
<my-component sampleProp="1"></my-component>

<!-- template B と表示する。 -->
<my-component sampleProp="2"></my-component>

kusa-mochi

<template>
    <div>
        <div>サンプル</div>
        <slot />
    </div>
</template>

<script>
export default {
    name: 'MyComponent'

kusa-mochi

<my-component>
  <div>コンポーネントの外側から挿入したい要素</div>
<my-component>

kusa-mochi

export default function () {
  // ここに共通処理を書く。
}

kusa-mochi

<template>
    <!-- 省略 -->
</template>

<script>
import CommonFunction from "./CommonFunction";
export default {
    name: 'MyComponent',
    methods: {
        CommonFunction

kusa-mochi

<template>
  <button @click="increment">
    <div>Count: {{ count }}</div>
    <div>Double: {{ double }}</div>
  </button>
<template>
<script>
export default {
  data: () => ({
    count: 0

kusa-mochi

<template>
    <!-- 省略 -->
<template>
<script>
import { reactive, computed } from "vue";
export default {
  setup() {
    const state = reactive({
      count: 0,
      double: computed(() => state.count * 2)