[Vuejs]-Vue 2.0 with click event handler

by

2👍

✅

You would need to first understand the basic difference between jQuery and VueJS. Everything that you do in jQuery can be done in VueJS, it is just a matter of understanding the difference. When we are in the jQuery land, we are habituated to the $() to fetch the values and stuff.

VueJS is different, here, there is reactivity at the backend, the library takes care of the complete html. You have to define the html, using the Vue syntax, then define the data array, which stores the variables. The variables are then used inside the templates

  <div id="app4">
      <ol>
        <li>{{todo}}</li>
        <li>{{todo}}</li>
        <li>{{todo}}</li>
  </ol>
  </div>

  <script>
    var app4 = new Vue({
        el:"#app4",
        data: {
            todo: "do something!"
        }
    })
  </script>

This would print “do something!” thrice.

This is the modifications we can do to the above block, after adding the input tag, here is your ‘click’ method, rather than use jQuery’s click method, we use the one which Vue provides.

Vue’s click method executes Vue’s AddToDo function.

<html>
<script>
 var app4 = new Vue({
    el:"#app4",
data: {
    todo: {title: '', text:''},
    todos: [
        {title: 'Lean JS' , text: "What is JS?"},
        {title:'Learn vue',  text: "Vue has nice docs!"},
        {title:'Build something',  text: "what to build?"}
    ]
},
methods: {
  AddTodo: function (item) {
    alert(item.text + " " + item.title)
  }
}
})
</script>

<body>
<input placeholder="add title" v-model="todo.title" />
<input placeholder="add text" v-model="todo.text" />
<button v-on:click="AddTodo(todo)">Add todo</button>

<ol>
      <li v-for="(todo, index) in todos">
          {{ todo.title }} : {{ todo.text }}
      </li>
</ol>
</body>

What this will enable you is this:

  1. create a new todo list item
  2. add that todo list item in your data array, which automatically gets rendered to the html without you having to do any rendering at all.

For more details, read this: https://github.com/thewhitetulip/intro-to-vuejs/

👤thewhitetulip

0👍

I would guess something like this:


<button v-on:click="greet">Greet</button>

Then in a Vue component:

<script>
export default {

    methods: {
        greet:function(){

              }

    }//methods
}

</script>

Then put your code from your method into the greet method.

But, I would start with learning some Vue.js by working through their documentation.

Mick

👤Mick

Leave a comment