Declarative Programming āĻāĻŋ?
Declarative Programming āĻšāĻā§āĻā§ Computer Programming āĻāĻ° structure āĻāĻŦāĻ elements āĻ¤ā§āĻ°āĻŋāĻ° āĻāĻāĻāĻž Programming Paradigm āĻ¯āĻž Program āĻŦāĻž Code āĻāĻ° control flow āĻā§ describe āĻ¨āĻž āĻāĻ°ā§ āĻāĻ° outcome āĻŦāĻž solution āĻāĻ° āĻāĻĒāĻ° āĻā§āĻ° āĻĻā§āĻāĻ¯āĻŧāĻž āĻšāĻ¯āĻŧāĨ¤
Declarative Programming read āĻāĻ°āĻž āĻ āĻ¨ā§āĻ āĻ¸āĻšāĻ , āĻāĻžāĻ°āĻŖ āĻāĻāĻžāĻ¨ā§ āĻ āĻ¨ā§āĻ lower level code āĻāĻŦāĻ āĻ¤āĻžāĻ° āĻŦāĻŋāĻ¸ā§āĻ¤āĻžāĻ°āĻŋāĻ¤ hide āĻĨāĻžāĻā§āĨ¤ āĻāĻāĻžāĻ¨ā§ āĻāĻŽāĻžāĻĻā§āĻ°āĻā§ āĻ¸āĻŋāĻ¸ā§āĻā§āĻŽā§āĻ° āĻŦāĻž āĻā§āĻĄā§āĻ° āĻ āĻ¨ā§āĻ lower level details āĻāĻžāĻ¨āĻ¤ā§ āĻšāĻ¯āĻŧāĻ¨āĻžāĨ¤
Vue.js core āĻāĻŽāĻžāĻĻā§āĻ°āĻā§ āĻ¸āĻ°āĻžāĻ¸āĻ°āĻŋ template syntax āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ°ā§āĻ° āĻŽāĻžāĻ§ā§āĻ¯āĻŽā§ DOM āĻ declaratively render data āĻ¸āĻ°āĻŦāĻ°āĻžāĻš āĻāĻ°āĻ¤ā§ āĻ¸ā§āĻ¯ā§āĻ āĻĻā§āĻ¯āĻŧāĨ¤ āĻ¨āĻŋāĻā§āĻ° āĻāĻĻāĻžāĻšāĻ°āĻŖ āĻĻā§āĻā§āĻ¨:
<html>
<head>
<title>Declarative</title>
<script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script type = "text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>
āĻŦā§āĻ¯āĻžāĻā§āĻ¯āĻž:
āĻ˛āĻā§āĻˇā§āĻ¯ āĻāĻ°ā§āĻ¨ āĻāĻĒāĻ°ā§āĻ° āĻā§āĻĄā§ āĻāĻĒāĻ¨āĻŋ āĻāĻžāĻ¨āĻ¤ā§ āĻĒāĻžāĻ°āĻā§āĻ¨ āĻ¨āĻž , âHello Vueâ Message āĻāĻŋ āĻĒā§āĻ°āĻĻāĻ°ā§āĻļāĻ¨ā§āĻ° āĻĒāĻŋāĻāĻ¨ā§ āĻāĻŋ āĻ§āĻ°āĻŖā§āĻ° āĻĒā§āĻ°ā§āĻā§āĻ°āĻžāĻŽ āĻŦāĻž āĻ˛āĻāĻŋāĻ āĻāĻžāĻ āĻāĻ°āĻ¤ā§āĻā§ , āĻāĻĒāĻ¨āĻŋ āĻļā§āĻ§ā§ āĻā§āĻ¨ā§āĻā§āĻ¨ Vue Instance āĻāĻ° Property el āĻāĻ° value āĻšāĻŋāĻ¸ā§āĻŦā§ āĻāĻāĻāĻž id attribute āĻĻāĻŋāĻ¤ā§ āĻšāĻŦā§ , āĻ āĻ°ā§āĻĨāĻžā§ āĻ¯ā§āĻāĻžāĻ¨ā§ Message āĻāĻŋ āĻĒā§āĻ°āĻĻāĻ°ā§āĻļāĻ¨ āĻāĻ°āĻŦā§āĻ¨āĨ¤ āĻāĻ° āĻāĻŋ message āĻĒā§āĻ°āĻĻāĻ°ā§āĻļāĻ¨ āĻšāĻŦā§ message āĻĒā§āĻ°āĻĒāĻžāĻ°ā§āĻāĻŋ āĻāĻ° value āĻšāĻŋāĻ¸ā§āĻŦā§ āĻĻāĻŋāĻ¤ā§ āĻšāĻŦā§āĨ¤
Vue Instances āĻāĻŋ?
VueJS āĻ Vue constructor function āĻĻāĻŋāĻ¯āĻŧā§ āĻ¤ā§āĻ°āĻŋ Object āĻā§ Vue Instance āĻŦāĻ˛āĻž āĻšāĻ¯āĻŧāĨ¤ VueJS āĻ¨āĻŋāĻ¯āĻŧā§ āĻāĻžāĻ āĻāĻ°āĻžāĻ° āĻāĻ¨ā§āĻ¯ āĻāĻŽāĻžāĻĻā§āĻ°āĻā§ new Vue āĻĻāĻŋāĻ¯āĻŧā§ āĻāĻāĻāĻž Vue Instance āĻ¤ā§āĻ°āĻŋ āĻāĻ°āĻ¤ā§ āĻšāĻŦā§ , āĻ¯āĻž āĻšāĻŦā§ Vue āĻāĻ° root instance. āĻāĻŦāĻ āĻāĻāĻŋ āĻāĻāĻāĻŋ Nested Tree āĻšāĻŋāĻ¸ā§āĻŦā§ āĻĨāĻžāĻā§āĨ¤ āĻāĻĻāĻžāĻšāĻ°āĻŖ āĻ¸ā§āĻŦāĻ°ā§āĻĒ āĻāĻāĻāĻž todo application āĻ āĻ¨ā§āĻāĻāĻž āĻāĻāĻ°āĻāĻŽ āĻĨāĻžāĻāĻŦā§āĨ¤
Root Instance
ââ TodoList
ââ TodoItem
â ââ DeleteTodoButton
â ââ EditTodoButton
ââ TodoListFooter
ââ ClearTodosButton
ââ TodoListStatistics
VueJS Instance Syntax
VueJS āĻ āĻāĻŽāĻžāĻĻā§āĻ°āĻā§ new Vue āĻĻāĻŋāĻ¯āĻŧā§ Instance āĻ¤ā§āĻ°āĻŋ āĻāĻ°āĻ¤ā§ āĻšāĻŦā§āĨ¤ āĻ¨āĻŋāĻā§ āĻ¸āĻŋāĻ¨āĻā§āĻā§āĻ¸ āĻĻā§āĻāĻ¯āĻŧāĻž āĻšāĻ˛ā§ :
var app = new Vue({
// options
})
āĻāĻŦāĻžāĻ° āĻāĻ˛ā§āĻ¨ Vue Instance āĻĻāĻŋāĻ¯āĻŧā§ āĻāĻāĻāĻž āĻĒāĻ°āĻŋāĻĒā§āĻ°ā§āĻ¨ āĻāĻĻāĻžāĻšāĻ°āĻŖ āĻĻā§āĻāĻŋ :
<html>
<head>
<title>Instance</title>
<script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id = "info">
<p><strong>Firstname :</strong> {{firstname}}</p>
<p><strong>Lastname :</strong> {{lastname}}</p>
<p>{{mydetails()}}</p>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#info',
data: {
firstname : "Masud",
lastname : "Alam",
age : 33
},
methods: {
mydetails : function() {
return "I am "+this.firstname +" "+ this.lastname +" and I'm "+ this.age+ " Years Old";
}
}
})
</script>
</body>
</html>
Output
āĻŦā§āĻ¯āĻžāĻā§āĻ¯āĻž:
Vue Instance āĻ āĻĒā§āĻ°āĻĨāĻŽā§ el āĻ¨āĻžāĻŽā§ āĻāĻāĻāĻž āĻĒā§āĻ¯āĻžāĻ°āĻžāĻŽāĻŋāĻāĻžāĻ° āĻāĻā§ , āĻ¯āĻžāĻ¤ā§ āĻāĻĒāĻ¨āĻžāĻ° DOM element āĻāĻ° id āĻāĻŋ āĻ°āĻžāĻāĻ¤ā§ āĻšāĻŦā§ , āĻ āĻ°ā§āĻĨāĻžā§ āĻ¯ā§āĻāĻžāĻ¨ā§ āĻāĻĒāĻ¨āĻŋ āĻ°ā§āĻāĻžāĻ˛ā§āĻ āĻĻā§āĻāĻ¤ā§ āĻāĻžāĻ¨ āĻ¸ā§āĻāĻžāĻ¨āĻāĻžāĻ° id āĻāĻŋ āĨ¤ āĻāĻŽāĻ°āĻž āĻāĻāĻžāĻ¨ā§ el āĻĒā§āĻ¯āĻžāĻ°āĻžāĻŽāĻŋāĻāĻžāĻ°ā§ info āĻ¨āĻžāĻŽā§ Id āĻāĻŋ āĻ°ā§āĻā§āĻāĻŋāĨ¤ āĻāĻ° āĻāĻ Id āĻāĻŋ āĻāĻŽāĻ°āĻž āĻāĻŽāĻžāĻĻā§āĻ° div āĻ¨āĻžāĻŽāĻ DOM āĻāĻ˛āĻŋāĻŽā§āĻ¨ā§āĻā§ āĻ¸ā§āĻ āĻāĻ°ā§āĻāĻŋāĨ¤
āĻāĻ° Vue Instance āĻ āĻĻā§āĻŦāĻŋāĻ¤ā§āĻ¯āĻŧ āĻĒā§āĻ¯āĻžāĻ°āĻžāĻŽāĻŋāĻāĻžāĻ° āĻāĻŋ āĻšāĻā§āĻā§ data. āĻāĻ° āĻāĻ° āĻ¨āĻžāĻŽ āĻĻāĻŋāĻ¯āĻŧā§āĻ āĻŦā§āĻāĻž āĻ¯āĻžāĻā§āĻā§ , āĻāĻāĻžāĻ¨ā§ āĻāĻŽāĻžāĻĻā§āĻ°āĻā§ data āĻ āĻ°ā§āĻĨāĻžā§ Instance āĻāĻ° āĻĒā§āĻ°āĻĒāĻžāĻ°ā§āĻāĻŋ āĻā§āĻ˛ā§ āĻ°āĻžāĻāĻ¤ā§ āĻšāĻŦā§āĨ¤ āĻāĻŽāĻ°āĻž āĻāĻāĻžāĻ¨ā§ firstname,lastname āĻāĻŦāĻ age āĻ¨āĻžāĻŽā§ āĻ¤āĻŋāĻ¨āĻāĻž āĻĒā§āĻ°āĻĒāĻžāĻ°ā§āĻāĻŋ āĻ°ā§āĻā§āĻāĻŋāĨ¤
āĻāĻ° Vue Instance āĻāĻ° āĻ¸āĻ°ā§āĻŦāĻļā§āĻˇ Parameter āĻāĻŋ āĻšāĻā§āĻā§ methods āĻ¯āĻž āĻĻāĻŋāĻ¯āĻŧā§ āĻāĻŽāĻ°āĻž data āĻā§ āĻĒā§āĻ°āĻ¸ā§āĻ¸ āĻāĻ°ā§ āĻāĻāĻāĻž āĻā§āĻ¯āĻžāĻ˛ā§ āĻ°āĻŋāĻāĻžāĻ°ā§āĻ¨ āĻāĻ°āĻ¤ā§ āĻĒāĻžāĻ°āĻŦāĨ¤ āĻāĻāĻžāĻ¨ā§ āĻāĻŽāĻ°āĻž mydetails āĻ āĻāĻŽāĻžāĻĻā§āĻ° āĻŽā§āĻĨāĻĄā§āĻ° process āĻĄāĻžāĻāĻž āĻ°āĻŋāĻāĻžāĻ°ā§āĻ¨ āĻāĻ°ā§āĻāĻŋāĨ¤
data āĻā§ Object āĻšāĻŋāĻ¸ā§āĻŦā§ āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ° :
āĻāĻĒāĻ¨āĻŋ āĻāĻžāĻāĻ˛ā§ data āĻ¤ā§ value āĻšāĻŋāĻ¸ā§āĻŦā§ āĻāĻāĻāĻž Object assign āĻāĻ°āĻ¤ā§ āĻĒāĻžāĻ°āĻŦā§āĻ¨āĨ¤ āĻ¨āĻŋāĻā§āĻ° āĻāĻĻāĻžāĻšāĻ°āĻŖ āĻĻā§āĻā§āĻ¨ :
<html>
<head>
<title>Instance</title>
<script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id = "info">
<p><strong>First name :</strong> {{fname}}</p>
<p><strong>Last name :</strong> {{lname}}</p>
<p>{{mydetails()}}</p>
</div>
<script type = "text/javascript">
var student = { fname: "Masud", lname: "Alam", age:33}
var vm = new Vue({
el: '#info',
data:student,
methods: {
mydetails : function() {
return "I am "+student.fname +" "+ student.lname +" and I'm "+ student.age+ " Years Old";
}
}
})
</script>
</body>
</html>
Output
Vue Instance Result
data āĻā§ Method āĻšāĻŋāĻ¸ā§āĻŦā§ āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ° :
āĻāĻĒāĻ¨āĻŋ āĻāĻžāĻāĻ˛ā§ data āĻ¤ā§ value āĻšāĻŋāĻ¸ā§āĻŦā§ āĻāĻāĻāĻž Method assign āĻāĻ°āĻ¤ā§ āĻĒāĻžāĻ°āĻŦā§āĻ¨āĨ¤ āĻ¨āĻŋāĻā§āĻ° āĻāĻĻāĻžāĻšāĻ°āĻŖ āĻĻā§āĻā§āĻ¨ :
<html>
<head>
<title Instance</title>
<script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id = "info">
<p><strong>First name :</strong> {{fname}}</p>
<p><strong>Last name :</strong> {{lname}}</p>
<p>{{mydetails()}}</p>
</div>
<script type = "text/javascript">
var student = { fname: "Masud", lname: "Alam", age:33}
var vm = new Vue({
el: '#info',
data:function(){
return student
},
methods: {
mydetails : function() {
return "I am "+student.fname +" "+ student.lname +" and I'm "+ student.age+ " Years Old";
}
}
})
</script>
</body>
</html>
Instance Lifecycle Hooks
āĻĒā§āĻ°āĻ¤āĻŋāĻāĻŋ Vue instance āĻ¤ā§āĻ°āĻŋ āĻšāĻāĻ¯āĻŧāĻžāĻ° āĻĒāĻ° āĻāĻāĻŋ āĻ§āĻžāĻĒā§ āĻ§āĻžāĻĒā§ āĻ¤āĻžāĻ° āĻāĻžāĻ āĻā§āĻ˛ā§ āĻļā§āĻˇ āĻāĻ°ā§āĨ¤ āĻāĻĻāĻžāĻšāĻ°āĻŖ āĻ¸ā§āĻŦāĻ°ā§āĻĒ , āĻāĻāĻŋ āĻ¯āĻĨāĻžāĻā§āĻ°āĻŽā§ data observation āĻ¸ā§āĻāĻāĻĒ āĻāĻ°āĻ¤ā§ āĻšāĻ¯āĻŧ, template āĻā§ compile āĻāĻ°āĻ¤ā§ āĻšāĻ¯āĻŧ , DOM āĻ instance āĻā§ mount āĻāĻ°ā§ āĻāĻŦāĻ āĻ¯āĻāĻ¨ āĻā§āĻ¨ā§ āĻĄāĻžāĻāĻž āĻĒāĻ°āĻŋāĻŦāĻ°ā§āĻ¤āĻ¨ āĻšāĻ¯āĻŧ, āĻ¤āĻāĻ¨ DOM āĻā§ Update āĻāĻ°ā§āĨ¤ āĻāĻāĻāĻāĻžāĻŦā§ āĻāĻāĻŋ āĻĢāĻžāĻā§āĻāĻļāĻ¨ āĻā§āĻ˛ā§āĻā§ āĻ°āĻžāĻ¨ āĻāĻ°ā§ , āĻ¯ā§āĻāĻžāĻā§ āĻŦāĻ˛āĻž āĻšāĻ¯āĻŧ lifecycle hooks, āĻ¯āĻž user āĻā§ āĻ¨āĻŋāĻ°ā§āĻĻāĻŋāĻˇā§āĻ āĻ§āĻžāĻĒ āĻā§āĻ˛ā§āĻ¤ā§ āĻ¤āĻžāĻ° āĻ¨āĻŋāĻāĻ¸ā§āĻŦ āĻā§āĻĄ āĻā§āĻ˛ā§āĻā§ āĻ¯ā§āĻā§āĻ¤ āĻāĻ°āĻ¤ā§ āĻ¸ā§āĻ¯ā§āĻ āĻĻā§āĻ¯āĻŧāĨ¤
Lifecycle Diagram
Template Syntax
VueJS HTML-āĻāĻŋāĻ¤ā§āĻ¤āĻŋāĻ template syntax āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ° āĻāĻ°ā§ āĻ¯āĻž āĻāĻĒāĻ¨āĻžāĻā§ declaratively rendered DOM āĻā§ Vue instance āĻā§āĻ˛ā§āĻ° āĻ āĻ§ā§āĻ¨ā§ āĻĄā§āĻāĻžāĻ¤ā§ āĻāĻŦāĻĻā§āĻ§ āĻāĻ°āĻ¤ā§ āĻĻā§āĻ¯āĻŧāĨ¤ āĻ¸āĻŽāĻ¸ā§āĻ¤ Vue.js template āĻā§āĻ˛āĻŋ valid HTML āĻ¯āĻž āĻ¸ā§āĻĒā§āĻ¸-āĻāĻŽāĻĒā§āĻ˛āĻžāĻ¯āĻŧā§āĻ¨ā§āĻ āĻŦā§āĻ°āĻžāĻāĻāĻžāĻ° āĻāĻŦāĻ HTML Parser āĻĻā§āĻŦāĻžāĻ°āĻž parse āĻāĻ°āĻž āĻ¯āĻžāĻ¯āĻŧāĨ¤
Vue āĻ¤āĻžāĻ° template āĻā§āĻ˛āĻŋāĻā§ āĻāĻāĻ āĻāĻžāĻ¤āĻžāĻ° āĻ¨āĻŋāĻā§ Virtual DOM render function āĻā§āĻ˛āĻŋāĻ¤ā§ compile āĻāĻ°ā§āĨ¤ reactivity system āĻāĻ° āĻ¸āĻžāĻĨā§ combine āĻāĻ°ā§ , Vue āĻā§āĻŦāĻ āĻŦā§āĻĻā§āĻ§āĻŋāĻŽāĻ¤ā§āĻ¤āĻžāĻ° āĻ¸āĻžāĻĨā§ āĻ¸ā§āĻŽāĻŋāĻ¤ āĻ¸āĻāĻā§āĻ¯āĻ component āĻā§ re-render āĻāĻ°āĻžāĻ° āĻāĻ¨ā§āĻ¯ āĻā§āĻāĻā§ āĻŦā§āĻ° āĻāĻ°ā§āĨ¤ āĻāĻŦāĻ āĻ¯āĻāĻ¨ app state āĻā§āĻā§āĻ āĻšāĻ¯āĻŧ āĻ¤āĻāĻ¨ āĻ¸ā§āĻŽāĻŋāĻ¤ āĻ¸āĻāĻā§āĻ¯āĻ DOM manipulation āĻĒā§āĻ°āĻ¯āĻŧā§āĻ āĻāĻ°āĻžāĻ° āĻāĻ¨ā§āĻ¯ āĻā§āĻāĻā§ āĻŦā§āĻ° āĻāĻ°ā§āĨ¤
āĻāĻĒāĻ¨āĻŋ āĻ¯āĻĻāĻŋ Virtual DOM concepts āĻāĻ° āĻ¸āĻžāĻĨā§ āĻĒāĻ°āĻŋāĻāĻŋāĻ¤ āĻšāĻ¯āĻŧā§ āĻĨāĻžāĻā§āĻ¨, āĻāĻŦāĻ JavaScript āĻāĻžāĻ˛ā§ āĻā§āĻ¨ā§ āĻĨāĻžāĻā§āĻ¨, āĻ¤āĻžāĻšāĻ˛ā§ āĻāĻĒāĻ¨āĻŋ template syntax āĻā§āĻ˛ā§āĻ° āĻĒāĻ°āĻŋāĻŦāĻ°ā§āĻ¤ā§ āĻ¸āĻ°āĻžāĻ¸āĻ°āĻŋ āĻ¨āĻŋāĻā§āĻ render function āĻā§āĻ˛āĻŋāĻā§ āĻ āĻ¤āĻŋāĻ°āĻŋāĻā§āĻ¤ JSX support āĻ¨āĻŋāĻ¯āĻŧā§ āĻ¤ā§āĻ°āĻŋ āĻāĻ°āĻ¤ā§ āĻĒāĻžāĻ°ā§āĻ¨āĨ¤
VueJS Text Output Template Syntax:
VueJS āĻ āĻ¸āĻžāĻ§āĻžāĻ°āĻŖ āĻā§āĻ¨ā§ text āĻāĻāĻāĻĒā§āĻ āĻĻā§āĻāĻžāĻ¨ā§āĻ° āĻāĻ¨ā§āĻ¯ { } āĻ āĻ°ā§āĻĨāĻžā§ double curly braces (āĻĻā§āĻŦāĻŋāĻ¤ā§āĻ¯āĻŧ āĻŦāĻ¨ā§āĻ§āĻ¨ā§) āĻāĻ° āĻŽāĻ§ā§āĻ¯ā§ variable āĻāĻ° name āĻāĻŋ āĻĻāĻŋāĻ¤ā§ āĻšāĻ¯āĻŧāĨ¤ curly braces (āĻĻā§āĻŦāĻŋāĻ¤ā§āĻ¯āĻŧ āĻŦāĻ¨ā§āĻ§āĻ¨ā§) āĻā§ āĻāĻŦāĻžāĻ° âMustacheâ syntax āĻ āĻŦāĻ˛āĻž āĻšāĻ¯āĻŧāĨ¤ āĻ¨āĻŋāĻā§āĻ° āĻāĻĻāĻžāĻšāĻ°āĻŖāĻāĻŋ āĻĻā§āĻā§āĻ¨ :
<html>
<head>
<title>Templates</title>
<script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="vue_template">
<h2>Welcome {{name}}!</h2>
</div>
<script type = "text/javascript">
var app = new Vue({
el: '#vue_template',
data: {
name: "Evan You"
}
})
</script>
</body>
</html>
Output
Welcome Evan You!
āĻ¤āĻŦā§ āĻāĻĒāĻ¨āĻŋ āĻāĻžāĻāĻ˛ā§ VueJS āĻāĻ° v-text directive āĻ āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ° āĻāĻ°āĻ¤ā§ āĻĒāĻžāĻ°ā§āĻ¨āĨ¤ āĻāĻ° v-text directive āĻāĻŋ āĻšā§āĻŦāĻšā§ {{}} āĻāĻ° āĻŽāĻ¤ā§āĻ āĻāĻžāĻ āĻāĻ°ā§āĨ¤ āĻ āĻ°ā§āĻĨāĻžā§ <div v-text=âcontentâ></div> āĻāĻāĻŋ āĻšā§āĻŦāĻšā§ <div>{{ content }}</div> āĻāĻ° āĻŽāĻ¤ā§āĻ āĻāĻāĻāĻĒā§āĻ āĻĻāĻŋāĻŦā§āĨ¤ āĻ¨āĻŋāĻā§āĻ° āĻāĻĻāĻžāĻšāĻ°āĻŖāĻāĻŋ āĻĻā§āĻā§āĻ¨ :
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div v-text="content"></div>
</div>
<script>
new Vue ({
el: '#app',
data: {
content: 'Hello World'
}
})
</script>
</body>
</html>
Output
Hello World
āĻ¯āĻāĻ¨ āĻāĻĒāĻ¨āĻŋ HTML markup āĻā§ v-text āĻ āĻĒāĻžāĻ¸ āĻāĻ°āĻŦā§āĻ¨āĨ¤ āĻ¤āĻāĻ¨ āĻāĻāĻŋ HTML markup āĻā§ HTML entities āĻ encode āĻāĻ°ā§ āĻ¨āĻŋāĻŦā§āĨ¤ āĻ¨āĻŋāĻā§āĻ° āĻāĻĻāĻžāĻšāĻ°āĻŖāĻāĻŋ āĻĻā§āĻā§āĻ¨ :
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app2">
<div v-text="content"></div>
</div>
<script>
new Vue ({
el: '#app2',
data: {
content: '<h3<Hello World</h3>'
}
})
</script>
</body>
</html>
Output
<h3>Hello world</h3>
VueJS HTML Output Template Syntax:
VueJS āĻ āĻ¯ā§āĻā§āĻ¨ā§ html āĻāĻāĻāĻĒā§āĻ āĻĻā§āĻāĻžāĻ¨ā§āĻ° āĻāĻ¨ā§āĻ¯ v-html directive āĻ āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ° āĻāĻ°āĻ¤ā§ āĻšāĻŦā§āĨ¤ āĻ¨āĻŋāĻā§āĻ° āĻāĻĻāĻžāĻšāĻ°āĻŖāĻāĻŋ āĻĻā§āĻā§āĻ¨ :
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div v-html="content"></div>
</div>
<script>
new Vue ({
el: '#app',
data: {
content: '<h2>Hello World</h2>'
}
})
</script>
</body>
</html>
Output
Hello World
VueJS āĻ Image āĻĒā§āĻ°āĻĻāĻ°ā§āĻļāĻ¨ā§āĻ° Template Syntax:
VueJS āĻ āĻ¯ā§āĻā§āĻ¨ā§ image āĻĒā§āĻ°āĻĻāĻ°ā§āĻļāĻ¨ā§āĻ° āĻāĻ¨ā§āĻ¯ v-bind directive āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ° āĻāĻ°āĻ¤ā§ āĻšāĻŦā§āĨ¤ āĻāĻāĻžāĻ¨ā§ āĻ¸āĻžāĻ§āĻžāĻ°āĻŖ syntax (âMustacheâ syntax) āĻāĻžāĻ āĻāĻ°āĻŦā§āĻ¨āĻž āĨ¤ āĻāĻ˛ā§āĻ¨ āĻĒā§āĻ°āĻĨāĻŽā§ āĻ¸āĻžāĻ§āĻžāĻ°āĻŖ template syntax āĻĻāĻŋāĻ¯āĻŧā§ āĻāĻāĻāĻž āĻāĻĻāĻžāĻšāĻ°āĻŖ āĻĻā§āĻāĻ¯āĻŧāĻž āĻ¯āĻžāĻ:
<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 = "app">
<h2>Firstname : {{firstname}}</h2>
<h2>Lastname : {{lastname}}</h2>
<div v-html = "htmlcontent"></div>
<img src = "{{imgsrc}}" width = "300" height = "250" />
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
firstname : "Masud",
lastname : "Alam",
htmlcontent : "<div><h2>Vue Js Template</h2></div>",
imgsrc : "http://w3programmers.com/bangla/wp-content/uploads/2018/12/redrose.jpg"
}
})
</script>
</body>
</html>
āĻ˛āĻā§āĻˇā§āĻ¯ āĻāĻ°ā§āĻ¨ , āĻāĻŽā§āĻāĻāĻŋ āĻĒāĻžāĻā§āĻā§āĻ¨āĻžāĨ¤
āĻāĻāĻ¨ v-bind directive āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ° āĻāĻ°ā§ āĻāĻŽā§āĻ āĻĒā§āĻ°āĻĻāĻ°ā§āĻļāĻ¨ā§āĻ° āĻāĻĻāĻžāĻšāĻ°āĻŖāĻāĻŋ āĻĻā§āĻāĻŦ :
<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 = "app">
<h2>Firstname : {{firstname}}</h2>
<h2>Lastname : {{lastname}}</h2>
<div v-html = "htmlcontent"></div>
<img v-bind:src = "imgsrc" width = "300" height = "250" />
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
firstname : "Masud",
lastname : "Alam",
htmlcontent : "<div><h2>Vue Js Template</h2></div>",
imgsrc : "http://w3programmers.com/bangla/wp-content/uploads/2018/12/redrose.jpg"
}
})
</script>
</body>
</html>
VueJS āĻ HTML Element āĻāĻ° Value show āĻ āĻĨāĻŦāĻž hide toggling Template Syntax:
VueJS āĻ āĻ¯ā§āĻā§āĻ¨ā§ html āĻāĻ° āĻāĻ˛āĻŋāĻŽā§āĻ¨ā§āĻ āĻāĻ° āĻāĻāĻāĻĒā§āĻ āĻā§ show āĻ āĻĨāĻŦāĻž hide toggling āĻāĻ°āĻžāĻ° āĻāĻ¨ā§āĻ¯ v-show directive āĻ āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ° āĻāĻ°āĻ¤ā§ āĻšāĻŦā§āĨ¤ āĻāĻ° āĻāĻāĻŋ āĻŽā§āĻ˛āĻ¤ , CSS display property āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ° āĻāĻ°ā§ āĻāĻžāĻāĻāĻŋ āĻāĻ°ā§āĨ¤ āĻ¤āĻŦā§ āĻāĻāĻŋ <template> element āĻāĻŋ āĻ¸āĻžāĻĒā§āĻ°ā§āĻ āĻāĻ°ā§āĻ¨āĻž āĻāĻŽāĻ¨āĻāĻŋ v-else āĻāĻŦāĻ v-else-if āĻāĻ° āĻ¸āĻžāĻĨā§āĻ āĻāĻžāĻ āĻāĻ°ā§āĻ¨āĻžāĨ¤ āĻ¨āĻŋāĻā§āĻ° āĻāĻĻāĻžāĻšāĻ°āĻŖāĻāĻŋ āĻĻā§āĻā§āĻ¨ :
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div v-show="show">Hello World!</div>
</div>
<script>
new Vue ({
el: '#app',
data: {
show: true
}
})
</script>
</body>
</html>
āĻāĻ°ā§āĻāĻāĻŋ āĻāĻĻāĻžāĻšāĻ°āĻŖ āĻĻā§āĻā§āĻ¨ :
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div v-show="show">Hello World!</div>
</div>
<script>
new Vue ({
el: '#app',
data: {
show: false
}
})
</script>
</body>
</html>
VueJS Conditional Rendering
VueJS v-if, v-else-if and v-else Directive
VueJS āĻ āĻ¯ā§āĻā§āĻ¨ā§ html āĻāĻ° āĻāĻ˛āĻŋāĻŽā§āĻ¨ā§āĻ āĻāĻ° āĻāĻāĻāĻĒā§āĻ āĻā§ control āĻāĻ°āĻžāĻ° āĻāĻ¨ā§āĻ¯ v-if,v-else-if,v-else āĻāĻ directive āĻā§āĻ˛ā§ āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ° āĻāĻ°āĻ¤ā§ āĻšāĻŦā§āĨ¤ āĻāĻ° āĻāĻāĻŋ v-show āĻāĻ° āĻŽāĻ¤ā§āĻ āĻāĻžāĻ āĻāĻ°ā§āĨ¤ āĻ¤āĻŦā§ āĻāĻāĻŋ <template> element āĻāĻŋ āĻ¸āĻžāĻĒā§āĻ°ā§āĻ āĻāĻ°ā§āĨ¤ āĻ¨āĻŋāĻā§āĻ° v-if āĻāĻĻāĻžāĻšāĻ°āĻŖāĻāĻŋ āĻĻā§āĻā§āĻ¨ :
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div v-if="show">Hello World!</div>
</div>
<script>
new Vue ({
el: '#app',
data: {
show: false
}
})
</script>
</body>
</html>
āĻāĻāĻ¨ âHello Worldâ āĻāĻĨāĻžāĻāĻŋ āĻĒā§āĻ°āĻĻāĻ°ā§āĻļāĻ¨ āĻāĻ°āĻŦā§āĻ¨āĻžāĨ¤ āĻāĻžāĻ°āĻŖ āĻāĻāĻžāĻ¨ā§ show āĻāĻ° āĻā§āĻ¯āĻžāĻ˛ā§ false āĻ¸ā§āĻ āĻāĻ°āĻž āĻāĻā§āĨ¤
vuejs if directive false
āĻāĻ° āĻāĻĒāĻ¨āĻŋ āĻ¯āĻĻāĻŋ show āĻāĻ° āĻā§āĻ¯āĻžāĻ˛ā§ true āĻ¸ā§āĻ āĻāĻ°ā§āĻ¨ , āĻ¤āĻžāĻšāĻ˛ā§ âHello Worldâ āĻāĻĨāĻžāĻāĻŋ āĻĒā§āĻ°āĻĻāĻ°ā§āĻļāĻ¨ āĻāĻ°āĻŦā§āĨ¤
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app1">
<div v-if="show">Hello World!</div>
</div>
<script>
new Vue ({
el: '#app1',
data: {
show: true
}
})
</script>
</body>
</html>
āĻāĻŦāĻžāĻ° v-else-if āĻāĻŦāĻ v-else āĻāĻ° āĻāĻĻāĻžāĻšāĻ°āĻŖ āĻĻā§āĻāĻž āĻ¯āĻžāĻ:
<html>
<head>
<title>VueJs v-if,v-else-if and v-else attribute</title>
<script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app-3">
<div v-if="age>0 && age<=15">Your're Child</div>
<div v-else-if="age>15 && age<=25">You're Young</div>
<div v-else-if="age>25 && age<=40">You're Adult</div>
<div v-else> You're Old man or not birth yet </div>
</div>
<script type = "text/javascript">
var app = new Vue({
el: '#app-3',
data: {
age: 36,
}
});
</script>
</body>
</html>
Output
Youâre Adult
āĻāĻ°ā§ āĻāĻāĻāĻŋ āĻāĻĻāĻžāĻšāĻ°āĻŖ āĻĻā§āĻā§āĻ¨:
<html>
<head>
<title>VueJs v-if,v-else-if and v-else attribute</title>
<script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app-3">
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username">
</template>
<template v-else-if="loginType === 'key'">
<label>Key</label>
<input placeholder="Enter your Key">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address">
</template>
</div>
<script type = "text/javascript">
var app = new Vue({
el: '#app-3',
data: {
loginType: 'username',
}
});
</script>
</body>
</html>
Output
VueJS List Rendering
VueJS āĻ array āĻāĻŦāĻ Object āĻā§āĻ˛ā§āĻā§ render āĻāĻ°āĻžāĻ° āĻāĻ¨ā§āĻ¯ , List Rendereing āĻā§āĻ˛ā§ āĻŦā§āĻ¯āĻŦāĻšā§āĻ¤ āĻšāĻ¯āĻŧāĨ¤
VueJS v-for Directive
VueJS āĻ v-for directive āĻāĻŽāĻžāĻĻā§āĻ°āĻā§ array āĻāĻ° item āĻā§āĻ˛ā§āĻ° āĻŽāĻ§ā§āĻ¯ā§ loop āĻāĻžāĻ˛āĻžāĻ¨ā§āĻ° āĻ¸ā§āĻ¯ā§āĻ āĻĻā§āĻ¯āĻŧāĨ¤ āĻāĻ° v-for āĻĻāĻŋāĻ¯āĻŧā§ āĻ¯ā§āĻ loop āĻāĻŋ āĻāĻžāĻ˛āĻžāĻŦā§ , āĻ¤āĻžāĻ°āĻāĻ¨ā§āĻ¯ā§ āĻāĻŽāĻžāĻĻā§āĻ°āĻā§ v-for āĻāĻ° value āĻšāĻŋāĻ¸ā§āĻŦā§ item in list āĻāĻ āĻ¸āĻŋāĻ¨āĻā§āĻā§āĻ¸ āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ° āĻāĻ°ā§āĨ¤ āĻ āĻ°ā§āĻĨāĻžā§ , āĻāĻāĻžāĻ¨ā§ list āĻāĻž āĻšāĻŦā§ array āĻāĻ° āĻ¨āĻžāĻŽ , āĻāĻŦāĻ item āĻšāĻā§āĻā§ array element āĻāĻ° āĻšā§āĻ¯āĻžāĻ¨ā§āĻĄāĻ˛āĻžāĻ°āĨ¤ āĻāĻ˛ā§āĻ¨ āĻāĻāĻāĻž āĻāĻĻāĻžāĻšāĻ°āĻŖ āĻĻā§āĻāĻž āĻ¯āĻžāĻ:
<html>
<head>
<title>VueJs v-for directive</title>
<script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
<script type = "text/javascript">
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
]
}
})
</script>
</body>
</html>
Output
āĻ¤āĻŦā§ āĻāĻĒāĻ¨āĻŋ āĻāĻžāĻāĻ˛ā§ key āĻā§āĻ˛ā§āĻā§āĻ āĻĒā§āĻ°āĻŋāĻ¨ā§āĻ āĻāĻ°āĻ¤ā§ āĻĒāĻžāĻ°ā§āĻ¨āĨ¤ āĻ¨āĻŋāĻā§āĻ° āĻāĻĻāĻžāĻšāĻ°āĻŖāĻāĻŋ āĻĻā§āĻā§āĻ¨:
<html>
<head>
<title>VueJs v-for directive</title>
<script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app-4">
<ol>
<li v-for="(todo,index) in todos">
{{ parentMessage }} - {{ index }} - {{ todo.text }}
</li>
</ol>
</div>
<script type = "text/javascript">
var app4 = new Vue({
el: '#app-4',
data: {
parentMessage:"Parent",
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
]
}
})
</script>
</body>
</html>
Output
āĻāĻāĻžāĻĄāĻŧāĻž āĻāĻĒāĻ¨āĻŋ v-for āĻ âāĻāĻ¨â keyword āĻāĻ° āĻĒāĻ°āĻŋāĻŦāĻ°ā§āĻ¤ā§ âofâ keyword āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ° āĻāĻ°āĻ¤ā§ āĻĒāĻžāĻ°ā§āĻ¨āĨ¤
<html>
<head>
<title>VueJs v-for directive</title>
<script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app-4">
<ol>
<li v-for="(todo,index) of todos">
{{index}}=>{{ todo.text }}
</li>
</ol>
</div>
<script type = "text/javascript">
var app4 = new Vue({
el: '#app-4',
data: {
parentMessage:"Parent",
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
]
}
})
</script>
</body>
</html>
Object āĻ v-for āĻāĻ° āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ°
<html>
<head>
<title>VueJs v-for directive</title>
<script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app-4">
<ol>
<li v-for="(info,index) in book">
{{index}}:{{ info }}
</li>
</ol>
</div>
<script type = "text/javascript">
var app4 = new Vue({
el: '#app-4',
data: {
book: {
Title: 'PHP Beginning to Advance',
Author: 'Masud Alam',
Published: '2016-04-10'
}
}
})
</script>
</body>
</html>
Output
āĻāĻāĻžāĻĄāĻŧāĻž āĻāĻĒāĻ¨āĻŋ Object āĻĨā§āĻā§ āĻāĻ° property āĻā§āĻ˛ā§āĻ° numerical index āĻ āĻŦā§āĻ° āĻāĻ°āĻ¤ā§ āĻĒāĻžāĻ°ā§āĻ¨āĨ¤
<html>
<head>
<title>VueJs v-for directive</title>
<script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app-4">
<ol style="list-style: none;">
<li v-for="(info,index,key) in book">
{{key}}:{{index}}:{{ info }}
</li>
</ol>
</div>
<script type = "text/javascript">
var app4 = new Vue({
el: '#app-4',
data: {
book: {
Title: 'PHP Beginning to Advance',
Author: 'Masud Alam',
Published: '2016-04-10'
}
}
})
</script>
</body>
</html>
Result
v for āĻāĻ° āĻ¸āĻžāĻĨā§ v-if āĻāĻ° āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ° :
āĻ¯āĻāĻ¨ v-for āĻāĻŦāĻ v-if āĻĻā§āĻā§āĻ āĻāĻāĻ node āĻ āĻŦā§āĻ¯āĻŦāĻšā§āĻ¤ āĻšāĻ¯āĻŧ , āĻ¤āĻāĻ¨ v-for directive āĻāĻŋ v-if āĻĨā§āĻā§ higher āĻĒā§āĻ°āĻžāĻ¯āĻŧā§āĻ°āĻŋāĻāĻŋ āĻ¤ā§ āĻĨāĻžāĻā§āĨ¤ āĻ¯āĻžāĻ° āĻŽāĻžāĻ¨ā§ āĻšāĻ˛ā§ v-if āĻāĻŋ āĻĒā§āĻ°āĻ¤āĻŋāĻāĻŋ āĻ˛ā§āĻĒā§ āĻāĻ˛āĻžāĻĻāĻž āĻāĻžāĻŦā§ āĻ°āĻžāĻ¨ āĻšāĻŦā§āĨ¤ āĻ¨āĻŋāĻā§āĻ° āĻāĻĻāĻžāĻšāĻ°āĻŖāĻāĻŋ āĻĻā§āĻā§āĻ¨ :
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<ul id="app3">
<li v-for="item in list" v-if="item.show">{{ item.name }}</li>
</ul>
<script>
new Vue ({
el: '#app3',
data:{
list: [
{ name: 'Apple', show: true},
{ name: 'Mango', show: false},
{ name: 'Banana', show: true},
]
}
})
</script>
</body>
</html>
Output
Apple Banana
āĻ˛āĻā§āĻˇā§āĻ¯ āĻāĻ°ā§āĻ¨ , āĻāĻāĻžāĻ¨ā§ āĻ¸ā§āĻ Item āĻā§āĻ˛ā§āĻ āĻāĻ¸āĻā§ , āĻ¯ā§āĻā§āĻ˛ā§āĻ° show āĻāĻ° value true āĻĻā§āĻāĻ¯āĻŧāĻž āĻāĻā§āĨ¤
āĻāĻŽāĻ°āĻž āĻāĻāĻ¨ v-for āĻĻāĻŋāĻ¯āĻŧā§ array āĻ¤ā§ āĻĸā§āĻāĻžāĻ¨ā§ data āĻā§āĻ˛ā§āĻā§ āĻĒā§āĻ°āĻĻāĻ°ā§āĻļāĻ¨ā§āĻ° āĻāĻāĻāĻž practical āĻāĻĻāĻžāĻšāĻ°āĻŖ āĻĻā§āĻāĻŦ
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app4">
<p v-if="error" class="error">{{ error }}</p>
<input type="text" placeholder="Enter your name" name="username" value="" v-model="username" /><button type="button" @click="add">Click me</button>
<ul>
<li v-for="item in users">{{ item.name }}</li>
</ul>
</div>
<script>
new Vue ({
el: '#app4',
data:{
error:'',
username:'',
username1:'',
username2:'',
username3:'',
username:'',
users:[{"name":"Evan You"},{"name":"Masud Alam"},{"name":"Zunayed Khan"}],
},
methods: {
add() {
if (!this.username)
{
this.error = 'Please enter your name';
return;
}
else
this.error = '';
this.users.push({'name':this.username});
this.username = '';
},
}
})
</script>
<style scoped>
.error {
color:#c82829;
}
</style>
</body>
</html>
Output
v-for āĻĻāĻŋāĻ¯āĻŧā§ Filtered/Sorted Results āĻā§āĻ˛ā§ āĻĒā§āĻ°āĻĻāĻ°ā§āĻļāĻ¨ :
<html>
<head>
<title>v-for directive</title>
<script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app-4">
<h2>Even Numbers</h2>
<ul style="list-style: none;">
<li v-for="n in evenNumbers">{{ n }}</li>
</ul>
<h3>Odd Numbers</h3>
<ul style="list-style: none;">
<li v-for="n in oddNumbers">{{ n }}</li>
</ul>
</div>
<script type = "text/javascript">
var app4 = new Vue({
el: '#app-4',
data: {
numbers: [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]
},
computed: {
evenNumbers: function () {
return this.numbers.filter(function (number) {
return number % 2 === 0
})
},
oddNumbers: function () {
return this.numbers.filter(function (number) {
return number % 2 === 1
})
}
}
})
</script>
</body>
</html>
Output
v-for āĻĻāĻŋāĻ¯āĻŧā§ āĻāĻāĻāĻŋ āĻ¨āĻŋāĻ°ā§āĻĻāĻŋāĻˇā§āĻ range āĻāĻ° āĻŽāĻ§ā§āĻ¯ā§ Numbers āĻā§āĻ˛ā§ āĻĒā§āĻ°āĻĻāĻ°ā§āĻļāĻ¨ :
<html>
<head>
<title>v-for directive</title>
<script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app-4">
<div>
<span v-for="n in 10">{{ n }} </span>
</div>
</div>
<script type = "text/javascript">
var app4 = new Vue({
el: '#app-4',
})
</script>
</body>
</html>
Output
