Vue學習筆記

View? --->? ? ? html標簽 ???? |?? ???? Model?????? --->?????? data數據

一.v-for

1.數組: (兩種:數據數組,對象數組)? ???????? 可選參數索引index

??? 1.arr:['apple','banana','pear']

?????????????? ?? <li v-for="(item,index) in arr">{{ item+index }}li>

? ? ?2.arrObj:[ {name:'hanna'},{name:'lsb'},{name:'bobo'} ]

????? ??? <li v-for="(item,index) in arrObj">{{ item.name+index }}li>

????????? push();?? pop();??shift();?? unshift();? ?splice();?? sort();? reverse()

? ? ? ? ? pop() 方法用于刪除數組的最后一個元素并返回刪除的元素。

? ? ? ? ? shift() 方法用于把數組的第一個元素從其中刪除,并返回第一個元素的值。

? ? ? ? ? unshift() 方法可向數組的開頭添加一個或更多元素,并返回新的長度。

? ? ? ? ? splice() 方法用于插入、刪除或替換數組的元素。(改變原始數組

?2.對象:? ? ? ? ? ? ? ? ? ? ? ? ? ? ?可選參數鍵名 key, 索引 index

????? obj:{ name:'haha', age:21, sex:'woman'}

????? <li v-for="(item,key,index) in obj">{{ item+"-"+ key+"-"+index }}li>


二.v-show? /? v-if :

布爾值


三.事件

1.事件對象:

中$ event 是事件對象

使用事件對象show(e) {?alert(e.clientX)???? }

2.事件冒泡:

<div id="box" @click="alertion2">

<button @click="alertion1">冒泡button>

?點擊內部按鈕,觸發alertion1后,再觸發alertion2

3.阻止事件冒泡:

1).事件對象(e.cancelBubble=true)

<div id="box" @click="alertion2">

<button @click="alertion1($event)">冒泡button>

?alertion1(e)??? {??? ???alert("內部");??? e.cancelBubble=true;??????}

?2). vue自帶的.stop(推薦!)

<div id="box" @click="alertion2">

<button @click.stop="alertion1">冒泡button>

4.事件默認行為:

1). 事件對象? (?e.preventDefault( );?)

?????????????????????? <button @contextmenu="pre($event)">阻止默認行為button>

?????????????????????? pre(e)?? {??? alert(11);??? e.preventDefault();}

2). Vue自帶的.prevent(推薦!)

?????? <button @contextmenu.prevent="pre1">prevent阻止默認行為button>

5. 鍵盤事件:

1). 事件對象? (?e.preventDefault( );? )

????? ???????? <input type="text" @keydown="enter($event)">

????? ???????? enter(e) { if (e.keyCode == 13){?alert("您按下回車鍵了");}}

2).?Vue自帶的(推薦!)

?????? (.enter/.13、up、down、left、right)

?????????????? <input type="text" @keydown.13="enter">?????? 或者

?????????????? <input type="text" @keydown.enter="enter">


四.屬性

1. 屬性綁定:v-bind( 簡寫成 :)

???????? ? 效果與v-bind同,但會報404錯(url是數據)

? ? ? ? ? ?( url是data中的數據) ! ! * * * 推薦使用?

2. class和style

???????? 1).?class:

??????????????? ?數組??? : class=”[red,a,b,d]”?? 值為data中的數據red: ’red’類

??????????????? ?對象??? : class=”{ red:true, blue:false }”?? ????? 值為布爾類型

????????????????????????????? : class=”json”?? ???? json:? { red:true, blue:false }

????????????????????????????? :disabled=isDisabled.????? // isDisabled是布爾值

????????2).? style:

? ? ? ? ? ? ? ?注意:復合樣式,采用駝峰命名法

? ? ? ? ? ? ? ?數組:style=”[ a,b,d]”值為data中的數據???? a: {color: ’red’}

? ? ? ? ? ? ? ?對象:style=”{color:‘#fff’,backgroundColor:’purple’}”

? ? ? ? ? ? ? ?:style=”ajson”??? ajson:{ color:’#fff’,background:’#000’ }


五.模板

1. {{ msg}}? 雙向綁定:數據更新,模板會跟著更新

? ?如果數據展示后,不需要更新,數據只綁定一次:

?? {{msg}}?

2.?v-html? 轉義模板


六.過濾器??? (過濾模板數據)

?1.系統自帶的過濾器,例如轉化大寫:{{ ‘welcome’| uppercase }}等 ,全都被2.0廢除了,過濾器需要自定義

?????? ? eg:????????????????????????????

? 2.?????? 自定義過濾器:

????????????Vue.filter(name,function(input){??????

????????????? });

?????????????? ?? 如果帶參數*{{date | formatDate('YY-MM-DD', timeZone)}}

????????????eg:單位數字變成雙位數字:

????????????{{a |toDouble}}

????????????window.onload=function(){

??????????????????????? Vue.filter('toDouble', function(input){

?????????????????????????? ????returninput<10?'0'+input:input;

??????????????????????? })

??????????????????? ????newVue({

?????????????????????????????? el:'#box',

?????????????????????????? ????data:{

????????????????????????????????????? a:9

?????????????????????????????? }

??????????????????????? });

???????????????? }

? 時間戳一般說成XXX的時間戳,是指XXX發生或者處理的時間,這個時間被記下來,存在某處備查。

3.??? 時間轉換器:

4.? 過濾html標記:

5. 雙向過濾器:

Vue.filter('filterHtml',{

??? ????? read:function(input){ //model-view

??? ??????????return input.replace(/<[ ^< ]+>/g,'');

???? ?????????? ??},

????? write:function(val){ //view -> model

? ????????????????return val;

????? ??????????? }

??? });


七.交互(ajax)

? 1.引入vue-resource庫, 相當于給new? Vue添加了一個方法或對象

?????? ? vue-resource是交互(ajax)的前提

? 2.谷歌跨域:訪問本地文件(非服務器文件),Chrome會產生跨域問題

?????? 跨域:(面試)

? ? ? ?https://segmentfault.com/a/1190000011145364

? ? ? ? 協議,域名,端口,但凡有一個改了,就是跨域

? 3.解決跨域問題: http://blog.csdn.net/sjohnny/article/details/70256172

?????? ? 1) chrome `右鍵`->`屬性`->`快捷方式`處添加`--allow-file-access-from-files`

????????????? ?操作如下圖:???????? http://blog.csdn.net/sjohnny/article/details/70256172


? ? ?????2) 將本地文件轉換成服務端的文件(解決訪問本地文件跨域的問題)

?sublime配置一個sublimeServer插件來使用


????????配飾sublimeServer來實現將本地.html文件以服務的形式打開

?????????https://www.wenji8.com/p/353U26z.html


?????? ? 3)使用火狐瀏覽器

-------------------------------------------------------------------------------------------------------

4.?交互get :(默認)???

?? ? 獲取一個普通文本數據:??????????????? ????

???????????????? this.$http.get(‘a.txt’).then(function (res) {

????????????? ????????????alert(res.status);

????????????????????????? alert(res.data);

? ? ? ? ? ? ? ? ? },function () {

????????????????????? alert(res.status);

?????????? ????????});

?????? ? 給本地服務器發送數據:(* )-------à 跨服務器會產生跨域問題

????????this.$http.get('get.php',{

????????????? a:1,

????????????? b:2

? ? ? ????? ?}).then(function(res){

????????????????? alert(res.status);

????????????},function(){

????????})

-------------------------------------------------------------------------------------------------------

? 5.? 交互post :

給本地服務器發送數據 :( * ) -------à 跨服務器會產生跨域問題

this.$http.post('post.php',{

????????????? a:1,

???????????? ?b:2

? ?},{

????????????? emulateJSON:true

?}).then(function(res){

????????????? alert(res.status);

????????????? alert(res.data);

? },function(){

? ? ? ? ? ? ? ?alert(res.status);

? })

-------------------------------------------------------------------------------------------------------

? 5.? 交互jsonp :

給本地服務器之外服務器發送數據 :( * )----->? ? ? ? ? ? ?不會跨域

eg1: (

360網站)

https://sug.so.360.cn/suggest?callback=suggest_so&encodein=utf-8&encodeout=utf-8&format=json&fields=word&word=a???????????????????

搜索a后,在network->js中拷貝link

address,結果如下:

https://sug.so.360.cn/suggest?callback=suggest_so&word=a????接口

https://sug.so.360.cn/suggest? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ????????? 地址

word=a? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?數據

操作代碼:

this.$http.jsonp('https://sug.so.360.cn/suggest',{

??? word:

'a'??????????????????????????????????? ???? 數據}).then(function(res){

// alert(res.status);

??? alert(res.data.s);

},

function(res){

??? alert(res.status);

})

eg1: ( 百度)

https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&json=1&p=3&sid=25263_1439_24866_21126_17001_20240_25177_25145_20929&req=2&csor=1&cb=jQuery110204777080402977609_1512525981208&_=1512525981212

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

https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su ?????? 地址

wd=a?????????????????????????????????????????????????????????????? ?????????????????????????????????? 數據

cb????--->????callback???? ? 需要設置屬性

操作代碼:

this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{

wd:'a'

},{

?jsonp:'cb'??????? // 重點:cbcallback的名字}).then(function(res){

alert(res.status);

alert(res.data.s);

},

function(res){

alert(res.status);

})

-------------------------------------------------------------------------------------------------------

6.? 交互綜合使用:(默認是get)

?this.$http({

???????????????????? url:???? // 后臺接口的地址

data: {????????? //給后臺提交數據

??????????????????????????? ?????? //根據后臺接口文件發送數據

??????????????????????????? ?????? act:‘add’,

??????????????????????????? ?????? content:this.XX

}

???????????????????? methods:post / get / jsonp

???????????????????? jsonp:? ’cb’?? //cbName

}).then(function(res){

?????? //返回成功后的json格式文件

?????? var?json=res.data;

if(? ){

}

});

八.生存周期

1.? 鉤子函數:

?????? a).? created???????????? ???à? ???? 實例對象成功,new Vue創建以后執行

?????? 編譯的兩個階段:

?????? b).? beforeCompile???????????? à??? 編譯之前

?????? c).? compiled????????? à????? 編譯之后

?????? d).? ready? ?????? ??????à????????? 數據插入到文檔中?? √

?????? e).? beforeDestroy??????? à??? ??銷毀之前

?????? f).? destroyed????? ???? à????? 銷毀之后



v-cloak? (一般用于一大段)

防止花括號中的數據閃爍,在樣式表中設置 [v-cloak]

{ display: none }

九、計算屬性????

computed:{

?????? b:function(){???????????? //默認調用get

?????? return?? 值

}

}

? 必須有return值

? 默認是getter方法,即—> 默認只能獲取計算屬性的值,如果想為計算屬性直接賦值,則會報錯。


十、VUE實例化用法

var?vm=new?Vue({})

??vm.$el?? ???à???????? 獲取了元素或節點(例如divElement)

????????????? eg:??????????? vm.$el.style.background='red';

??vm.$data???? à??????? 獲取了數據對象(就是data)

[if !supportLists]?????? [endif]Vm.$mount(‘#box’);??????? ??????????????????????????? à????????? 手動掛載

new?Vue({ ? }).$mount(‘#box’);????? ???à???????? 手動掛載

[if !supportLists]?????? [endif]在new Vue({ aa:11 }) 中自定義的屬性相當于靜態屬性?? à?? 自定義屬性,

若想訪問自定義的屬性,? vm.$options.aa

(model層中的屬性,即在data數據中自定義的)

[if !supportLists]?????? [endif]在new? Vue({ show:function(){alert(); } })中自定義方法? à 自定義方法,

調用方法:vm.$options.show();

[if !supportLists]?????? [endif]vm.$log()?????????? ???? à????????? ?????? 打印現在data中的數據狀態

十一、關于循環

v-for=”value? in? data”??????

循環如果有重復數據,vue1.0是不行的,需要加track-by

vue2.0可以有

十二、自定義指令

????????????????????????? 屬性:(View層中的屬性,即在html標簽中自定義的)

????????????????????????? Vue.directive(指令名稱,function(參數){

??????????????????????????? this.el?? ->原生DOM元素

????????????????????????? });




????????????????????????? 指令名稱:??? v-red? ->?red

????????????????????????? *注意: 必須以 v-開頭


????????????????????????? 拖拽:

????????????????????????? -------------------------------

十三、自定義元素指令:(用處不大)

????????????????????????? Vue.elementDirective('zns-red',{

????????????????????????? ??? bind:function(){

????????????????????????? ??????? this.el.style.background='red';

????????????????????????? ??? }

????????????????????????? });

------------------------------------------------

@keydown.up

@keydown.enter


@keydown.a/b/c....


十四、自定義鍵盤信息:

????????????????????????? Vue.directive('on').keyCodes.ctrl=17;

????????????????????????? Vue.directive('on').keyCodes.myenter=13;

------------------------------------------------

十五、監聽數據變化:

????????????????????????? vm.$el/$mount/$options/....


????????????????????????? vm.$watch(name,fnCb);? //淺度

????????????????????????? vm.$watch(name,fnCb,{deep:true});? //深度監視

------------------------------------------------

vue組件:

組件間各種通信

slot

vue-loader????? webpack?? .vue

vue-router

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 基本格式 以json的形式、將數據(支持所有格式)掛載在vue的data上、方法掛載在vue的methods上。 ...
    kirito_song閱讀 786評論 0 21
  • vue學習筆記 安裝 Vue 提供一個官方命令行工具,可用于快速搭建大型單頁應用。只需幾分鐘即可創建并啟動一個帶熱...
    EL_PSY_CONGROO閱讀 1,096評論 0 5
  • Vue學習筆記 Vue初始化對象 data和methods里面的屬性都是Vue這個實例對象的代理屬性,例:vm.m...
    土豪碼農閱讀 1,005評論 1 1
  • 項目腳手架 在這里我使用vue-cli來進行安裝 查看項目結構,index.html/main.js是項目入口,A...
    等酒香醇V閱讀 732評論 0 1
  • 人生在世,誰的一生也不會十全十美,生活不如意的事十有八九。無論幾何,但愿我們都能想開,看淡,放下一生不愉快的人和事...
    安寧康泰閱讀 531評論 2 0