先祝大家國慶日快樂~
連假第二天希望大家都過得愉快!

那麼今天要講的是Alpine.js和Vue.js插入文字的方式差異，讓我們看下去吧。

Alpine.js

放在html

<div x-data="{ post: { title: 'My first post' } }">
  <h3 x-text="post.title"></h3>
</div>

<div x-data="{ post: { title: 'My first post' } }">
  <h3 x-html="post.title"></h3>
</div>

這裡x-data="{ post: { title: 'My first post' }的內容
也可以將其寫進js回傳進來(可參考前面章節範例)
後面印出的語法
單純印文字：x-text="post.title"
把裡面html取代掉： x-html="post.title"

Vue.js

放在html

<template>
  <div>
    <h3>{{ post.title }}</h3>

    <h3 v-text="post.title"></h3>

    <h3 v-html="post.title"></h3>
  </div>
</template>

放在js

  export default {
    name: 'App',
    data() {
      return {
        post: {
          title: "My first post"
        }
      }
    }
  }

這裡列印出文字的方式都很單純，
先分別看到h3標籤的倒數兩個，
單純印文字：v-text="post.title"
把裡面html取代掉：v-html="post.title"
這跟Alpine.js的用法幾乎完全一樣呢。

其中最大的差異在{{ post.title }}
在Vue中資料回傳至html時，
可以使用雙花框包夾要取的資料就可以直接使用，
但要注意的是在Alpine.js之中並沒有用雙花框取出資料這種語法喔。