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
How to create instance of vueJs?
Vue application starts by creating a new Vue instance. it is created by the Vue function:
A Vue application consists of a root Vue instance created with new Vue.
File name : Syntax
var app = new Vue({
// statements
})
How to print message?
File name : index.php
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js
"></script>
</head>
<body>
<div id = "msg">
{{message}}
</div>
<script>
var app = new Vue({
el: '#msg',
data: {
message: 'Hello MY First VueJs'
}
})
</script>
</body>
</html>
Dynamically load date when mouse hover on text
File name : index.php
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js
"></script>
</head>
<body>
<div id="msg">
<span v-bind:title="message">
Hover your mouse over me.
</span>
</div>
<script>
var app2 = new Vue({
el: '#msg',
data: {
message: 'You visit this page on ' + new Date().toLocaleString()
}
})
</script>
</body>
</html>
Data and Methods
When a Vue instance is created, it adds all the properties found in its data object to Vue’s reactivity system. When the values of those properties change, the view will “react”, updating to match the new values.
File name : index.php
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js
"></script>
</head>
<body>
<div id="msg">
</div>
<script>
var data = { a: 1 }
var vm = new Vue({
data: data
})
// Getting the property on the instance
// returns the one from the original data
vm.a == data.a // => true
alert(data.a);
// Setting the property on the instance
// also affects the original data
vm.a = 2
data.a
alert(data.a);
</script>
</body>
</html>
Example
File name : index.php
<html>
<head>
<title>create VueJs Instance</title>
<script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id = "stud">
<h1>Firstname : {{firstname}}</h1>
<h1>Lastname : {{lastname}}</h1>
<h1>{{fullname()}}</h1>
</div>
<script>
var vm = new Vue({
el: '#stud',
data: {
firstname : "Mahtab",
lastname : "Habib"
},
methods: {
fullname: function() {
return "I am "+this.firstname +" "+ this.lastname;
}
}
})
</script>
</body>
</html>
File name : index.php
<html>
<head>
<title>create VueJs Instance</title>
<script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id = "stud">
<h1>Firstname : {{firstname}}</h1>
<h1>Lastname : {{lastname}}</h1>
<h1>{{fullname()}}</h1>
</div>
<script type = "text/javascript" src = "js/vue_instance.js"></script>
</body>
</html>
external vuejs
File name : vue_instance.js
var vm = new Vue({
el: '#stud',
data: {
firstname : "Mahtab",
lastname : "Habib"
},
methods: {
fullname: function() {
return "I am "+this.firstname +" "+ this.lastname;
}
}
})
Note :- there is a parameter called el. It takes the id of the DOM element. In the above example, we have the id #stud. It is the id of the div element,