why the template ui did not show the vue data-CodePudding

I am a newbie with Vue, now I define the vue code like this:

import Vue from "vue";

export default Vue.extend({
  data: () => {
    message: "show message";
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
  <div id="app">
    <div v-text="message"></div>
  </div>
</template>

why the UI did not show the Vue data message? this is my sandbox version code: https://codesandbox.io/s/loving-sea-snvfj?file=/src/App.vue:149-237

CodePudding user response：

I recommend reading the documentation on Vue v2 or v3 on the official website - it is quite good. Regarding your situation, it is better for you to familiarize yourself with these sections of the documentation

Below is an example from the official website:

var app = new Vue({
  el: '#app',
  data: {
    message: 'show message'
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  {{ message }}
</div>