国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

vue快速入門的三個小實例

vboy1010 / 469人閱讀

摘要:但是關(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.現(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。!
2.什么是vue

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í)!

3.選項卡 運行效果

原理分析和實現(xiàn)

這個很簡單,無非就是一個點擊切換顯示而已。但是大家也要實現(xiàn)。如果這個看明白了,再看下面兩個!這個實例應(yīng)該只是一個熱身和熟悉的作用!

這個的步驟只有一步,原理也沒什么。我直接在代碼打注釋,看了注釋,大家就明白了!

完整代碼



    
    Title



html
css
javascript
vue
4.統(tǒng)計總價 運行效果

原理分析和實現(xiàn)

首先,還是先把布局寫好,和引入vue,準(zhǔn)備vue實例,這個不多說,代碼如下




    
    Title
    


購物清單

全選
商品
數(shù)量
單價(元)
金額(元)
操作
  • <ul id="ukmoy"></ul>

    共有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://specialneedsforspecialkids.com/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é)或者分享會議!那么今天我就...

        sherlock221 評論0 收藏0
      • vue.js快速入門

        摘要:但是,今天我要寫一個快速入門,本人覺得還是有一點用處,因為,我不可能在一天之內(nèi)精通某種東西,卻可以在一兩小時入門。不知道還要不要再來一個快速入門,發(fā)展得挺快,東西也像類似的全家。 以前看到多少天學(xué)習(xí)系列,我都深感煩躁,短短幾天怎么可以精通,那是對于他們而言。但是,今天我要寫一個快速入門,本人覺得還是有一點用處,因為,我不可能在一天之內(nèi)精通某種東西,卻可以在一兩小時入門。 回到vue本身...

        MkkHou 評論0 收藏0
      • 美團(tuán)程序框架mpvue入門教程

        摘要:美團(tuán)小程序框架入門教程自打?qū)懥嗣缊F(tuán)小程序框架蹲坑指南一發(fā)不可收拾,今天趁周末空閑,來寫個沒朋友的簡單入門教程,本教程只針對新手,老鳥勿噴。 美團(tuán)小程序框架mpvue入門教程 自打?qū)懥?美團(tuán)小程序框架mpvue蹲坑指南,一發(fā)不可收拾,今天趁周末空閑,來寫個mpvue(沒朋友)的簡單入門教程,本教程只針對新手,老鳥勿噴。 另外,我還專門為本文做了一個簡單的項目,如果懶得從頭開始搭項目的童鞋...

        YorkChen 評論0 收藏0

      發(fā)表評論

      0條評論

    最新活動
    閱讀需要支付1元查看
  • <ul id="ukmoy"><tbody id="ukmoy"></tbody></ul>
  • <th id="ukmoy"><menu id="ukmoy"></menu></th>
      • <