VueJs Tutorials
- VueJs
- VueJs Instance
- Templates
- Component
- Computed Properties
- Watch Property
- Binding
- Events
- Rendering
- Directives
- Mixins
- Reactive Interface
- String Length
- Onchange Events
- Ternery Operator
- Global variable
- Get data attribute value
- String to array
- How to Get Array Length
- call a function on Page load
- current Date and Time
- Replace String
- Open link on new tab
- setTimeout in Vue JS
- object or array empty or not
- get element by id
- Laravel Vue Flash Message
What is VueJs?
VueJS is an open source JavaScript framework used to develop interactive web interfaces. The first version of VueJS was released in Feb 2014.
File name : index.php
Features
Envoronment Setup :-
File name : index.php
<html>
<head>
<script type = "text/javascript" src = "vue.min.js"></script>
</head>
<body></body>
</html>
Using CDN
File name : index.php
https://cdn.jsdelivr.net/npm/vue/dist/vue.js
https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js
Using NPM
First install node js
create folder vuejs in c drive
C:\vuejs>npm install -g @vue/cli
Using CLI Command Line
C:\>npm install --global vue-cli
######################## OR ###################
C:\vuejs>npm install -g @vue/cli
Vue Version
C:\vuejs>vue --version
@vue/cli 4.5.15
open visual studio code
search visual studio code
run as administrator
go on terminal
PS C:\Users\Mahtab> set-executionpolicy unrestricted
create project directory
PS C:\Users\Mahtab> mkdir vue_project
PS C:\Users\Mahtab> go vue_project directory
PS C:\Users\Mahtab\vue_project>
C:\Users\Mahtab\vue_project>
PS C:\Users\Mahtab\vue_project> vue create sana
press Enter
Vue CLI v4.5.15
✨ Creating project in C:\vuejs\sana.
⚙️ Installing CLI plugins. This might take a while...
C:\Users\Mahtab\vue_project>cd sana
C:\Users\Mahtab\vue_project\sana> npm run serve
Node.js: Server-side JavaScript
allow Access
DONE Compiled successfully in 17590ms 11:57:16 pm
App running at:
- Local: http://localhost:8080/
- Network: http://192.168.0.106:8080/
Note that the development build is not optimized.
To create a production build, run npm run build.
go on browser
http://192.168.0.106:8080/
click on file on visual studio code
choose open folder
chose project folder sana under vue_project directory
create the project using Webpack
vue init webpack myproject
To get started, use the following command.
cd myproject
npm install
npm run dev
Example
VueJs Introduction
{{ message }}
interpolation i.e. {{}}. This interacts with VueJS and prints the data in the browser.
NOTE : we are calling Vue instance, which takes the id of the DOM element i.e. e1:'#intro', it is the id of the div. There is data with the message which is assigned the value 'itechxpert'. VueJS interacts with DOM and changes the value in the DOM {{message}} with 'itechxpert'.