代碼部分請下載本文代碼閱讀歧焦，代碼均能正常運行并有詳細的注釋厢塘。
概述
前端開發(fā)近況
- 需求依然旺盛迄靠，從JavaScript已經(jīng)在編程語言排行榜上排到了第七位和前端聘崗位數(shù)就可以看出瞳筏。
- 加入前端開發(fā)的新手越來越多，其中女孩子比例不少慌盯，自學(xué)能力稍有匱乏
- 前端框架層出不窮周霉，部分前端開發(fā)精力跟不上
- 作為一名碼農(nóng)最急需的是精通一門語言一個框架，然后再橫向去盡量多學(xué)一些技術(shù)润匙，有助于融會貫通诗眨，專業(yè)精通才有高收入。
寫這個博客的目的
- 希望能通過寫博客分享的方式更好的學(xué)習(xí)Vue和其它前端技術(shù)
- 希望能幫助到更多的同學(xué)更快速的學(xué)習(xí)Vue和其它前端技術(shù)
- 希望能賺點零花錢孕讳，如果你覺得我的文章幫助到了你匠楚，請在文章最下面點打賞按鈕打賞我。打賞過的同學(xué)加我qq:791831347,我拉你進我建的Vue交流群算是小小的回報吧厂财，你在群里問的問題都會盡量得到解答芋簿，但不做任何承諾。
- 未來也可能計劃出一套視頻教程
- 讓我們一起走在Vue進階的路上吧.(這個博客我會盡量說人話少說專業(yè)術(shù)語)
Vue簡述
長期以來璃饱，前端都是Jquery為王這樣一個狀態(tài)与斤，雖然從業(yè)時間比較長的前沿的前端開發(fā)者可能都已經(jīng)接觸至少十多個框架了，但是大多數(shù)年輕的開發(fā)者可能都還只是對Jquery這樣的萬金油更熟悉一些荚恶，下面我會用幾個小例子來說明Jquery開發(fā)和Vue這樣的Mvvm框架開發(fā)模式上的不同撩穿。
用一個簡單的例子來說明編寫Jquery和Vue上的不同
demo1 簡單修改文字
- 點擊按鈕后：
把hello，美女谒撼！歡迎學(xué)習(xí)Angular.
改為
hello食寡，帥哥！歡迎學(xué)習(xí)Vue.
屏幕快照 2017-02-27 22.48.32.png
- jquery代碼(用以下代碼直接替換掉html文件中的body,看不懂沒關(guān)系后面會詳細說道Vue的方方面面)
<div>
<p>Hello, <span id="name">美女</span>!</p>
<p>歡迎學(xué)習(xí) <span id="libName">Angular</span>.</p>
<button id = "modifyBtn">修改</button>
</div>
<script src="https://unpkg.com/jquery"></script>
<script type="text/javascript">
$("#modifyBtn").click(function(){
$("#name").text("帥哥");
$("#libName").text("Vue");
});
</script>
- Vue代碼
<div id="mycontent">
<p>Hello, <span >{{name}}</span>!</p>
<p>歡迎學(xué)習(xí) <span >{{libName}}</span>.</p>
<button v-on:click="modifyInfo" >修改</button>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#mycontent",
data:{
name:"美女",
libName:"Angular"
},
methods:{
modifyInfo:function(){
this.name = "帥哥";
this.libName = "Vue";
}
}
})
</script>
- tips 1 Jquery首先要獲取到dom對象廓潜，然后對dom對象進行進行值的修改等操作抵皱；
- tips 2. Vue是首先把值和js對象進行綁定，然后修改js對象的值辩蛋，Vue框架就會自動把dom的值就行更新呻畸。
- tips 3. 可以簡單的理解為Vue幫我們做了dom操作，我們以后用Vue就需要修改對象的值和做好元素和對象的綁定悼院，Vue這個框架就會自動幫我們做好dom的相關(guān)操作伤为。
- tips 4.這種dom元素跟隨JS對象值的變化而變化叫做單向數(shù)據(jù)綁定，如果JS對象的值也跟隨著dom元素的值的變化而變化就叫做雙向數(shù)據(jù)綁定据途，顧名思義單向和雙向??钮呀，后面會詳細介紹。
用一個更復(fù)雜的例子來說明Vue的優(yōu)勢
demo2-模擬一個簡易購物車
QQ20170303-144554@2x.png
下面只是展示下兩種框架寫出來的代碼昨凡，感興趣的同學(xué)可以把代碼下下來爽醋。
-Vue代碼
<div id="cart_item">
<!-- v-for 可以根據(jù)Vue中myListArr數(shù)組的長度來生成div,其中item和index分別是每一項的值和索引 -->
<div class="item_i" v-for="(item,index) in myListArr">
<div class="checkbox" >
<!-- v-on:click綁定了check點擊方法,傳入了index這個參數(shù)，它是數(shù)組當(dāng)前的索引便脊，在外層div的v-for中定義過 -->
<input type="checkbox" class="checkOne check" v-model="item.isChecked" v-on:click="check(index)"/></div>
<div class="good">
<!-- 綁定了圖片的地址和商品的名稱,:src 是v-bind:src的簡寫,只要是html元素的屬性值都可以用v-bind指令 -->
<img :src ="item.pic" />
<span>{{item.name}}</span></div>
<div class="price">{{item.price}}</div>
<div class="count">
<!-- @click 是v-on:click的簡寫,這里特意展示一下 -->
<span class="reduce" @click="reduce(index)">-</span>
<input type="text" class="count_input" v-model="item.num" />
<span class="add" v-on:click="add(index)">+</span></div>
<!-- 這里每一行商品總價是價格*數(shù)量蚂四，四舍五入保留兩位小數(shù) -->
<div class="subTotal">{{(item.price* item.num).toFixed(2)}}</div>
<div class="act">
<span class="delete" @click= "remove(index)">刪除</span></div>
</div>
</div>
var vm = new Vue({
el: "#cart",
data:{
myListArr : [
{
name:"【三只松鼠_小賤拉面丸子85gx3】休閑零食膨化小吃干脆面串燒味",
pic:"https://gw.alicdn.com/bao/uploaded/i1/TB16tk_KpXXXXX7XVXXXXXXXXXX_!!0-item_pic.jpg_200x200q50s150.jpg_.webp",
price:22.8,
num:2,
isChecked:true,
},
{
name:"【三只松鼠_炭燒腰果185gx2袋】堅果零食特產(chǎn)炒貨干果腰果仁",
pic:"https://gw.alicdn.com/bao/uploaded/i2/TB1372RKXXXXXXnXVXXXXXXXXXX_!!0-item_pic.jpg_200x200q50s150.jpg_.webp",
price:42,
num:1,
isChecked:true,
},
{
name:"【三只松鼠_皇族牌牛奶夾心餅240g】臺灣進口休閑零食夾心餅干",
pic:"https://gw.alicdn.com/bao/uploaded/i3/TB1UK3uOVXXXXaiaXXXXXXXXXXX_!!0-item_pic.jpg_200x200q50s150.jpg_.webp",
price:15.5,
num:3,
isChecked:true,
},
{
name:"【三只松鼠_碧根果210gx2袋】零食堅果山核桃長壽果干果奶油味",
pic:"https://gw.alicdn.com/bao/uploaded/i2/TB1eTzgJVXXXXcIXFXXXXXXXXXX_!!0-item_pic.jpg_200x200q50s150.jpg_.webp",
price:18.9,
num:1,
isChecked:true,
}],
//這三個屬性分別綁定的是所有商品數(shù)量、總價格、時候全選
totalCount:0,
totalPrice:0,
allCheck:true,
},
mounted: function () {
//這里是vue初始化完成后執(zhí)行的函數(shù),注意vue1.x版本是ready方法,如無特別說明本人使用的都是Vue2.x
this.calTotal();
},
methods:{
//每一行增加商品的方法,根據(jù)索引值修改這一項對應(yīng)的數(shù)據(jù)源的值就可以了遂赠，Vue會幫你自動更新dom中相關(guān)的值
add:function(index){
var item = this.myListArr[index];
item.num +=1;
//計算總價和總件數(shù)
this.calTotal();
},
//減商品
reduce:function(index){
var item = this.myListArr[index];
//如果商品只有1件就不允許再減了久妆，只能刪除
if (item.num == 1) {
return;
}
item.num -= 1;
this.calTotal();
},
//刪除本行商品
remove:function(index) {
//splice 是array的批量刪除方法
this.myListArr.splice(index,1);
this.calTotal();
},
//單行的checkbox選中
check:function(index){
var listItem = this.myListArr[index];
this.calTotal();
if (!listItem.isChecked) {
//如果沒有選中狀態(tài)肯定是沒有全選
this.allCheck = false;
}else {
//如果是選中狀態(tài)先把全選選中，然后再每一項遍歷跷睦，如果有一項沒有選中就改為非全選狀態(tài)
this.allCheck = true;
for (var i = 0; i < this.myListArr.length; i++) {
var listItem1 = this.myListArr[i];
if (!listItem1.isChecked) {
this.allCheck = false;
}
}
}
},
//全選checkbox事件
allCheckMethod:function(){
//全選只需要所有的列表都跟全選狀態(tài)是同一個狀態(tài)就可以
for (var i = 0; i < this.myListArr.length; i++) {
var listItem = this.myListArr[i];
listItem.isChecked = this.allCheck;
}
this.calTotal();
},
//計算總數(shù)
calTotal:function(){
//計算總件數(shù)
this.calTotalCount();
//計算總價格
this.calTotalPrice();
},
//計算總件數(shù)
calTotalCount: function () {
var count = 0;
for (var i = 0; i < this.myListArr.length; i++) {
var listItem = this.myListArr[i];
if (listItem.isChecked) {
count += listItem.num;
}
}
this.totalCount = count;
},
//計算總價格
calTotalPrice: function () {
var price = 0.0;
for (var i = 0; i < this.myListArr.length; i++) {
var listItem = this.myListArr[i];
if (listItem.isChecked) {
price = price + listItem.num * listItem.price;
}
}
this.totalPrice = price;
}
},
});
- Jquery代碼
$(function(){
//這里模擬數(shù)據(jù)筷弦，實際中是ajax請求網(wǎng)絡(luò)數(shù)據(jù)，并沒有太大差異
var myListArr = [{
name:"【三只松鼠_小賤拉面丸子85gx3】休閑零食膨化小吃干脆面串燒味",
pic:"https://gw.alicdn.com/bao/uploaded/i1/TB16tk_KpXXXXX7XVXXXXXXXXXX_!!0-item_pic.jpg_200x200q50s150.jpg_.webp",
price:22.8,
num:2,},
{
name:"【三只松鼠_炭燒腰果185gx2袋】堅果零食特產(chǎn)炒貨干果腰果仁",
pic:"https://gw.alicdn.com/bao/uploaded/i2/TB1372RKXXXXXXnXVXXXXXXXXXX_!!0-item_pic.jpg_200x200q50s150.jpg_.webp",
price:42,
num:1,},
{
name:"【三只松鼠_皇族牌牛奶夾心餅240g】臺灣進口休閑零食夾心餅干",
pic:"https://gw.alicdn.com/bao/uploaded/i3/TB1UK3uOVXXXXaiaXXXXXXXXXXX_!!0-item_pic.jpg_200x200q50s150.jpg_.webp",
price:15.5,
num:3,},
{
name:"【三只松鼠_碧根果210gx2袋】零食堅果山核桃長壽果干果奶油味",
pic:"https://gw.alicdn.com/bao/uploaded/i2/TB1eTzgJVXXXXcIXFXXXXXXXXXX_!!0-item_pic.jpg_200x200q50s150.jpg_.webp",
price:18.9,
num:1,}];
//每個列表項對應(yīng)的html代碼抑诸，實際情況中只要先把html寫好然后拷貝去空格就好
var listItemCodeStr = '<div class="item_i"><div class="checkbox"><input type="checkbox" class="checkOne check" checked="checked"></div><div class="good"><span>xxxxxxx</span></div><div class="price">0</div><div class="count"><span class="reduce">-</span><input type="text" class="count_input" value="1"><span class="add">+</span></div><div class="subTotal">0</div><div class="act"><span class="delete">刪除</span></div></div>';
//根據(jù)數(shù)據(jù)來添加每一項列表到dom上
for (var i = 0; i < myListArr.length; i++) {
//生成的列表項dom元素
var jqueryListItem = $(listItemCodeStr);
//對應(yīng)列表項數(shù)據(jù)
var listItemData = myListArr[i];
//用數(shù)據(jù)填充dom列表項
fillListWithData(jqueryListItem,listItemData)
//把列表項添加到dom上
$("#cart_item").append(jqueryListItem);
}
//跟兩個全選check-box加事件
$('.checkAll').click(function(event) {
var checkList = $(".checkOne");
var checkAllList = $(".checkAll");
//讓另一個按鈕也全選或者也不全選保持同步
for (var i = 0; i < checkAllList.length; i++) {
checkAllList.get(i).checked = this.checked;
}
for (var i = 0; i < checkList.length; i++) {
//如果當(dāng)前項和全選項不一樣則執(zhí)行選中單行操作
if (checkList.get(i).checked != this.checked) {
checkList.get(i).click();
}
}
});
});
//返回每一行的數(shù)據(jù)
function getTotalCountAndPrice (item) {
var count_input = parseInt(item.find(".count_input").eq(0).val());
var price = parseFloat(parseFloat(item.find(".price").eq(0).text()).toFixed(2));
var totalPrice = parseFloat((count_input*price).toFixed(2));
var jsonData = {"count":count_input,"price":price,"totalPrice":totalPrice};
return jsonData;
}
//每一個商品的總價
function getSubTotal(item){
var listData = getTotalCountAndPrice(item);
item.find('.subTotal').eq(0).html(listData.totalPrice);
}
//根據(jù)每一行的數(shù)據(jù)傳入修改所有商品總價格和總件數(shù)
function updateTotal(item,count){
var listData = getTotalCountAndPrice(item);
var listPrice = listData.price;
var totalPrice = parseFloat($("#totalPrice").eq(0).text());
var totalCount = parseInt($("#totalCount").eq(0).text());
$("#totalPrice").text((totalPrice + count * listPrice ).toFixed(2));
$("#totalCount").text((totalCount + count ));
}
//根據(jù)列表項數(shù)據(jù)填充列表項和總價總數(shù)量
function fillListWithData(jqueryListItem,listItemData){
//首次跟一行列表賦值(一個商品)
jqueryListItem.find('img').eq(0).attr('src', listItemData.pic);
jqueryListItem.find('span').eq(0).html(listItemData.name);
jqueryListItem.find('.price').eq(0).html(listItemData.price);
jqueryListItem.find('.count_input').eq(0).val(listItemData.num);
//計算一行的總價格
getSubTotal(jqueryListItem);
//減商品個數(shù)的事件
jqueryListItem.find('.reduce').click(function(event) {
//個數(shù)輸入框烂琴，因為會取值賦值用到幾次，所以提出來作變量
var count_inputOBJ = $(this).parent().find('.count_input').eq(0);
var count_input = parseInt(count_inputOBJ.val());
//輸入框的值為1就不允許再減個數(shù)了蜕乡，輸入框最小值為1
if (count_input == 1) {
return;
}
count_input -= 1;
count_inputOBJ.val(count_input);
//更新每一行的總價格
getSubTotal($(this).parent().parent());
var itemCheck = $(this).parent().parent().find(".checkOne").get(0);
if (itemCheck.checked) {
//如果這個商品勾選了應(yīng)該更新整個總價格和總數(shù)量
updateTotal($(this).parent().parent(),-1);
}
});
//增加商品個數(shù)的事件,代碼同減商品個數(shù)不注釋
jqueryListItem.find('.add').click(function(event) {
var count_inputOBJ = $(this).parent().parent().find('.count_input').eq(0);
var count_input = parseInt(count_inputOBJ.val());
count_input += 1;
count_inputOBJ.val(count_input);
getSubTotal($(this).parent().parent());
var itemCheck = $(this).parent().parent().find(".checkOne").get(0);
if (itemCheck.checked) {
updateTotal($(this).parent().parent(),1);
}
});
//刪除某個商品的事件,代碼同加減商品個數(shù)不注釋
jqueryListItem.find('.delete').click(function(event) {
var itemCheck = $(this).parent().parent().find(".checkOne").get(0);
if (itemCheck.checked) {
var count_inputOBJ = $(this).parent().parent().find('.count_input').eq(0);
updateTotal($(this).parent().parent(),- parseInt(count_inputOBJ.val()));
}
$(this).parent().parent().remove();
});
//跟列表項的check-box加事件
jqueryListItem.find('.checkOne').click(function(event) {
var listData = getTotalCountAndPrice($(this).parent().parent());
if (this.checked) {
//加上勾選項數(shù)量和價格
updateTotal($(this).parent().parent(),listData.count);
//遍歷看是否是全選
var checkList = $(".checkOne");
var checkAllList = $(".checkAll");
var allCheckTag = true ;
for (var i = 0; i < checkList.length; i++) {
var checkItem = checkList.get(i);
if (!checkItem.checked) {
allCheckTag = false;
break;
}
}
if (allCheckTag) {
for (var j = 0; j < checkAllList.length; j++) {
checkAllList.get(j).checked = true;
}
}
}else {
//減去勾選項
updateTotal($(this).parent().parent(),-listData.count);
//去掉全選
var checkAllList = $(".checkAll");
for (var j = 0; j < checkAllList.length; j++) {
checkAllList.get(j).checked = false;
}
}
});
//初始化總價,每循環(huán)一個列表項就應(yīng)該把總數(shù)總價格更新下
updateTotal(jqueryListItem,listItemData.num);
}
總結(jié)
如果你有認真寫一下以下代碼奸绷，可能你會在再做類似的項目的時候再也不想使用Jquery,下面做一下對比：
1.由于Vue幫我們省略了dom操作，代碼變得比較簡潔层玲，邏輯更加清晰号醉。
2.還是由于Vue幫我們省略了dom操作，加上雙向數(shù)據(jù)綁定辛块，Vue的代碼量減少很多畔派，大概2/3(還是要看具體項目)。
3.Jquery 專注于dom操作润绵，步驟一般為：獲取dom元素--> 跟dom元素賦值+加事件-->插入dom元素线椰。 其中dom元素賦值和加事件又需要獲取dom元素和更dom元素賦值，也就是這個原因代碼量才會增加授药。Vue專注于數(shù)據(jù)：用戶只需要關(guān)注dom元素值對應(yīng)綁定的數(shù)據(jù)士嚎，每次dom需要修改只需要去修改數(shù)據(jù)就可以了呜魄。
4.由于多個dom事件可能會同時修改一個元素的值悔叽，Vue只需要關(guān)注元素對應(yīng)綁定的數(shù)據(jù)就可以了，這使得Vue在邏輯上會更加清晰
讀完這篇文章我希望您已經(jīng)學(xué)會了：
1.知道Vue是以數(shù)據(jù)為中心的爵嗅，你只需要關(guān)注數(shù)據(jù)娇澎，比類Jquery的優(yōu)勢在于去dom操作和雙線數(shù)據(jù)綁定。
2.知道Vue.js的基本寫法睹晒，例如怎么引入vue.js趟庄，怎么聲明Vue實例，實例中能掛載的參數(shù)有el伪很、methods戚啥，data等，el锉试、methods猫十、data又分別表示什么，methods內(nèi)部的方法this可以引用Vue實例等等
3.了解到基本的Vue指令，比如v-model拖云、v-on:click贷笛、@click、v-for宙项、v-bind:src乏苦、:src,還有{{}}和@click方法里面可以傳參等等
4.最后希望你能把這個demo好好敲一敲，不管你理不理解代碼尤筐，熟練是學(xué)好一個框架的第一步汇荐，看再多聽再多，不如好好寫一下叔磷，有問題留言拢驾。
如果您覺得這篇文章對您有幫助，請打賞一下或去github上給個??改基，thanks繁疤。
