【vue干貨】vue事件

vue干貨第二集

Vue和angular的區(qū)別
  • vue是一個mvvm框架（庫），和angular類似易阳，比較容易上手附较，小巧
  • vue：
    ■ 簡單，易學 中文
    ■ 指令以v-xxx
    ■ 一片html代碼配合上json潦俺，在new出來一個vue的實例
    ■ 一個個人維護項目
    ■ 適合：移動端項目拒课，小巧
    ■ vue的發(fā)展勢頭很猛徐勃，GitHub上的star數(shù)量已經(jīng)超越angular
  • angular：
    ■ 上手難，框架大一些
    ■ 指令以ng-xxx
    ■ 所有屬性和方法都掛到￥scope身上
    ■ angular由Google維護
    ■ 適合：pc端項目
    *共同點：不兼容低版本IE
常用指令：
  • 指令的含義：擴展html標簽的功能,屬性
  • angular常用的指令：ng-model（放在表單的input元素上）, ng-controller
    *對應的vue也有常用的指令：v-model： 一般用在表單元素(input)上 雙向數(shù)據(jù)綁定
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model指令</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>

    </style>
    <script src="vue.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:'body',
                data:{
                    msg:'welcome vue'
                }
            });
        };
    </script>
</head>
<body>
    <input type="text" v-model="msg">
    <br>
    {{msg}}
</body>
</html>
  • v-for 循環(huán)數(shù)組指令
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>循環(huán)數(shù)組</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>

    </style>
    <script src="vue.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:'#box',
                data:{
                    arr:['apple','banana','orange','pear'],
                    json:{a:'apple',b:'banana',c:'orange'}
                }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <ul>
            <li v-for="value in arr">
                {{value}}
            </li>
        </ul>
    </div>
</body>
</html>
  • 如何循環(huán)json文件：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>循環(huán)json文件</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>

    </style>
    <script src="vue.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:'#box',
                data:{
                    arr:['apple','banana','orange','pear'],
                    json:{a:'apple',b:'banana',c:'orange'}
                }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <ul>
            <li v-for="value in arr">
                {{value}}   {{$index}}
            </li>
        </ul>
        <hr>
        <ul>
            <li v-for="value in json">
                {{value}}   {{$index}}  {{$key}}
            </li>
        </ul>

        <hr>
        <ul>
            <li v-for="(k,v) in json">
                {{k}}   {{v}}   {{$index}}  {{$key}}
            </li>
        </ul>
    </div>
</body>
</html>
  • 事件：在angularjs中是ng-click早像，在vue里面的基礎事件 : v-on:click='函數(shù)'
添加一個按鈕僻肖，點擊按鈕時在頁面中添加一個tomato
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基礎事件</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>

    </style>
    <script src="vue.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:'#box',
                data:{ //數(shù)據(jù)
                    arr:['apple','banana','orange','pear'],
                    json:{a:'apple',b:'banana',c:'orange'}
                },
                methods:{
                    add:function(){
                        this.arr.push('tomato');
                    }
                }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <input type="button" value="按鈕" v-on:click="add()">
        <br>
        <ul>
            <li v-for="value in arr">
                {{value}}
            </li>
        </ul>
    </div>
</body>
</html>

還有一些其他的事件：
v-on:mouseover
v-on:mouseout
v-on:mousedown
v-on:dblclick

  • v-show 顯示隱藏：點擊按鈕div消失的demo，通過按鈕的點擊控制v-show的屬性卢鹦，
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>顯示隱藏</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>

    </style>
    <script src="vue.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:'#box',
                data:{ //數(shù)據(jù)
                    a:true
                }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <input type="button" value="按鈕" v-on:click="a=false">
        <div style="width:100px; height:100px; background: red" v-show="a">

        </div>
    </div>
</body>
</html>
  • vue 事件簡寫
    v-on:click 等價 @click

*事件冒泡
阻止冒泡：cancelBubble

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止冒泡</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>

    </style>
    <script src="vue.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:'#box',
                data:{

                },
                methods:{
                    show:function(ev){
                        alert(1);
                        ev.cancelBubble=true;
                    },
                    show2:function(){
                        alert(2);
                    }
                }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <div @click="show2()">
            <input type="button" value="按鈕" @click="show($event)">
        </div>
    </div>
</body>
</html>

方法2: click.stop 推薦Ｍ卧唷！冀自！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止冒泡</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>

    </style>
    <script src="vue.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:'#box',
                data:{

                },
                methods:{
                    show:function(){
                        alert(1);
                    },
                    show2:function(){
                        alert(2);
                    }
                }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <div @click="show2()">
            <input type="button" value="按鈕" @click.stop="show()">
        </div>
    </div>
</body>
</html>

阻止默認行為：
1.preventDefault
2.contextDefault.prevent推薦Ｈ嘀伞！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止默認</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>

    </style>
    <script src="vue.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:'#box',
                data:{

                },
                methods:{
                    show:function(ev){
                        alert(1);
                        ev.preventDefault();
                    }
                }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <input type="button" value="按鈕" @contextmenu="show($event)">
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止默認事件</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>

    </style>
    <script src="vue.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:'#box',
                data:{

                },
                methods:{
                    show:function(){
                        alert(1);
                    }
                }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <input type="button" value="按鈕" @contextmenu.prevent="show()">
    </div>
</body>
</html>

常用的鍵 ：簡介的形式
回車@keyup/keydown.enter 熬粗，
上@keyup/keydown.up搀玖，
下@keyup/keydown.down，
左@keyup/keydown.left驻呐，
右@keyup/keydown.right 灌诅，

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個濱河市含末，隨后出現(xiàn)的幾起案子猜拾，更是在濱河造成了極大的恐慌，老刑警劉巖佣盒，帶你破解...
    沈念sama閱讀 216,324評論 6贊 498
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件关带，死亡現(xiàn)場離奇詭異，居然都是意外死亡沼撕，警方通過查閱死者的電腦和手機宋雏，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,356評論 3贊 392
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來务豺，“玉大人磨总，你說我怎么就攤上這事×ぃ” “怎么了蚪燕？”我有些...
    開封第一講書人閱讀 162,328評論 0贊 353
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長奔浅。 經(jīng)常有香客問我馆纳，道長，這世上最難降的妖魔是什么汹桦？ 我笑而不...
    開封第一講書人閱讀 58,147評論 1贊 292
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任鲁驶，我火速辦了婚禮，結果婚禮上舞骆，老公的妹妹穿的比我還像新娘钥弯。我一直安慰自己径荔，他們只是感情好，可當我...
    茶點故事閱讀 67,160評論 6贊 388
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布脆霎。 她就那樣靜靜地躺著总处，像睡著了一般。 火紅的嫁衣襯著肌膚如雪睛蛛。 梳的紋絲不亂的頭發(fā)上鹦马，一...
    開封第一講書人閱讀 51,115評論 1贊 296
  • 城市分裂傳說
    那天，我揣著相機與錄音忆肾，去河邊找鬼荸频。 笑死，一個胖子當著我的面吹牛难菌，可吹牛的內容都是我干的。 我是一名探鬼主播蔑滓，決...
    沈念sama閱讀 40,025評論 3贊 417
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼郊酒，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了键袱？” 一聲冷哼從身側響起燎窘，我...
    開封第一講書人閱讀 38,867評論 0贊 274
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎蹄咖，沒想到半個月后褐健，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
    沈念sama閱讀 45,307評論 1贊 310
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡澜汤，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,528評論 2贊 332
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年蚜迅，在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片俊抵。...
    茶點故事閱讀 39,688評論 1贊 348
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡谁不，死狀恐怖，靈堂內的尸體忽然破棺而出徽诲，到底是詐尸還是另有隱情刹帕，我是刑警寧澤，帶...
    沈念sama閱讀 35,409評論 5贊 343
  • ?日本核電站爆炸內幕
    正文 年R本政府宣布谎替，位于F島的核電站偷溺，受9級特大地震影響，放射性物質發(fā)生泄漏钱贯。R本人自食惡果不足惜挫掏，卻給世界環(huán)境...
    茶點故事閱讀 41,001評論 3贊 325
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望秩命。 院中可真熱鬧砍濒，春花似錦淋肾、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,657評論 0贊 22
  • 一樁弒父案樊卓，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至杠河，卻和暖如春碌尔，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背券敌。 一陣腳步聲響...
    開封第一講書人閱讀 32,811評論 1贊 268
  • 情欲美人皮
    我被黑心中介騙來泰國打工唾戚， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人待诅。 一個月前我還...
    沈念sama閱讀 47,685評論 2贊 368
  • 代替公主和親
    正文 我出身青樓叹坦，卻偏偏與公主長得像，于是被迫代替她去往敵國和親卑雁。 傳聞我的和親對象是個殘疾皇子募书，可洞房花燭夜當晚...
    茶點故事閱讀 44,573評論 2贊 353

推薦閱讀更多精彩內容

  • 1.安裝 可以簡單地在頁面引入Vue.js作為獨立版本，Vue即被注冊為全局變量测蹲，可以在頁面使用了莹捡。 如果希望搭建...
    Awey閱讀 11,014評論 4贊 129
  • 1. 初識vue (1) vue到底是什么? 一個mvvm框架(庫)、和angular類似 比較容易上手扣甲、小巧m...
    懶心丶閱讀 301評論 0贊 0
  • 這篇筆記主要包含 Vue 2 不同于 Vue 1 或者特有的內容篮赢，還有我對于 Vue 1.0 印象不深的內容。關于...
    云之外閱讀 5,048評論 0贊 29
  • 基本格式 以json的形式琉挖、將數(shù)據(jù)(支持所有格式)掛載在vue的data上启泣、方法掛載在vue的methods上。 ...
    kirito_song閱讀 766評論 0贊 21
  • 今夜注定失眠示辈。晚上在香即福魚莊與朋友歡聚种远，席間發(fā)現(xiàn)手機顯示有一個未接來電，是好友春華的顽耳，趕緊回撥說對不起坠敷，太鬧了，...
    如歌的行板紫雪閱讀 892評論 1贊 1