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
Directives
Directives are instruction for VueJS to do things in a certain way.
The v-bind attribute called a directive. Directives are prefixed with v- to indicate that they are special attributes provided by Vue.
We have already seen directives such as v-if, v-show, v-else, v-for, v-bind , v-model, v-on, etc.
File name : index.php
Syntax
Vue.directive('nameofthedirective', {
bind(e1, binding, vnode) {
}
})
v-bind directive
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>
Condition : if
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-if="seen">Now you see me</span>
<span v-if="seenhide">Now you hide me</span>
</div>
<script>
var app3 = new Vue({
el: '#msg',
data: {
seen: true,
seenhide:false
}
})
</script>
</body>
</html>
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 = "databinding">
<div v-changestyle>mahtab bebs</div>
</div>
<script type = "text/javascript">
Vue.directive("changestyle",{
bind(e1,binding, vnode) {
console.log(e1);
e1.style.color = "red";
e1.style.fontSize = "30px";
}
});
var vm = new Vue({
el: '#databinding',
data: {
},
methods : {
},
});
</script>
</body>
</html>
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 = "databinding">
<div v-changestyle = "{color:'green'}">Mahtab NB</div>
</div>
<script type = "text/javascript">
Vue.directive("changestyle",{
bind(e1,binding, vnode) {
console.log(e1);
console.log(binding.value.color);
console.log(vnode);
e1.style.color=binding.value.color;
e1.style.fontSize = "30px";
}
});
var vm = new Vue({
el: '#databinding',
data: {
},
methods : {
},
});
</script>
</body>
</html>
Filters
VueJS supports filters that help with text formatting. It is used along with v-bind and interpolations ({{}}). We need a pipe symbol at the end of JavaScript expression for filters.
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 = "databinding">
<input v-model = "name" placeholder = "Enter Name" /><br/>
<span style = "font-size:25px;"><b>Letter count is : {{name | countletters}}</b></span>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
name : ""
},
filters : {
countletters : function(value) {
return value.length;
}
}
});
</script>
</body>
</html>
File name : index.php
File name : index.php
File name : index.php