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