VUE快速入门，实用部分

     首先了解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