June 1, 2017

Vue.Js Declarative Rendering

❮❮ Previous
Next ❯❯

Vue.Js Declarative Rendering:–The designing objective of Vue.Js is optimization of code written for any application which reduces the time and performance. Apart from this you will see the latest design pattern methodologies in Vue.Js which makes your code pretty much easier and productive. So this framework provides an option to use declarative programmimg. In declarative programming when a data is connected with DOM then nobody knows how does it happen. So it encapsulate the internal information from outside world entities.

Now the things become reactive as you can see the change in template view . To see this change open the console and type app.message=some value ; immediately you will get some value as output template.

Let us take an example which enables you to understand the declarative rendering approach in Vue.Js.

Example

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
<ul>
    <li v-for="game in games">
      {{ game }}
    </li>
  </ul>
</div>
<script>
  var vm = new Vue({
  el: '#app',
  data: {
  message:'The Tutorialsplane is the best and largest web development tutorials website',
  games: [
      'Clash Royale',
      'Pokeman Go',
      'Dead Trigger 2',
      'Minecraft'
    ]
  }
})
</script>
</body>
</html>

Conditional and Loops | Example

In below example you can see that we can toggle an element according to truthiness and falsiness of a variable name in Vue instance.

Example

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
<p v-if="ans">"Answer is true::"</p>
<ul>
    <li v-for="game in games">
      {{ game }}
    </li>
  </ul>
</div>
<script>
  var vm = new Vue({
  el: '#app',
  data: {
  message:'The Tutorialsplane is the best and largest web development tutorials website',
  ans:true,
  games: [
      'Clash Royale',
      'Pokeman Go',
      'Dead Trigger 2',
      'Minecraft'
    ],
  }
})
</script>
</body>
</html>

Explanation of Program | Example

Explanation 1:–The reactivity is everything in Vue.Js which tells a DOM to update the data properties as they demand for it.

In below example we have defined a property namedans which is initially true. Hence as a result the template”Answer is true is”is being added on output screen. But when when you make a change in data property by writingvm.ans=false ; immediately template become disappear.

Explanation 2:–When we write vm.games.push(‘Bike Rider’) on output console then we see the quick change in template and resulting one more value in games array list. To justify this statement you can see the below screenshot. Henceforth these two examples are the best suitables for reactivity.

Handling User Input | Example

Here we have written a good example which shows the best usage on v-on directive . Here we bound a function named reverseTemplate()
which is called when a user clicks on button and performs respective operation making template as reversible.

Example

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
<p v-if="ans">"Answer is true::"</p>
<button v-on:click="reverseTemplate">Reverse Template</button>
<ul>
    <li v-for="game in games">
      {{ game }}
    </li>
  </ul>
</div>
<script>
  var vm = new Vue({
  el: '#app',
  data: {
  message:'The Tutorialsplane is the best and largest web development tutorials website',
  ans:true,
  games: [
      'Clash Royale',
      'Pokeman Go',
      'Dead Trigger 2',
      'Minecraft'
    ],
  },
   methods: {
    reverseTemplate: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})
</script>
</body>
</html>

Advertisements

Add Comment

📖 Read More


❮❮ Previous
Next ❯❯