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'??????? // 重點：cb為callback的名字}).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
