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