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

【问题标题】：Vue 2.0 with click event handler带有点击事件处理程序的 Vue 2.0
【发布时间】：2017-03-30 08:21:07
【问题描述】：

vue2.0如何配合jquery onclick事件方法使用？当我通过在 vue 上定义一个安装的 this.$el.addEventListener('click', 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'});   
        }

【问题讨论】：

Vue JS 原生提供了你做这类事情所需的一切。当您使用 jQuery 多年并突然开始使用 JavaScript 框架时，很难摆脱 DOM 心态，但如果您觉得需要 jQuery，我发现 Vue做错了。
不确定您要做什么，为什么要使用 JQuery 和 Vue？你可以这样做吗？ <button v-on:click="greet">Greet</button>
100% 正确@texelate
@texelate 我需要的是将此 jquery 函数转换为 vue2.0
查看您的模板代码也很方便，但基本上您使用@click，正如@Mick 所说。请参阅此处的示例：vuejs.org/v2/guide/events.html#Methods-in-Inline-Handlers 当您直接操作 DOM 时，很难再提出任何建议——这与 JavaScript 框架试图实现的一切背道而驰。 Vue 应该为你做这件事。您定义数据、方法等，然后让 Vue 为您更新。 Vue 实际上有一个非常浅的学习曲线。花点时间阅读 Vue 文档真的很值得，你很快就会掌握它。

标签： jquery vue.js vuejs2

【解决方案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的click方法执行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>

这将使你成为这样：

创建一个新的待办事项列表项
在您的数据数组中添加待办事项列表项，它会自动呈现到 html 中，而您根本无需进行任何呈现。

更多详情，请阅读：https://github.com/thewhitetulip/intro-to-vuejs/

【讨论】：

【解决方案2】：

我猜是这样的：

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

然后在一个 Vue 组件中：

<script>
export default {

    methods: {
        greet:function(){

              }

    }//methods
}

</script>

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

但是，我会先通过阅读 Vue.js 的文档来学习一些 Vue.js。

米克

【讨论】：