Vue 2.0 with click event handler

How do use vue2.0 with jquery onclick event method ? As i research on the particular question with defining an mounted of this.$el.addEventListener('click', this.onClick) on vue . but seems not really clear for me . I need an help from here. Kindly advise

As my code below jquery :

$(document).on("click",".ballNum li",function(){
        var robj = $(this);
        var value = robj.text();
            var bit = $(this).parents(".ballNum").attr("id");
            if(robj.attr("name")=="choice"){
                robj.removeAttr("name");
            }else{
                robj.attr("name","choice");
            }
            var isSave = saveNum(value,bit,"reverse");
            if(isSave==1){
                $(this).addClass("active");
            }else if(isSave==-1){
                $(this).removeClass("active");
            }else{
                layer.alert('Error',{icon: 0, title:'Alert'});   
        }

标签： jquery vue.js vuejs2

2条回答

一纸荒年 Trace。

2楼-- · 2019-09-06 12:22

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:

create a new todo list item
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/

0人赞添加讨论(0) 举报

时光不老，我们不散

3楼-- · 2019-09-06 12:22

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

0人赞添加讨论(0) 举报

Vue 2.0 with click event handler

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间