8-1 字串 v-text 與 {{}}

  <!-- 使用{{}} -->
  <p>{{ name }}在{{ position }}吃早餐</p>
  <!-- 使用指令好處可修改文字樣式 -->
  <p><strong v-text="name"></strong>在<span v-text="position"></span>吃早餐</p>
  <!-- 寫v-model雙向綁定，此input編輯同時上方關於name資料同步變動 -->
  <input type="text" v-model="name">

8-2 原始字串 v-html

  <!-- 純Html語法顯示 -->
  {{ rawHtml }}
  <!-- 很容易受到 XSS 攻擊，除非確保資料為安全，才能使用 -->
  <div v-html="rawHtml"></div>

8-3 單次綁定 v-once

  <p v-once>{{ name }}在{{ position }}吃早餐</p>
  <input type="text" v-model="name">

8-4 進階技巧：表達式

  <!-- 這段程式碼有回傳結果情形，都可稱為表達式 -->
  <p>樣板字面值: {{`${name}在${position}吃早餐` }}</p>
  <p>反轉字串: {{ text.split('').reverse().join('')}}</p>
  <!-- 將methods方法裡的值傳入下面methods方法，並回傳要顯示值  -->
  <p>綁定methods: {{ say('哈利波特') }}</p>
  <p>JS運算: {{ 1-2 }}</p>

8-5 加入 v-pre顯示{{}}不會被轉譯資料上去

  <h3>加入 v-pre顯示 <span v-pre>{{ }}</span>不會被轉譯資料上去</h3>
  <p v-pre>這段文字不會被轉譯：{{ name }}在{{ position }}吃早餐</p>

8-6 進階技巧：顯示資料狀態

  <!-- 要確認資料時可用此方式確認，不用在切換vue面板確認 -->
  <p>{{products}}</p>

<script>
const App = {
  data() {
    return {
      name: '哈利波特',
      position: '早餐店',
      text: '哈利波特在早餐店吃早餐',
      rawHtml: '<p>哈利波特在早餐店吃早餐</p>',
      products: [
        {
          name: '蛋餅',
          price: 30,
          vegan: false
        },
        {
          name: '飯糰',
          price: 35,
          vegan: false
        }
      ]
    }
  },
  methods: {
    say(name) {
      return `${name}在${this.position}吃早餐`
    }
  }
};

Vue.createApp(App).mount('#app');

知識點來源:六角課程、008天絕對看不完的vue3.js

以上是今天所提供知識點如有誤，再請務必在下面留言~