ভিইউই

<!DOCTYPE html>
<html>
<body>

<div id="app">

<button @click="execute('div')">ক্লিক করুন</button>

<div>
  <h1>প্রোগ্রামিং শিখুন</h1>
  <p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>

</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
Vue.createApp({
  methods: {
    execute(tag) {
      document.querySelector(tag).style.background = "pink";
    }
  }
}).mount("#app");
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<div id="app">

<button @dblclick="execute('div')">ক্লিক করুন</button>

<div>
  <h1>প্রোগ্রামিং শিখুন</h1>
  <p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>

</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
Vue.createApp({
  methods: {
    execute(tag) {
      document.querySelector(tag).style.background = "pink";
    }
  }
}).mount("#app");
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<div id="app">

<button
  @mousedown="pressed"
  @mouseup="released">
  {{ message }}
</button>

</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
Vue.createApp({
  data() {
    return {
      message: "ক্লিক করুন"
    };
  },
  methods: {
    pressed(event) {
      this.message = "চাপুন";
    },
    released(event) {
      this.message = "ছাড়ুন";
    }
  }
}).mount("#app");
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<div id="app">

<div
  @mousemove="move"
  style="height:100px; background:lightgray;">
  মাউস এখানে নিয়ে আসুন
</div>

<p>{{ message }}</p>

</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
Vue.createApp({
  data() {
    return {
      message: ""
    };
  },
  methods: {
    move(event) {
      this.message = event.clientX + ", " + event.clientY;
    }
  }
}).mount("#app");
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<div id="app">

<div
  @mouseover="over"
  style="padding:30px; background:lightgray;">
  মাউস ওপরে আনুন
</div>

</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
Vue.createApp({
  methods: {
    over(event) {
      event.target.style.background = "lightgreen";
    }
  }
}).mount("#app");
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<div id="app">

<div
  @mouseout="out"
  style="padding:30px; background:lightgray;">
  মাউস বাইরে নিয়ে যান
</div>

</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
Vue.createApp({
  methods: {
    out(event) {
      event.target.style.background = "pink";
    }
  }
}).mount("#app");
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<div id="app">

<div
  @contextmenu="showMessage"
  style="padding:30px;">
  এখানে রাইট ক্লিক করুন
</div>

</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
Vue.createApp({
  methods: {
    showMessage(event) {
      event.preventDefault();
      alert("কনটেক্সট মেনু নিষ্ক্রিয় করা হয়েছে");
    }
  }
}).mount("#app");
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<div id="app">

<input
  @keydown="keyDown"
  placeholder="press a key">

<p>{{ message }}</p>

</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
Vue.createApp({
  data() {
    return {
      message: ""
    };
  },
  methods: {
    keyDown(event) {
      this.message = event.key;
    }
  }
}).mount("#app");
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<div id="app">

<input
  @keypress="keyPress"
  placeholder="press a key">

<p>{{ message }}</p>

</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
Vue.createApp({
  data() {
    return {
      message: ""
    };
  },
  methods: {
    keyPress(event) {
      this.message = event.key;
    }
  }
}).mount("#app");
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<div id="app">

<input
  @keyup="keyUp"
  placeholder="একটি কী ছেড়ে দিন">

<p>{{ message }}</p>

</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
Vue.createApp({
  data() {
    return {
      message: ""
    };
  },
  methods: {
    keyUp(event) {
      this.message = event.key;
    }
  }
}).mount("#app");
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<div id="app">

<input
  @focus="focused"
  placeholder="এখানে ক্লিক করুন">

</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
Vue.createApp({
  methods: {
    focused(event) {
      event.target.style.background = "lightgreen";
    }
  }
}).mount("#app");
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<div id="app">

<input
  @blur="blurred"
  placeholder="বাইরে ক্লিক করুন">

</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
Vue.createApp({
  methods: {
    blurred(event) {
      event.target.style.background = "pink";
    }
  }
}).mount("#app");
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<div id="app">

<input
  v-model="text"
  @input="typed"
  placeholder="কিছু লিখুন">

<p>{{ message }}</p>

</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
Vue.createApp({
  data() {
    return {
      text: "",
      message: ""
    };
  },
  methods: {
    typed() {
      this.message = this.text;
    }
  }
}).mount("#app");
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<div id="app">

<form @submit.prevent="submitForm">
  <input placeholder="নাম">
  <button>সাবমিট</button>
</form>

<p>{{ message }}</p>

</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
Vue.createApp({
  data() {
    return {
      message: ""
    };
  },
  methods: {
    submitForm() {
      this.message = "ফর্ম জমা দেওয়া হয়েছে";
    }
  }
}).mount("#app");
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<div id="app">

<form @reset="resetForm">
  <input value="আরিফ">
  <button type="reset">রিসেট</button>
</form>

<p>{{ message }}</p>

</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
Vue.createApp({
  data() {
    return {
      message: ""
    };
  },
  methods: {
    resetForm() {
      this.message = "ফর্ম রিসেট হয়েছে";
    }
  }
}).mount("#app");
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<div id="app">

<p @copy="copied">
  এই লেখাটি কপি করুন
</p>

<p>{{ message }}</p>

</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
Vue.createApp({
  data() {
    return {
      message: ""
    };
  },
  methods: {
    copied() {
      this.message = "লেখা কপি হয়েছে";
    }
  }
}).mount("#app");
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<div id="app">

<input
  value="এই লেখাটি কাটুন"
  @cut="cutText">

<p>{{ message }}</p>

</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
Vue.createApp({
  data() {
    return {
      message: ""
    };
  },
  methods: {
    cutText() {
      this.message = "লেখা কাটা হয়েছে";
    }
  }
}).mount("#app");
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<div id="app">

<input
  @paste="pasted"
  placeholder="এখানে পেস্ট করুন">

<p>{{ message }}</p>

</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
Vue.createApp({
  data() {
    return {
      message: ""
    };
  },
  methods: {
    pasted() {
      this.message = "লেখা পেস্ট হয়েছে";
    }
  }
}).mount("#app");
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<div id="app">

<p
  draggable="true"
  @drag="dragging">
  এই লেখাটি টেনে নিন
</p>

<p>{{ message }}</p>

</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
Vue.createApp({
  data() {
    return {
      message: ""
    };
  },
  methods: {
    dragging() {
      this.message = "";
    }
  }
}).mount("#app");
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<div id="app">

<p
  draggable="true"
  @dragstart="dragStart">
  এই লেখাটি টেনে নিন
</p>

<p>{{ message }}</p>

</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
Vue.createApp({
  data() {
    return {
      message: ""
    };
  },
  methods: {
    dragStart() {
      this.message = "টেনে নেওয়া শুরু হয়েছে";
    }
  }
}).mount("#app");
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<div id="app">

<p draggable="true">আমাকে টেনে নিন</p>

<div
  @dragenter="dragEnter"
  style="padding:30px; background:lightgray;">
  ছেড়ে দেওয়ার স্থান
</div>

</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
Vue.createApp({
  methods: {
    dragEnter(event) {
      event.target.style.background = "lightgreen";
    }
  }
}).mount("#app");
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<div id="app">

<p draggable="true">আমাকে টেনে নিন</p>

<div
  @dragleave="dragLeave"
  style="padding:30px; background:lightgray;">
  এই স্থান থেকে বের হয়ে যান
</div>

</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
Vue.createApp({
  methods: {
    dragLeave(event) {
      event.target.style.background = "pink";
    }
  }
}).mount("#app");
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<div id="app">

<p draggable="true">আমাকে টেনে নিন</p>

<div
  @dragover.prevent="dragOver"
  style="padding:30px; background:lightgray;">
  এই স্থানের ওপর টেনে আনুন
</div>

</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
Vue.createApp({
  methods: {
    dragOver(event) {
    }
  }
}).mount("#app");
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<div id="app">

<p
  draggable="true"
  @dragstart="dragStart">
  আমাকে টেনে নিন
</p>

<div
  @dragover.prevent
  @drop="drop"
  style="padding:30px; background:lightgray;">
  এখানে ছেড়ে দিন
</div>

</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
Vue.createApp({
  methods: {
    dragStart(event) {
      event.dataTransfer.setData("text", event.target.innerText);
    },
    drop(event) {
      event.target.innerHTML =
        event.dataTransfer.getData("text");
    }
  }
}).mount("#app");
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<div id="app">

<div
  @scroll="scrolled"
  style="height:100px; overflow:auto;">
  <div style="height:300px;">
    এই বক্সটি স্ক্রল করুন
  </div>
</div>

<p>{{ message }}</p>

</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
Vue.createApp({
  data() {
    return {
      message: ""
    };
  },
  methods: {
    scrolled() {
      this.message = "";
    }
  }
}).mount("#app");
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<div id="app">

<div
  @wheel="wheel"
  style="height:100px; overflow:auto; background:lightgray;">
  এখানে মাউসের চাকা স্ক্রল করুন
</div>

<p>{{ message }}</p>

</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
Vue.createApp({
  data() {
    return {
      message: ""
    };
  },
  methods: {
    wheel(event) {
      this.message = event.deltaY;
    }
  }
}).mount("#app");
</script>

</body>
</html>