python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 7, Interview Questions Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
CREATE Custom filters in Vue.js 2

What Is Vue.js 2 Lifecycle?

What Is Vuejs 2 Lifecycle?
ü  beforeCreate
ü  created
ü  beforeMount
ü  mounted
ü  beforeUpdate
ü  updated
ü  activated
ü  deactivated
ü  beforeDestroy
ü  destroyed

The beforeCreate () method is called synchronously after the VueJs instance has just been initialized.
The created () method is called synchronously after the VueJs instance is created.
The BeforeMount () method is called right before the component is mounted.
The Mounted () method is called after the component has just been mounted
The BeforeUpdate () method is method is called when the data changes, before the virtual DOM is re-rendered.
The Updated () method is called after a data change.
The Activated () method is called when a kept alive component is activated.
The Deactivated () method is called when a kept alive component is deactivated.
The BeforeDestroy () method is called right before a VueJs instantiated.
The Destroyed () method is called after a VueJs instance has been destroyed.

Examples -


How To CREATE Custom Filters in Vue.js 2?

HTML Code –
<script src="https://unpkg.com/vue"></script>
<div id="demo-app">
  <ul>
    <li v-for="customer in customers">
      {{customer.id}} {{ customer.name }} and Age Are ({{customer.age}}) Years
    </li>
  <ul>
<div>

VueJs Code –
//Model class
var customerModel = {
  name: "Anil Singh",
  age: 32,
  customers: [
    { id:1,  name: "code-sample.com"age: 5400 },
    { id:2name: "code-sample.xyz"age: 4540 },
    { id:3name: "code-view.com"age: 4520 }
  ]
};

//Customer View Model.
var customerViewModel = new Vue({
    el: '#demo-app',
    data: customerModel
});


The result looks here – https://jsfiddle.net/ofubzd6w/

How To Use filters in Vue.js 2?
HTML Code –
<script src="https://unpkg.com/vue"></script>
<div id="demo-app">
  <label>Enter name </label>
  <input type="text" v-model="name" id="name" name="name" />
  <h4>My Name is - {{ name }} and my age is - {{ age }} years. </h4>
</div>


VueJs Code –
//Model class
var userModel = {
  id:1,
  name: "Anil Singh",
  age: 24
};

//View Model Class
var userViewModel = new Vue({
  el: '#demo-app',
  data: userModel
});

Result looks here - https://jsfiddle.net/r6hhcvg7/

I hope you are enjoying with this post! Please share with you friends. Thank you!!
ANIL SINGH

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions