VUE使用大全

vue

官網(wǎng)? https://cn.vuejs.org/

下載

1.X

2.X

優(yōu)點(diǎn)

mvvm的框架

angular

上手比較麻煩

用在pc端多

google支持

ng-XXX

所有的屬性方法放在$scope

vue

上手簡單,易學(xué)

小巧垂攘,pc,移動都好

全球的使用量比angular高很多

華人個人開發(fā)

v-XXX

他的屬性和方法都在json壁酬,他都是new出來的

共同點(diǎn):都不兼容低版本

使用

var app=angular.module('模塊名稱',[]);

app.controller('控制器的名稱',function($scope,$http){

$scope,$http? ? 名稱不能變,但是順序能變

$scope掛屬性和方法

})

var vue=new Vue({ //可以new多個梗顺,就想ng里面控制器一樣

el:'.box',? //控制范圍? 選擇器

data:{? ? ? //是掛屬性的

msg:'abc'

}蹲嚣,

methods:{? //是掛方法的

add:function(){

}

}

});

注:el 和 data寫死的必須這么寫

選擇器 只能選擇一個

指令:

v-model 表單元素產(chǎn)生數(shù)據(jù)

radio on off

checkbox true false

v-for="v in arr/json" v-->value

v-for="(k,v) in arr/json" v-->value

數(shù)組:$index? json:$key

事件:

v-on:click="add()"

v-on:mouseover

簡寫:@click="add()"

事件對象 $event

組織默認(rèn)行為 ev.preventDefault();

簡寫: @contextmenu.prevent

阻止冒泡:ev.cancelBubble=true;

event.stopPropagation()

簡寫:@click.stop

鍵盤事件:ev.keyCode

簡寫:@keyup.13

@keyup.enter

@keyup.left

傳參:順序不能亂

屬性里面直接用參數(shù)會報錯匕荸,但是能出來

v-bind

vue里面屬性都是用v-bind來綁定的

v-bind:src="這里面寫的數(shù)據(jù)不用模板"

簡寫? :src推薦

:class

1爹谭、data:{

msg:'red'

}

:class="msg"

2、data:{

a:'red',

b:'border',

c:'margin'

}

:class="[a,b,c]"? //a b c 都是數(shù)據(jù)

3榛搔、data:{

a:true,

b:false

}

:class="{red:a,border:b}"

4诺凡、data:{

json:{red:true,border:false}

}

:class="json"

:style

data:{

a:{

width:'100px'

},

b:{

height:'100px'

}

}

:style=[a,b]

data:{

a:100,

b:'red'

}

:style="{height:a+'px',background:b}"

頁面渲染

非轉(zhuǎn)譯輸出

{{}}? 數(shù)據(jù)更新模板就變化

{{*}} 數(shù)據(jù)只綁定一次,初始化的時候是什么就是什么

{{{}}} HTML轉(zhuǎn)譯輸出

過濾器

|過濾器名稱 參數(shù)

{{msg|currency '¥'} 錢

{{data1|uppercase}}

{{data2|lowercase}}

{{data3|capitalize}}

|過濾器名稱 |過濾器名稱 |過濾器名稱.....

交互

ng $http

vue

1、下載vue-resource.js

npm cnpm bower

2药薯、引入

XHR

this.$http.post('a.txt').then(function(res){

this.msg=res.data;

},function(){

alert('網(wǎng)絡(luò)鏈接失敗')

})

JSONP:

https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=show

this.$http.jsonp('url',{params:{wd:'a'},jsonp:'cb'}).then(function(res){

},function(){

})

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末绑洛,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子童本,更是在濱河造成了極大的恐慌真屯,老刑警劉巖,帶你破解...
    沈念sama閱讀 212,686評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件穷娱,死亡現(xiàn)場離奇詭異绑蔫,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)泵额,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,668評論 3 385
  • 文/潘曉璐 我一進(jìn)店門配深,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人嫁盲,你說我怎么就攤上這事篓叶。” “怎么了羞秤?”我有些...
    開封第一講書人閱讀 158,160評論 0 348
  • 文/不壞的土叔 我叫張陵缸托,是天一觀的道長。 經(jīng)常有香客問我瘾蛋,道長俐镐,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,736評論 1 284
  • 正文 為了忘掉前任哺哼,我火速辦了婚禮佩抹,結(jié)果婚禮上叼风,老公的妹妹穿的比我還像新娘。我一直安慰自己棍苹,他們只是感情好无宿,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,847評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著廊勃,像睡著了一般懈贺。 火紅的嫁衣襯著肌膚如雪经窖。 梳的紋絲不亂的頭發(fā)上坡垫,一...
    開封第一講書人閱讀 50,043評論 1 291
  • 那天,我揣著相機(jī)與錄音画侣,去河邊找鬼冰悠。 笑死,一個胖子當(dāng)著我的面吹牛配乱,可吹牛的內(nèi)容都是我干的溉卓。 我是一名探鬼主播,決...
    沈念sama閱讀 39,129評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼搬泥,長吁一口氣:“原來是場噩夢啊……” “哼桑寨!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起忿檩,我...
    開封第一講書人閱讀 37,872評論 0 268
  • 序言:老撾萬榮一對情侶失蹤尉尾,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后燥透,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體沙咏,經(jīng)...
    沈念sama閱讀 44,318評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,645評論 2 327
  • 正文 我和宋清朗相戀三年班套,在試婚紗的時候發(fā)現(xiàn)自己被綠了肢藐。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,777評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡吱韭,死狀恐怖吆豹,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情理盆,我是刑警寧澤痘煤,帶...
    沈念sama閱讀 34,470評論 4 333
  • 正文 年R本政府宣布,位于F島的核電站熏挎,受9級特大地震影響速勇,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜坎拐,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,126評論 3 317
  • 文/蒙蒙 一烦磁、第九天 我趴在偏房一處隱蔽的房頂上張望养匈。 院中可真熱鬧,春花似錦都伪、人聲如沸呕乎。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,861評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽猬仁。三九已至,卻和暖如春先誉,著一層夾襖步出監(jiān)牢的瞬間湿刽,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,095評論 1 267
  • 我被黑心中介騙來泰國打工褐耳, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留诈闺,地道東北人。 一個月前我還...
    沈念sama閱讀 46,589評論 2 362
  • 正文 我出身青樓铃芦,卻偏偏與公主長得像雅镊,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子刃滓,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,687評論 2 351

推薦閱讀更多精彩內(nèi)容