vue怎么設(shè)置全局?jǐn)?shù)組？在main.js中設(shè)置一個數(shù)組實際ecport導(dǎo)出來，在其他頁面使用前端的學(xué)習(xí)步驟？html/html5/css3:學(xué)過html標(biāo)簽ampcss之后，可以不上去看h5的新特性和

vue怎么設(shè)置全局?jǐn)?shù)組？

在main.js中設(shè)置一個數(shù)組實際ecport導(dǎo)出來，在其他頁面使用

前端的學(xué)習(xí)步驟？

html/html5/css3:

學(xué)過html標(biāo)簽ampcss之后，可以不上去看h5的新特性和css3的新屬性，大都一些死東西，基本看w3c官網(wǎng)就可以學(xué)會什么，之后找一些頁面往那敲打。（注意去學(xué)習(xí)兼容性）。

js能力的提高：

前端當(dāng)然是上手容易易全精通難的行業(yè)，能力還是體現(xiàn)了什么在js上，能夠掌握了基礎(chǔ)的DOM操作后，應(yīng)該上去看js的oop編程，和后臺的面向?qū)ο罂隙ㄓ幸恍﹨^(qū)別的，其他的如：prototype/閉包/最簡單js算法（三大排序、數(shù)組去重）等，之后可以自己去看js設(shè)計模式的書。

UI庫/js庫：

jquery絕對是要能夠掌握的，學(xué)站了起來上手也很快，UI庫更是如此。不需要花過多時間在這個上面，能至少熟悉的程度就好，現(xiàn)用現(xiàn)看文檔都來不及。

node.js：

現(xiàn)在的前端大都要會node.js開發(fā)完畢的，主要原因有兩個

1）node.js是可以以及中間層，內(nèi)部函數(shù)后臺的接口，自己組裝起來數(shù)據(jù)再轉(zhuǎn)發(fā)給前臺，并且這個可以對session等狀態(tài)做存儲。

2）一些自動化工具諸如simpler/gulp/webpack和一些框架.例如Vue.js是遠(yuǎn)居node的。

因此node.js也估計清楚幫一下忙，在換算的開發(fā)中做中間層也很多，主要作用那是再轉(zhuǎn)發(fā)。

實現(xiàn)nodejs的框架也可以學(xué)express/KOA，上手難度都不太大。

三大框架Vue/angular/react：

也可以從Vue入門學(xué)習(xí)，Vue時最簡單的，掌握到了之后再看看其他兩個框架，前端的框架太大了，但大多數(shù)MVC框架也是并不復(fù)雜，打好基礎(chǔ)的話去學(xué)習(xí)下來很快，小程序開發(fā)也完全不一樣。

移動端開發(fā)：

rem、媒體查詢、配置好不好適口標(biāo)簽、flex布局等掌握到后就這個可以的新移動端網(wǎng)頁了。比較多那是對字體配置的不兼容。

vue的filter如何調(diào)用function的方法？

vue的filter內(nèi)部函數(shù)function有四種，可以不自己編譯程序過濾器，利用內(nèi)部過濾，注冊相關(guān)值，依據(jù)關(guān)鍵字過濾表的功能，實現(xiàn)方法對function的調(diào)用。

a:2.0將1.0所有自帶的過濾器都刪掉了，也就是說，在2.0中，要使用過濾器，則要我們自己c語言程序。

b:2.0過濾器的傳參并非以前的，是以函數(shù)傳參的，下面示例（后面有詳細(xì)示例）：

之前調(diào)用:{{msg|mimi#3912#39#395#39}}

現(xiàn)在全局函數(shù):{{msg|mimi(#3912#39,#395#39)}}

c:移除單向過濾器：

(#39change#39,{

read:function(val){

returnval

},

write:function(val,oldVal){

returnisEmail(val)?val:oldVal

}

})

1.組件內(nèi)部過濾（此例子寫法區(qū)分于一次性處理數(shù)據(jù)顯示的樣式，不可能變動原數(shù)據(jù)）

lt!DOCTYPEhtmlgt

lthtmllang#34existe#34rlm

ltheadgt

ltmetacharset#34UTF-8#34rlm

ltmetaname#34viewport#34content#34widthdevice-width,initial-scale1.0#34a8

ltmetahttp-equiv#34X-UA-Compatible#34content#34ieedge#34r26

lttitlegtfilterlt/titlegt

ltscriptsrc##34gtlt/scriptgt

lt/headgt

ltbodygt

ltdivid#34app#34r26

ltulgt

lt!--再添加兩個過濾器,注意最好不要問題,注意一點先后順序--gt

ltliv-for#34iteminlist#34gt{{|filterAdd1|filterAdd2}}lt/ligt

lt/ulgt

lt/divgt

lt/bodygt

ltscriptgt

varvmfunVue({

el:#39#app#39,

data(){

return{

list:[

{#34id#34:0,#34title#34:#3411111#34,#34cont#34:#34111111#34},

{#34id#34:1,#34title#34:#3422222#34,#34cont#34:#34111111#34},

{#34id#34:2,#34title#34:#3433333#34,#34cont#34:#34111111#34},

{#34id#34:3,#34title#34:#3444444#34,#34cont#34:#34111111#34},

]

}

},

filters:{

filterAdd1(item){

returnitem10

},

filterAdd2(item){

return#39$#39item

}

},

methods:{

},

mounted(){

}

})

lt/scriptgt

lt/htmlgt

2.注冊在全局的fliter，filter傳值，filter動態(tài)傳值

lt!DOCTYPEhtmlgt

lthtmllang#34en#34gt

ltheadgt

ltmetacharset#34UTF-8#34rlm

ltmetaname#34viewport#34content#34widthdevice-width,initial-scale1.0#34r26

ltmetahttp-equiv#34X-UA-Compatible#34content#34ieedge#34r26

lttitlegtfilterlt/titlegt

ltscriptsrc##34gtlt/scriptgt

lt/headgt

ltbodygt

ltdivid#34app#34gt

ltulgt

lt!--先添加兩個過濾器,注意不要起,注意一點先后順序--rlm

lt!--過濾傳值，帶引號的是字符串，不帶是number,傳的值是可以動態(tài)綁定--a8

ltliv-for#34itemintolist#34r26{{|filterAdd1(Number(input),20)|filterAdd2}}lt/ligt

lt/ulgt

ltinputtype#34text#34placeholder#34place#34v-model#34input#34r26

lt/divgt

lt/bodygt

ltscriptgt

(#39filterAdd1#39,function(value,one,two){

returnvalueonetwo//系統(tǒng)默認(rèn)另一個參數(shù)是系統(tǒng)默認(rèn)要過濾的那個值

})

(#39filterAdd2#39,function(value){

return#39$#39value

})

varvmnextVue({

el:#39#app#39,

data(){

return{

input:5,

list:[

{#34id#34:0,#34title#34:#3411111#34,#34cont#34:#34111111#34},

{#34id#34:1,#34title#34:#3422222#34,#34cont#34:#34111111#34},

{#34id#34:2,#34title#34:#3433333#34,#34cont#34:#34111111#34},

{#34id#34:3,#34title#34:#3444444#34,#34cont#34:#34111111#34},

]

}

},

methods:{

},

mounted(){

}

})

lt/scriptgt

lt/htmlgt

結(jié)果：

3.計算屬性篩選，methods方法篩選

lt!DOCTYPEhtmlgt

lthtmllang#34en#34gt

ltheadgt

ltmetacharset#34UTF-8#34gt

ltmetaname#34viewport#34content#34widthdevice-width,initial-scale1.0#34gt

ltmetahttp-equiv#34X-UA-compatibility#34content#34ieedge#34gt

lttitlegtDocumentlt/titlegt

lt!--ltscriptsrc#34vue.js#34gtlt/scriptgt--gt

ltscriptsrc##34gtlt/scriptgt

lt/headgt

ltbodygt

ltdivid#34app#34gt

#34addMore#34gt加載更多l(xiāng)t/divgt

ltulgtltliv-for#34iteminfilterlist#34gt{{item}}lt/ligtlt/ulgt

lthrgt

ltulgtltliv-for#34iteminfilterlistFun()#34gt{{item}}lt/ligtlt/ulgt

lt/divgt

lt/bodygt

ltscriptgt

varvmnewVue({

el:#39#app#39,

data(){

return{

size:5,

list:[

{#34id#34:0,#34title#34:#3411111#34,#34cont#34:#34111111#34},

{#34id#34:1,#34title#34:#3422222#34,#34cont#34:#34111111#34},

{#34id#34:2,#34title#34:#3433333#34,#34cont#34:#34111111#34},

{#34id#34:3,#34title#34:#3444444#34,#34cont#34:#34111111#34},

{#34id#34:4,#34title#34:#3455555#34,#34cont#34:#3455555#34},

{#34id#34:5,#34title#34:#3466666#34,#34cont#34:#3466666#34},

{#34id#34:6,#34title#34:#3477777#34,#34cont#34:#3477777#34},

{#34id#34:7,#34title#34:#3477777#34,#34cont#34:#3488888#34},

{#34id#34:8,#34title#34:#34888888#34,#34cont#34:#34999999#34},

{#34id#34:9,#34title#34:#34000000#34,#34cont#34:#3499999#34},

{#34id#34:10,#34title#34:#34a88888#34,#34cont#34:#3499999#34},

{#34id#34:11,#34title#34:#34a22222#34,#34cont#34:#34111111#34},

{#34id#34:12,#34title#34:#34a33333#34,#34cont#34:#34111111#34},

{#34id#34:13,#34title#34:#34a44444#34,#34cont#34:#34111111#34},

{#34id#34:14,#34title#34:#34a55555#34,#34cont#34:#3455555#34},

{#34id#34:15,#34title#34:#34a66666#34,#34cont#34:#3466666#34},

{#34id#34:16,#34title#34:#34a77777#34,#34cont#34:#3477777#34},

{#34id#34:17,#34title#34:#34a77777#34,#34cont#34:#3488888#34},

{#34id#34:18,#34title#34:#34a888888#34,#34cont#34:#34999999#34},

{#34id#34:19,#34title#34:#34a000000#34,#34cont#34:#3499999#34},

{#34id#34:20,#34title#34:#34a88888#34,#34cont#34:#3499999#34}

]

}

},

computed:{

filterlist(){

let

return(function(number){

returnltnum

})

}

},

methods:{

filterlistFun(val){

let

return(function(number){

returnltnum

})

},

addMore(){

5

},

},

mounted(){

}

})

lt/scriptgt

lt/htmlgt

4.使用js中的迭代函數(shù)filter

實例一原文

varapp5newVue({

el:#39#app5#39,

data:{

shoppingList:[

#34Milk#34,#34Donuts#34,#34Cookies#34,#34Chocolate#34,#34PeanutButter#34,#34PeptoBismol#34,#34PeptoBismol(Chocolate flavor)#34,#34PeptoBismol(Cookie flavor)#34

],

key:#34#34

},

computed:{

filterShoppingList:function(){

//`this`pointsto thevminstance

varkey

varshoppingList

//在在用filter時應(yīng)注意，前面全局函數(shù)的是不需要建議使用filter的數(shù)組，而給filter函數(shù)傳來的是數(shù)組中的每個item，也就是說filter里面的函數(shù)，是每個item要再去做的，并將每個結(jié)果直接返回。

return(function(item){

return().indexOf(())!-1

})

}

}

})

ltulgt

Filter Keyltinput type#34text#34v-model#34key#34rlm

ltliv-for#34itemoffilterShoppingList#34r26

{{item}}

lt/ligt

lt/ulgt

最終效果利用了參照關(guān)鍵字來過濾列表的功能。

其他的一些Js迭代方法——filter()、map()、some()、every()、forEach()、lastIndexOf()、indexOf()