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