带有点击事件处理程序的Vue 2.0 [英] Vue 2.0 with click event handler
问题描述
如何将vue2.0与jquery onclick事件方法一起使用?当我研究特定问题时，在vue上定义了this.$ el.addEventListener('click'，this.onClick)的安装.但是对我来说似乎不太清楚.我需要这里的帮助.请指教
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
作为我在jquery下面的代码:
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和VueJS之间的基本区别.您在jQuery中所做的一切都可以在VueJS中完成，这只是了解它们之间的区别.当我们进入jQuery领域时，我们习惯了$()来获取值和内容.
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不同，这里的后端具有反应性，该库负责处理完整的html.您必须使用Vue语法定义html，然后定义存储变量的数据数组.然后在模板中使用变量
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.
这是我们可以对上面的代码块进行的修改，添加了输入标签后，这是您的"click"方法，而不是使用Vue提供的方法来使用jQuery的click方法.
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的click方法执行Vue的AddToDo功能.
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>
这将为您带来什么:
- 创建一个新的待办事项列表项
- 将该待办事项列表项添加到数据数组中，该列表项将自动呈现为html，而无需进行任何渲染.
有关更多详细信息，请阅读: https://github.com/thewhitetulip/intro -to-vuejs/
For more details, read this: https://github.com/thewhitetulip/intro-to-vuejs/
这篇关于带有点击事件处理程序的Vue 2.0的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
