資訊專欄INFORMATION COLUMN
摘要：但是關(guān)于入門基礎(chǔ)的文章，我還沒有寫過，那么今天就寫入門的三個小實例，這三個小實例是我剛接觸的時候的練手作品，難度從很簡單到簡單，都是入門級的。如果等于，第二個顯示，其它三個不顯示。
1.前言
用vue做項目也有一段時間了，之前也是寫過關(guān)于vue和webpack構(gòu)建項目的相關(guān)文章，大家有興趣可以去看下webpack+vue項目實戰(zhàn)（一,搭建運行環(huán)境和相關(guān)配置）（這個系列一共有5篇文章，這是第一篇，其它幾篇文章鏈接就不貼了）。但是關(guān)于vue入門基礎(chǔ)的文章，我還沒有寫過，那么今天就寫vue入門的三個小實例，這三個小實例是我剛接觸vue的時候的練手作品，難度從很簡單到簡單，都是入門級的。希望能幫到大家更好的學(xué)習(xí)和了解vue，也是讓自己能夠復(fù)習(xí)一下vue。如果發(fā)現(xiàn)文章寫得有什么不好，寫錯了，或者有什么建議！歡迎大家指點迷津！
1.本篇文章使用的vue版本是2.4.2，大家要注意版本問題2.什么是vue
2.現(xiàn)在我也是假設(shè)您有基礎(chǔ)的html,css,javascript的知識，也已經(jīng)看過了官網(wǎng)的基本介紹，對vue有了一個大概的認(rèn)識了，了解了常用的vue指令(v-model,v-show,v-if,v-for,v-on,v-bind等)！如果剛接觸前端的話，你看著文章可能會蒙圈，建議先學(xué)習(xí)基礎(chǔ)，掌握了基礎(chǔ)知識再來看！
3.下面的實例，建議大家邊看文章邊動手做！這樣思路會非常清晰，不易混亂！也不會覺得文章長！如果只看文章，你可能未必會看完，因為文章我講得比較細(xì)，比較長！
4.這幾個實例，摘自我自己的平常練習(xí)的項目，代碼已經(jīng)提到github上面了(vue-demos)。歡迎大家star。！
vue是現(xiàn)在很火的一個前端MVVM框架，它以數(shù)據(jù)驅(qū)動和組件化的思想構(gòu)建，與angular和react并稱前端三大框架。相比angular和react，vue更加輕巧、高性能、也很容易上手。大家也可以移步，看一下vue的介紹和核心功能官網(wǎng)介紹。簡單粗暴的理解就是：用vue開發(fā)的時候，就是操作數(shù)據(jù)，然后vue就會處理，以數(shù)據(jù)驅(qū)動去改變DOM（不知道有沒有理解錯，理解錯了指點下）。
下面就是一個最簡單的說明例子
代碼如下
html
{{ message }}
js
new Vue({
el: "#app",
data: {
message: "Hello Vue!"
}
})
相信也不難理解，就是input綁定了message這個值，然后在input修改的時候，message就改了，由于雙向綁定，同時頁面的html（{{ message }}）進(jìn)行了修改！
好，下面進(jìn)入例子學(xué)習(xí)！
這個很簡單，無非就是一個點擊切換顯示而已。但是大家也要實現(xiàn)。如果這個看明白了，再看下面兩個！這個實例應(yīng)該只是一個熱身和熟悉的作用！
這個的步驟只有一步，原理也沒什么。我直接在代碼打注釋，看了注釋，大家就明白了！
完整代碼
Title
html
css
javascript
vue
4.統(tǒng)計總價
運行效果
原理分析和實現(xiàn)
首先，還是先把布局寫好，和引入vue，準(zhǔn)備vue實例，這個不多說，代碼如下
Title
購物清單
全選
商品
數(shù)量
單價(元)
金額(元)
操作
共有N個目標(biāo)
-
html5
X
-
css3
X
布局有了，相當(dāng)于一個骨架就有了，下面實現(xiàn)功能，一個一個來
步驟1
輸入并回車，多一條記錄。下面的記錄文字也會改變
首先，大的輸入框回車要添加紀(jì)錄，那么輸入框必須綁定一個值和一個添加紀(jì)錄的方法。
代碼如下：
然后，下面的記錄也要改變，所以，下面的記錄也要幫一個值，因為這個記錄可能會有多個，這個值就是一個數(shù)組，也可以看到，記錄除了名稱，還有記錄是否完成的狀態(tài)，所以，綁定記錄的這個值肯定是一個對象數(shù)組！代碼如下
最后，記錄文字要改變。這個只是一個當(dāng)前記錄的長度即可！
為了著重表示我修改了什么地方，代碼我現(xiàn)在只貼出修改的部分，大家對著上面的布局，就很容易知道我改的是什么地方了！下面也是這樣操作！
html代碼
共有{{prolist.length}}個目標(biāo)
{{list.name}}
X
js代碼
new Vue({
el: "#app",
data: {
addText:"",
//name-名稱,status-完成狀態(tài)
prolist:[
{name:"HTML5",status:false},
{name:"CSS3",status:false},
{name:"vue",status:false},
{name:"react",status:false}
]
},
computed:{
},
methods:{
addList(){
//添加進(jìn)來默認(rèn)status=false,就是未完成狀態(tài)
this.prolist.push({
name:this.addText,
status:false
});
//添加后，清空addText
this.addText="";
}
}
});
測試一下，沒問題
步驟2
點擊切換，下面記錄會改變
看到三個選項，也很簡單，無非就是三個選擇，一個是所有的目標(biāo)，一個是所有已經(jīng)完成的目標(biāo)，一個是所有沒完成的目標(biāo)。
首先.新建一個新的變量（newList），儲存prolist。遍歷的時候不再遍歷prolist，而是遍歷newList。改變也是改變newList。
然后.選擇所有目標(biāo)的時候，顯示全部prolist，把prolist賦值給newList。
然后.選擇所有已經(jīng)完成目標(biāo)的時候，只顯示prolist中，status為true的目標(biāo)，把prolist中，status為true的項賦值給newList，
最后.選擇所有未完成目標(biāo)的時候，只顯示status為false的目標(biāo)，把prolist中，status為false的項賦值給newList。
代碼如下
html
-
{{list.name}}
X
js
new Vue({
el: "#app",
data: {
addText:"",
//name-名稱,status-完成狀態(tài)
prolist:[
{name:"HTML5",status:false},
{name:"CSS3",status:false},
{name:"vue",status:false},
{name:"react",status:false}
],
newList:[]
},
computed:{
noend:function(){
return this.prolist.filter(function(item){
return !item.status
}).length;
}
},
methods:{
addList(){
//添加進(jìn)來默認(rèn)status=false,就是未完成狀態(tài)
this.prolist.push({
name:this.addText,
status:false
});
//添加后，清空addText
this.addText="";
},
chooseList(type){
//type=1時，選擇所有目標(biāo)
//type=2時，選擇所有已完成目標(biāo)
//type=3時，選擇所有未完成目標(biāo)
switch(type){
case 1:this.newList=this.prolist;break;
case 2:this.newList=this.prolist.filter(function(item){return item.status});break;
case 3:this.newList=this.prolist.filter(function(item){return !item.status});break;
}
},
delectList(index){
//根據(jù)索引，刪除數(shù)組某一項
this.prolist.splice(index,1);
//更新newList newList可能經(jīng)過this.prolist.filter()賦值，這樣的話，刪除了prolist不會影響到newList 那么就要手動更新newList
this.newList=this.prolist;
},
},
mounted(){
//初始化，把prolist賦值給newList。默認(rèn)顯示所有目標(biāo)
this.newList=this.prolist;
}
});
運行結(jié)果
步驟3
紅色關(guān)閉標(biāo)識，點擊會刪除該記錄。前面按鈕點擊會切換該記錄完成狀態(tài)，顏色也改變，記錄文字也跟著改變
首先點擊紅色關(guān)閉標(biāo)識，點擊會刪除該記錄。這個應(yīng)該沒什么問題，就是刪除prolist的一條記錄！
然后前面按鈕點擊會切換該記錄完成狀態(tài)。這個也沒什么，就是改變prolist的一條記錄的status字段！
最后記錄文字的改變，就是記錄prolist中status為false的有多少條，prolist中status為true的有多少條而已
html代碼
共有{{prolist.length}}個目標(biāo)，{{noend==0?"全部完成了":"已完成"+(prolist.length-noend)+"，還有"+noend+"條未完成"}}
-
{{list.name}}
X
js
new Vue({
el: "#app",
data: {
addText:"",
//name-名稱,status-完成狀態(tài)
prolist:[
{name:"HTML5",status:false},
{name:"CSS3",status:false},
{name:"vue",status:false},
{name:"react",status:false}
],
newList:[]
},
computed:{
//計算屬性，返回未完成目標(biāo)的條數(shù)，就是數(shù)組里面status=false的條數(shù)
noend:function(){
return this.prolist.filter(function(item){
return !item.status
}).length;
}
},
methods:{
addList(){
//添加進(jìn)來默認(rèn)status=false,就是未完成狀態(tài)
this.prolist.push({
name:this.addText,
status:false
});
//添加后，清空addText
this.addText="";
},
chooseList(type){
switch(type){
case 1:this.newList=this.prolist;break;
case 2:this.newList=this.prolist.filter(function(item){return item.status});break;
case 3:this.newList=this.prolist.filter(function(item){return !item.status});break;
}
},
delectList(index){
//根據(jù)索引，刪除數(shù)組某一項
this.prolist.splice(index,1);
//更新newList newList可能經(jīng)過this.prolist.filter()賦值，這樣的話，刪除了prolist不會影響到newList 那么就要手動更新newList
this.newList=this.prolist;
},
},
mounted(){
this.newList=this.prolist;
}
});
運行結(jié)果
步驟4
文字雙擊會出現(xiàn)輸入框，可輸入文字，如果回車或者失去焦點，就改變文字，如果按下ESC就恢復(fù)原來的文字
首先.雙擊出現(xiàn)輸入框，就是雙擊文字后，給當(dāng)前的li設(shè)置一個類名（‘eidting’），然后寫好樣式。當(dāng)li出現(xiàn)這個類名的時候，就出現(xiàn)輸入框，并且隱藏其它內(nèi)容。
然后.回車或者失去焦點，就改變文字這個只需要操作一個，就是把類名（‘eidting’）清除掉。然后輸入框就會隱藏，其它內(nèi)容顯示！
最后.按下ESC就恢復(fù)原來的文字，就是出現(xiàn)輸入框的時候，用一個變量（‘beforeEditText’）先保存當(dāng)前的內(nèi)容，然后按下了ESC，就把變量（‘beforeEditText’）賦值給當(dāng)前操作的值！
代碼如下：
html
-
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/84820.html
相關(guān)文章
-
個人分享--web前端學(xué)習(xí)資源分享
摘要：前言月份開始出沒社區(qū)，現(xiàn)在差不多月了，按照工作的說法，就是差不多過了三個月的試用期，準(zhǔn)備轉(zhuǎn)正了一般來說，差不多到了轉(zhuǎn)正的時候，會進(jìn)行總結(jié)或者分享會議那么今天我就把看過的一些學(xué)習(xí)資源主要是博客，博文推薦分享給大家。
1.前言
6月份開始出沒社區(qū)，現(xiàn)在差不多9月了，按照工作的說法，就是差不多過了三個月的試用期，準(zhǔn)備轉(zhuǎn)正了！一般來說，差不多到了轉(zhuǎn)正的時候，會進(jìn)行總結(jié)或者分享會議！那么今天我就...
-
vue.js快速入門
摘要：但是，今天我要寫一個快速入門，本人覺得還是有一點用處，因為，我不可能在一天之內(nèi)精通某種東西，卻可以在一兩小時入門。不知道還要不要再來一個快速入門，發(fā)展得挺快，東西也像類似的全家。
以前看到多少天學(xué)習(xí)系列，我都深感煩躁，短短幾天怎么可以精通，那是對于他們而言。但是，今天我要寫一個快速入門，本人覺得還是有一點用處，因為，我不可能在一天之內(nèi)精通某種東西，卻可以在一兩小時入門。
回到vue本身...
-
美團(tuán)小程序框架mpvue入門教程
摘要：美團(tuán)小程序框架入門教程自打?qū)懥嗣缊F(tuán)小程序框架蹲坑指南一發(fā)不可收拾，今天趁周末空閑，來寫個沒朋友的簡單入門教程，本教程只針對新手，老鳥勿噴。
美團(tuán)小程序框架mpvue入門教程
自打?qū)懥?美團(tuán)小程序框架mpvue蹲坑指南,一發(fā)不可收拾，今天趁周末空閑，來寫個mpvue(沒朋友)的簡單入門教程，本教程只針對新手，老鳥勿噴。
另外，我還專門為本文做了一個簡單的項目，如果懶得從頭開始搭項目的童鞋...
發(fā)表評論
0條評論
vboy1010
男|高級講師
TA的文章
閱讀更多
菜鳥筆記(5)——VS（Visual Studio）的一些常用的設(shè)置，( 使用printf和scan
閱讀 2541·2021-09-27 13:36
前端面試必問題答疑（2）
閱讀 2196·2019-08-29 18:47
CSS預(yù)編譯語言Less的用法總結(jié)
閱讀 2165·2019-08-29 15:21
CSS 字體(例如font-awesome)，使用子域名之后不能正確顯示
閱讀 1427·2019-08-29 11:14
雪碧圖sprity 合并多圖使用心得
閱讀 2014·2019-08-28 18:29
向CSS創(chuàng)始人之一Bert Bos提問！
閱讀 1653·2019-08-28 18:04
IE 8 瀏覽器 placeholder 兼容性處理
閱讀 600·2019-08-26 13:58
JavaScript sort() 對json進(jìn)行排序(數(shù)組)
閱讀 3242·2019-08-26 12:12
最新活動
閱讀需要支付1元查看
