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