Question

如何使用vue2.0和jquery onclick事件方法？当我研究特定问题时，在vue上定义了一个挂载的。$ el.addEventListener（＆＃39; click＆＃39;，this.onClick）。但对我来说似乎并不是很清楚。我需要这里的帮助。请建议

我的代码如下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'});   
        }

Answer 1

您需要先了解jQuery和VueJS之间的基本区别。你在jQuery中所做的一切都可以在VueJS中完成，这只是理解差异的问题。当我们在jQuery的土地上时，我们习惯于$()来获取值和东西。

VueJS不同，这里后端有反应，图书馆负责完整的html。您必须使用Vue语法定义html，然后定义存储变量的数据数组。然后在模板

中使用变量

  <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>

这将打印“做某事！”三次。

这是我们可以对上面的块做的修改，在添加输入标记之后，这是你的'click'方法，而不是使用jQuery的click方法，我们使用Vue提供的方法。

Vue的点击方法执行Vue的AddToDo功能。

<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>

这将使您：

创建新的待办事项列表项
在您的数据数组中添加该todo列表项，该项自动呈现为html而无需进行任何渲染。

有关详情，请参阅：https://github.com/thewhitetulip/intro-to-vuejs/

Answer 2

我猜是这样的：

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

然后在Vue组件中：

<script>
export default {

    methods: {
        greet:function(){

              }

    }//methods
}

</script>

然后将您方法中的代码放入greet方法。

但是，我首先要通过处理他们的文档来学习一些Vue.js。

米克

带有点击事件处理程序的Vue 2.0

2 个答案: