Scribd
Upload
3 views

Day 01

Vue.js is a lightweight JavaScript framework designed for building dynamic web applications and user interfaces. Key features include reactive data binding, a component-based architecture, and a small size for fast performance. The document also outlines steps to set up a Vue.js project in VS Code and provides basic code examples for data binding and methods.

Uploaded by

Md Ariful Islam
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views

Day 01

Vue.js is a lightweight JavaScript framework designed for building dynamic web applications and user interfaces. Key features include reactive data binding, a component-based architecture, and a small size for fast performance. The document also outlines steps to set up a Vue.js project in VS Code and provides basic code examples for data binding and methods.

Uploaded by

Md Ariful Islam
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

What is Vue.js?

Vue.js is a simple and lightweight JavaScript framework used to build


dynamic web apps and user interfaces.

(Vue.js একটি সহজ এবং হালকা JavaScript ফ্রেমওয়ার্ক যা ডায়নামিক ওয়েব অ্যাপ
এবং ইউজার ইন্টারফেস তৈরি করতে ব্যবহৃত হয়।)

Key Features:
1. Reactive Data Binding: ডেটা পরিবর্তনের সাথে সাথে UI আপডেট হয়।
2. Component-Based Architecture: পুনর্ব্যবহারযোগ্য কম্পোনেন্ট দিয়ে UI
তৈরি করা যায়।
3. Lightweight: এটি আকারে ছোট এবং দ্রুতগতির।

------------ Steps to Create a project in Vue.js--------------


………………Steps to Set Up VS Code for Vue.js……………………
1. Install Required Extensions:
○ Vetur: Vue tooling support.
○ Vue 2 Snippets: Code snippets for Vue.js 2 (also supports Vue 3).
○ Vue Peek: Lets you jump to Vue component definitions.
○ Vue.js Extension Pack: A collection of useful extensions for Vue.js
development.
2. Setup Complete:
○ Open the terminal in VS Code.
○ Navigate to the folder containing index.html.
○ Using Vue from CDN in the head section from
vuejs.org/guide/quick-start for vue linked

3. <head>
4. <meta charset="UTF-8" />
5. <meta name="viewport" content="width=device-
width, initial-scale=1.0" />
6. <!-- Using Vue.js from CDN -->
7. <script
8. src="https://unpkg.com/vue@3/dist/vue.global.js">
9. </script>
10. <title>Vue Test</title>
11. </head>

○ Open index.html in our browser to test our Vue.js setup.


First Code of Vue.js:

2nd code:
……………………….Basic Codes of Vue.js……………………………..

Data return:
Source code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<title>Vue Test</title>
</head>
<body>
<div id="app">
<p>{{ title }}</p>
<p>{{ istrue }}</p>
<p>{{ cars[0] }}</p>
<p>{{ robot.name }}</p>
<p>{{ xyz() }}</p>

</div>
<script>
const app = Vue.createApp({
data() {
return {
title: "Arif",
istrue:true,
cars:['car-y','car-z'],
robot:{
name:"robot-x"
},
xyz:()=>{
return "hello world";
}

};
}
});

app.mount("#app");
</script>
</body>
</html>
OUTPUT :

Methods:

Source code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<title>Vue Test</title>
</head>
<body>
<div id="app">

<p>{{ xyz() }}</p>

</div>
<script>
const app = Vue.createApp({

methods:{
xyz:function(){
return 'Hello, World!';
}
}
});

app.mount("#app");
</script>
</body>
</html>

Output:

You might also like