Vue Intro
A JavaScript framework is called Vue. A <script> tag can be used to add it to an HTML page.
Vue uses Expressions to link data to HTML and Directives to enhance HTML attributes.
Vue is a JavaScript Framework
Written in JavaScript, Vue is a front-end framework.
React and Angular are similar frameworks to Vue, but Vue is lighter and simpler to use.
Using a script tag, a web page can incorporate Vue, which is available as a JavaScript file:
<script data-minify="1"
src="https://codingask.com/wp-content/cache/min/1/vue@3/dist/vue.global.js?ver=1730183021" defer>
</script>
Why Learn Vue?
- It is basic and user-friendly.
- It can manage both easy and difficult tasks.
- its expanding user base and support from the open-source community.
- While writing HTML and JavaScript requires us to specify HOW the two languages are connected, with Vue, all we need to do is ensure that the two languages are connected; Vue handles the rest.
- With a template-based syntax, two-way data binding, and centralized state management, it enables a more productive development approach.
Don’t worry if you find some of these things difficult to understand; you will by the end of the tutorial.
The Options API
The Options API and the Composition API are the two distinct ways to write code in Vue.
You may effortlessly transition from knowing the Options API to the Composition API once you understand the fundamental ideas behind both.
This course is written using the Options API since it is thought to be more beginner-friendly and has a more identifiable structure.
For additional information regarding the distinctions between the Composition API and the Options API, view the page at the conclusion of this tutorial.
My first page
Now, let’s learn how to make our first Vue webpage in just five simple steps:
- Begin with a simple HTML document.
- Create a <div> tag with the id=”app” so that Vue can connect to it.
- Add a <script> tag with a link to Vue inside it to instruct the browser on how to handle Vue code.
- Include the Vue instance in a <script> tag.
- Attach the <div id=”app”> tag to the Vue object.
The complete code is provided in a “Try It Yourself” sample at the end, and the steps are explained in detail below.
Step 1: HTML page
Begin with a basic HTML page:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My first Vue page</title>
</head>
<body>
<script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
</html>
Step 2: Add a < div >
For Vue to connect to your page, it needs an HTML element.
Within the <body> tag, insert a <div> tag and give it an id:
<body>
<div id="app"></div>
</body>
Step 3: Add a link to Vue
Add this <script> tag in order to aid our browser in interpreting our Vue code:
<script data-minify="1" src="https://codingask.com/wp-content/cache/min/1/vue@3/dist/vue.global.js?ver=1730183021" defer></script>
Step 4: Add the Vue instance
Our Vue code must now be added.
This is known as the Vue instance, and at the moment, it only has a message on it, but it can also hold methods, data, and other things.
Our Vue instance is linked to the <div id=”app”> tag on the final line of this <script> element:
<div id="app"></div>
<script data-minify="1" src="https://codingask.com/wp-content/cache/min/1/vue@3/dist/vue.global.js?ver=1730183021" defer></script>
<script>
const app = Vue.createApp({
data() {
return {
message: "Hello World!"
}
}
})
app.mount('#app')
</script>
Step 5: Display 'message' with Text Interpolation
The last option is text interpolation, which uses the double curly brackets {{ }} in Vue syntax as a data placeholder.
<div id="app"> {{ message }} </div>
The text included in the’message’ field inside the Vue instance will be exchanged by the browser with {{ message }}.
This is our initial Vue page:
Example: My first Vue page!
Use the ‘Try it Yourself’ button below to test this code.
<!DOCTYPE html>
<html lang="en">
<head>
<title>My first Vue page</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script data-minify="1" src="https://codingask.com/wp-content/cache/min/1/vue@3/dist/vue.global.js?ver=1730183021" defer></script>
<script>
const app = Vue.createApp({
data() {
return {
message: "Hello World!"
}
}
})
app.mount('#app')
</script>
</body>
</html>
Text Interpolation
Text interpolation is the process of pulling text from a Vue instance for display on a web page.
The following code is on the page that the browser receives:
<div id="app"> {{ message }} </div>
The Vue code is then translated into this by the browser after it discovers the text inside the ‘message’ field of the Vue instance:
<div id="app">Hello World!</div>
JavaScript in Text Interpolation
The double curly braces {{ }} can also contain simple JavaScript expressions.
Example
To add a random number to the message inside the div element, use the following JavaScript syntax:
<div id="app">
{{ message }} <br>
{{'Random number: ' + Math.ceil(Math.random()*6) }}
</div>
<script data-minify="1" src="https://codingask.com/wp-content/cache/min/1/vue@3/dist/vue.global.js?ver=1730183021" defer></script>
<script>
const app = Vue.createApp({
data() {
return {
message: "Hello World!"
}
}
})
app.mount('#app')
</script>
