Vue.js与Jquery的比较 不良之谁与争锋锋 js风暴

来源：蜘蛛抓取(WebSpider) 时间：2017-07-29 06:12 标签： 方世玉2谁与争锋
首先，Vue 的官方是不建议直接操作 DOM 的，其优势在于视图和数据的双向绑定，而且所有DOM操作都可以用Vue实现，反而使用jQuery来操作DOM的话，会造成不必要的麻烦，DOM未渲染完成之前事件绑定不上，当然也有解决办法，比如setTimeOut，但是何必呢？直接用Vue不是更方便吗？
这里是用v-for循环渲染的列表，而之后要对列表进行DOM操作，代码如下，初次渲染的时候没有问题，事件可以正常绑定，但数据刷新两次之后，就获取不到DOM了，当然事件也无法执行。当然也可以用setTimeOut来解决，但总感觉怪怪的。
用vue来操作不是更好么？定义好完方法，直接@click就行了。
阅读(...) 评论()vuejs响应用户事件-如点击 - 简书
vuejs响应用户事件-如点击
，介绍了如何通过vue.js实现绑定列表数据，这篇文章将在上一篇的基础介绍如何响应用户的点击事件。
页面上的列表原先有3个，我们想点击一次添加一条记录，也可以在头和尾删除数据；
我们也可以删除我们想删除的任意一行记录；
如果是用传统的jquery操作，页面中js会特别多，而且操作也很麻烦。
这里用vue.js就非常简单。
我们先看页面效果：
页面初始化.png
末尾增加一项.png
删除项.png
再来看代码：
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&meta name="viewport" content="width=device-width, initial-scale=1"&
&meta http-equiv="x-ua-compatible" content="ie=edge"&
&title&demo04&/title&
&link rel="stylesheet" href="../css/base/bootstrap.min.css"&
&link rel="stylesheet" href="../css/base/common.css"&
&div class="container mt15" id="ul-lists"&
&ul class="list-group" v-for="item in items"&
&li class="list-group-item"&
&span class="label label-default label-pill pull-right" v-on:click="removeTodo($index)"&×&/span&
{{item.text}}&{{$index}}
&p class="mt15"&
&button type="button" class="btn btn-info" v-on:click="addAtLast($index)"&在末尾增加一项&/button&
&button type="button" class="btn btn-secondary" v-on:click="deleteAtTop($index)"&删除第一项&/button&
&button type="button" class="btn btn-secondary" v-on:click="deleteAtBottom($index)"&删除最后一项&/button&
&script src="../js/base/vue.js"&&/script&
&script src="../js/base/jquery.min.js"&&/script&
&script src="../js/base/bootstrap.min.js"&&/script&
el: '#ul-lists',
{ text: 'item' },
{ text: 'item' },
{ text: 'item' }
methods: {
removeTodo: function (index){
this.items.splice(index, 1)
addAtLast: function(index){
this.items.push({ text: 'item' })
deleteAtTop: function(index){
this.items.shift();
deleteAtBottom: function(index){
this.items.pop();
在上面的代码中，我们主要是通过方法来管理Items这个数据，从而实现页面上的交互。
splice、push、shift、pop的用法和在js中一样。
因为这里的例子都不难，就不详细说了，大家可以照着上面的代码试试。
每个人有每个人的选择，不要随意评价。个人站点：/
掘金主页：https://gold.xitu.io/user/56cc5478816dfa
python博客：http://blog.csdn.net/pythonyin?viewmode=contents

我要回帖

更多关于 方世玉2谁与争锋 的文章

 

随机推荐