ভিইউই

<!DOCTYPE html>
<html>
<body>

<div id="app">
  <h1>{{header}}</h1>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const {createApp} = Vue;
createApp({
  data() {
    return {
      header: "প্রোগ্রামিং শিখুন"
    };
  }
}).mount("#app");
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<body>

<div id="app">
  <input v-model="name" placeholder="আপনার নাম">
  <p>স্বাগতম {{name}}</p>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const {createApp, ref} = Vue;
createApp({
  setup() {
    const name = ref("");
    return {name};
  }
}).mount("#app");
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<body>

<div id="app">
  <p></p>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const {createApp, provide, inject} = Vue;
const child = {
  setup() {
    const message = inject("message");
    return {message};
  },
  template: "<p>{{message}}</p>"
};
createApp({
  components: {
    child
  },
  setup() {
    provide("message", "অভিভাবকের বার্তা");
  }
}).mount("#app");
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<body>

<div id="app">
  <p>কাউন্ট: {{counter.count}}</p>
  <button @click="counter.count++">বৃদ্ধি</button>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/pinia@3/dist/pinia.iife.js"></script>
<script>
const {createApp} = Vue;
const {createPinia, defineStore} = Pinia;
const useCounterStore = defineStore("counter", {
  state: () => ({
    count: 0
  })
});
const app = createApp({
  setup() {
    const counter = useCounterStore();
    return {counter};
  }
});
app.use(createPinia());
app.mount("#app");
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<body>

<div id="app">
  <input v-model="user.name" placeholder="আপনার নাম">
  <p>নাম: {{user.name}}</p>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const {createApp, reactive} = Vue;
createApp({
  setup() {
    const user = reactive({
      name: ""
    });
    return {user};
  }
}).mount("#app");
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<body>

<div id="app">
  <input v-model="name" placeholder="নাম">
  <input v-model="land" placeholder="দেশ">
  <p>তথ্য: {{info}}</p>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const {createApp, ref, computed} = Vue;
createApp({
  setup() {
    const name = ref("");
    const land = ref("");
    const info = computed(() => {
      return name.value + " " + land.value;
    });
    return {name, land, info};
  }
}).mount("#app");
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<body>

<div id="app">
  <p>{{user.name}}</p>
  <button @click="user.name = 'পরিবর্তন'">চেষ্টা করো</button>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const {createApp, reactive, readonly} = Vue;
createApp({
  setup() {
    const state = reactive({
      name: "আরিফ"
    });
    const user = readonly(state);
    return {user};
  }
}).mount("#app");
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<body>

<div id="app">
  <input v-model="name" placeholder="আপনার নাম">
  <p>{{message}}</p>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const {createApp, ref, watch} = Vue;
createApp({
  setup() {
    const name = ref("");
    const message = ref("");
    watch(name, (newName) => {
      message.value = "হ্যালো " + newName;
    });
    return {name, message};
  }
}).mount("#app");
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<body>

<div id="app">
  <input v-model="name" placeholder="আপনার নাম">
  <p>{{message}}</p>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const {createApp, ref, watchEffect} = Vue;
createApp({
  setup() {
    const name = ref("");
    const message = ref("");
    watchEffect(() => {
      message.value = "হ্যালো " + name.value;
    });
    return {name, message};
  }
}).mount("#app");
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<body>

<div id="app">
  <button @click="show"> পরিবর্তন </button>
  <p ref="message">ফলাফল</p>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const {createApp, ref, watchPostEffect} = Vue;
createApp({
  setup() {
    const message = ref(null);
    const show = () => {
      message.value.textContent = "পরিবর্তন";
    };
    watchPostEffect(() => {
      console.log(message.value);
    });
    return {message, show};
  }
}).mount("#app");
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<body>

<div id="app">
  <child-component></child-component>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const {createApp, provide, inject} = Vue;
const ChildComponent = {
  setup() {
    const message = inject("message");
    return {message};
  },
  template: "<p>{{message}}</p>"
};
createApp({
  components: {
    ChildComponent
  },
  setup() {
    provide("message", "ইনজেক্ট মেছেজ");
  }
}).mount("#app");
</script>
</body>
</html>