原文: https://blog.csdn.net/xyz_dream/article/details/78131450
首先了解JQuery和Vue.js都是前端js库。但是侧重点不一样，Jquery重点在于很灵活地操作DOM元素以及Ajax请求。然而，Vue.js的重点在于数据和DOM元素的绑定关系，最方便的地方是大量运用到ajax做页面渲染的时候，非常快捷和方便。所以JQuery和Vue.js混合使用，简直是爽到爆炸！我用JQuery做ajax请求，用Vue数据和DOM绑定，以及Jquery对DOM的简单操作，让代码变得更加简洁。
举一个简单的例子，大家可以对比一下，假如不用Vue.js渲染大量的ajax请求页面的纯JQuery操作DOM。看看有什么区别。
现在我们有一个需求， 分页显示数据。但是采用ajax的形式，就像手机一样。想要显示更多数据，点击”更多”…
其实也是分页的一个变种，不太像原始分页 “首页 1 2 3 4 尾页 “。体验效果也会很好。
下面分别对比纯 JQuery和Vue.js对这个需求的处理，是怎么做的。
先来JQuery的版本: 在ul中添加li 模拟数据
<div id=”page”>
<ul id=”show_page”>
<ul>
</div>
<button id=”more”>更多</button><script>
$(function(){
var lis= [1,2,3,4,5] ;//原来li要显示的数组数据
//此时获取到假如 点击更多 多显示一个 变为 6
//整体会变为 1 2 3 4 5 6
//点击事件
$(“#more”).click(function(){
$.post(url,data,function(data,status){
var getData = data;// 6
//往ul里面追加子元素
$(“#show_page”).append(“<li>”+getData+”</li>”);
}).
});
});
</script>Vue.js的处理方式。
<div id=”page”>
<ul id=”show_page”>
<li v-for=”li in lis” >{{li}}</li> <!–循环打印数据–>
<ul>
</div>
<button v-on:click=”getData” id=”more”>更多</button> <!–绑定事件–><script>
$(function(){
var data = [1,2,3,4,5];//原来li要显示的数组数据
var page = new Vue(
{
el:’#page’,
data:{
lis:data //把data赋值给lis
},
methods:{
getData:function(){
$(url,data2,function(getData,status){
this.lis.push(getData); //往 lis数组放数据
});
}
}
}
);
})
</script>有人可能觉得，好像Vue.js似乎好像也不能减少代码，好像还比JQuery多了。这只是一个简单测试，看不出来有点。大家有没有发现，JQuery渲染数据那个地方，是不是要拼模板”<li>”+data+”</li>”.这是个小模板还好，你觉得没什么区别，但是一般情况下模板可不是这个简单的，可能有很几百行html代码，此时你再去拼接，你就会知道痛苦了。还担心拼接不对，估计至少测试很多遍之后，你才能确定模板是对的。并且代码可读性，实在是不敢恭维。
然而，Vue.js做这件事太简单了。在html那里你直接写好一个模板，在填充数据的地方填充,使用 v-for循环数据数据。就能实现。并且最强大的地方在哪，大家可以看到Vue.js代码上面我有使用类似 JQuery的append，把数据插入到里面吗？并没有。而只是往数据数组lis push一个数据元素就完了。剩下的全然不用你动手。
总结: JQuery用来操作一些简单的DOM操作，Ajax请求操作，然而使用Vue.js来渲染数据，完美组合！！！
1.简单插入文本 {{message}}
<p id=”text”> {{message | uppercase(使用过滤函数) }} </p><script>
var text = new Vue(
{
el:’#text’, // 用过Jquery的人大家都知道
data:{
message:”Hello VUE” // 此时 上面p元素中的文本信息变为 Hello VUE.只有有效显示文本 若插入<h1>不会显示标签效果
},
filters:{ //过滤函数
toupper:function($value)
{
return $value.toUpperCase(); //转换为全大写
}
}
}
);
</script>2.插入HTML文本 v-html
<div id=”text” v-html=”html” > </div><script>
var text = new VUE( //为了简单讲解 el data省略写
{
html: “<h1>Hello VUE</h1>” //此时 html会被插入div中,显示正常的<h1>标签效果。
}
);
</script>3.绑定属性和数据一致 v-bind:title v-bind:id v-bind:alt v-bind:href ……等等 关于属性的操作 (缩写 :href :title)
3.2 绑定事件: v-on:click = “alert” onclick(效果) (缩写 @click)
<div id=”text”>
<button v-on:click=”tip” >绑定事件</button>
<img v-bind:src=”utl” > 绑定src==url变量
</div><script>
var text = new Vue(
{el:’#text’,
data:{
url :’http://www.baidu.com' //绑定到 v-bind:src 只要url变化 被绑定的img的src也会发生变化
},
methods:{
tip:function(){
alert(“被点击了!”);
}
}
}
);
</script>4.input输入 使用 v-model=”message” 实现双向绑定。 即 输入的text值会变成message变量的值,message变量的值也会影响input的值
<p>{{message}}</p>
<input type=”text” v-model=”message” /><script>
var text = new Vue(
{
el:’#id’,
data:{
message:’Hello World’ // 相当于 input输入什么数据，此时message变量也会变成什么数据。 之前是单向
} //绑定。message改变则绑定的元素改变。现在两个方向都有，DOM改变，变量也会改变
}
);
</script>
5.简单表达式
<p id=”text”>
{{ 5+5 }} //输出10
{{ ok?yes:no }} //输出yes
</p><script>
var text = new VUE(
{
ok:true
}
);
</script>6. 简单判断 if else 语句
<p v-if=”seen” > hello </p> // 如果 seen== true 就显示 <p> hello </p>
<p v-else> Hello</p> // else 显示本语句
还有用法比较好的: <template 条件语句符合则执行下列模板 >
<template v-if=”” >
<h1>H1 </h1>
<h2>H2 </h2>
<h3>H3 </h3>
</template>
<template v-else >
</template>7.循环打印
<template v-for=”item in items” > //从items数组中 循环打印 <li>{{item}}</li>
<li>{{item}}</li>
</template>
<script>
var vue= new Vue(
{
el:”#id”,
data:{
items:[1,2,3,4,5] //数组 此时DOM和数据是绑定的。当items数组发生变化，相应的绑定的html也会发生变化
}, methods:{ submit:function(){ $.get(url,data,fucntion(data,status{ this.items.push(6);//页面自动添加 })) } }
}
);
</script>8.获取DOM元素信息
var vue = new Vue();
vue.$el ==> document.getElementById(“#id”); //结合 Jquery可以玩出新花样。
vue.$data =====> vue.data