初學Vue（一） -- Vue簡單入門

時間  2019-12-10
標籤 初學 vue 簡單 入門 简体版
原文   原文鏈接
vue - 國人開發製做的

相似於 view 的發音javascript

vue通過了幾回大的版本波動html

0.x 0.6版本vue

1.x 版本java

2.x 版本 - 如今經常使用的react

爲何要介紹版本改動呢，由於不一樣版本語法和用法有差異，用起來比較麻煩jquery

react 由於版權緣由，致使百度等企業轉用vue，致使vue忽然火起來，也有支持國人的成分，固然其中的也缺不了它的確好用。json

完整版演示代碼數組

正式部分

vue學習建議先學會js，json瀏覽器

有的人以爲vue或angular不夠jquery方便，首先，vue和angular是數據驅動的，而jquery是事件驅動的，也就是說用jquery須要想着給賦予事件，而vue與angular只要想着數據怎麼變化就好了。學習

vue1.0下載

vue2.0下載

vue使用

html部分：
//首先固然是引入vue.js文件
<script src="vue.js"></script>
<body>
//vue標準是要用兩對花括號圈住數據名的
{{msg}}
<body>

js部分：
//使用vue要先new 一個vue對象出來傳入json格式的數據
    <script>
        new Vue({
            //做用域：el - element縮寫
            el:'body',
            //輸出的數據
            data:{
                msg:'hello vue!',
            }
        })
    </script>

{{}} -> 必須在做用域裏面放入輸出的模板，模板裏面放入data裏面你本身定義的變量

注意：只有ie8 以上的瀏覽器才能兼容vue

如何選取class或id爲做用域

<div class="myDiv">
    {{msg}}
</div>

    <script>
        new Vue({
    //這裏選區類與id是與jquery的方式是同樣的，id的話就是#myDiv
            el: '.myDiv',
            data: {
                msg:'hello vue!',
            }
        })
    </script>

經常使用指令

相似於angular 的經常使用指令有 ng-show /ng-repeat，vue固然也有。

  • v-show：相似於display，true就是顯示false就是隱藏
<style>
        div{
            width: 200px;
            height: 200px;
            background: black;
        }
    </style>

    <div v-show='false'></div>

    <script>
        //這裏定義做用域是必須的，使用vue語句若是不定義做用域是不會起做用的
        new Vue({
            el:'body',
        })
    </script>
<style>
        div{
            width: 200px;
            height: 200px;
            background: black;
        }
    </style>

    <div v-show='dis'></div>

    <script>
        new Vue({
            el:'body',
            //也能夠利用數據傳輸來使用，更加靈活
            data:{
                dis:false,
            }
        })
    </script>

  • v-for：循環輸出數組或json數據

<div v-for='i in arr'>{{i}}{{$index}}</div>
    <div v-for='i in json'>{{i}}</div>
    <div v-for='(key,value) in json'>{{key}}=>{{value}}</div>
    <div v-for='i in json'>{{$key}}=>{{i}}</div>
    <script>
        new Vue({
            el:'body',
            data:{
                //這是個字符串數組
                arr:['a','b','c'],
                json:{
                    bill:18,
                    bill2:21,
                    bill3:24
                }
            }
        })
    </script>

  • v-for: {{$index}} -> 索引值，{{$key}} -> key值

    • 由於json是鍵值對，能夠理解爲數組的索引與值的關係，因此能夠用不一樣方式訪問。
    • {{$index}}能夠進行計算 => {{$index+10}} 從10開始計數

v-model：雙向綁定 -- 數據和輸出綁定

<body>
    <input type="text" v-model='msg'>
        
    {{msg}}
    <script>
        new Vue({
            el:'body',
            data:{
                msg:'',
            }
        })    
    </script>

Vue事件書寫區

<style>
    div{
        height: 100px;
        width: 100px;
        background:black;
    }
</style>    
<input type="button" v-on:click='change' value="change">
    <div v-show='dis'></div>

    <script>
        new Vue({
            el:'body',
            data:{
                dis:true,
            },
            //vue 事件區域，全部事件控制寫在這裏
            methods:{
                change:function() {
                    this.dis=!this.dis;
                }
            }
        })    
    </script>
    • v-on有簡寫形式@ ,能夠直接把v-on替換爲@，@click='change'。

事件對象：event

  • 查看事件對象

    • 這些演示裏面的html部分關於body與html的樣式設置是必須的，否則body與html會按內容的大小填充，而不是佈滿整個頁面
html部分：

//這裏是必須設置這個樣式，否則body的大小是根據頁面內容調整大小的
<style>
    body,html{
        height: 100%;
        width: 100%;
    }
</style>
<body @click='show'>

<script>
        new Vue({
            el:'body',
            methods:{
 //事件對象，若是傳參只有一個，默認就是事件對象，若是有多個參數傳入，那麼事件對象就是$event
                show:function(e){
                    console.log(e);
                }
            }
        })
    </script>
  • `@click="show"是能夠傳遞參數給事件的，當它傳遞參數時，事件處理的形參再也不默認爲是時間對象，當咱們傳遞參數給事件又想看事件對象時能夠用$event 
html部分：
<style>
    body,html{
    height: 100%;
    width: 100%;
}
</style>
<body @click='show(10,event)'>

js部分：
    <script>
        new Vue({
            el:'body',
            methods:{
                show:function(e,$event){
                    console.log(e,event);
                }
            }
        })
    </script>

事件冒泡：事件冒泡的三種阻止方法

  • 先來看下事件冒泡沒有阻止的狀況

    • 這些演示裏面的html部分關於body與html的樣式設置是必須的，否則body與html會按內容的大小填充，而不是佈滿整個頁面
html部分：
<style>
        body,html{
            height: 100%;
            width: 100%;
        }
        div{
            height: 100px;
            width: 100px;
            background: black;
        }
</style>

<body @click="myBody">
    
<div @click="myDiv"></div>

js部分：
    <script>
        new Vue({
            el:'body',
            methods:{
                myDiv:function() {
                    alert('i am div');
                },
                myBody:function(event){
                    alert('i am body');
                }
            }
        })    
    </script>
  • event.cancelBubble=true;
html部分：
<style>
        body,html{
            height: 100%;
            width: 100%;
        }
        div{
            height: 100px;
            width: 100px;
            background: black;
        }
</style>

<body @click="myBody">
    
<div @click="myDiv"></div>

js部分：
    <script>
        new Vue({
            el:'body',
            methods:{
                myDiv:function() {
                    event.cancelBubble=true;
                    alert('i am div');
                },
                myBody:function(event){
                    alert('i am body');
                }
            }
        })    
    </script>
  • event.stopProgation();
html部分：
<style>
        body,html{
            height: 100%;
            width: 100%;
        }
        div{
            height: 100px;
            width: 100px;
            background: black;
        }
</style>

<body @click="myBody">
    
<div @click="myDiv"></div>

js部分：
    <script>
        new Vue({
            el:'body',
            methods:{
                myDiv:function() {
                    event.stopProgation();
                    alert('i am div');
                },
                myBody:function(event){
                    alert('i am body');
                }
            }
        })    
    </script>

  • 直接在click後接.stop

    • 其中，上面兩個event都是原生方法，因此雖然能用，可是仍是不夠方便，因此這裏使用vue方法來
html部分：
<style>
        body,html{
            height: 100%;
            width: 100%;
        }
        div{
            height: 100px;
            width: 100px;
            background: black;
        }
</style>

<body @click="myBody">
    
<div @click.stop="myDiv"></div>

js部分：
    <script>
        new Vue({
            el:'body',
            methods:{
                myDiv:function() {
                    alert('i am div');
                },
                myBody:function(event){
                    alert('i am body');
                }
            }
        })    
    </script>

阻止默認事件 -- 兩種默認事件阻止方式

  • event.preventDefault();

    • 這個是原生js方法，能用可是也不夠vue方法方便
html部分：
    <style>
            body,html{
                height: 100%;
                width: 100%;
            }
        </style>

<body @click="myBody">
            
js部分：
    <script>
        new Vue({
            el:'body',
            methods:{
                myBody:function(){
                    event.preventDefault();
                    alert('我右鍵了');
                }
            }
        })
    </script>
  • @click.prevent="";
html部分：
    <style>
            body,html{
                height: 100%;
                width: 100%;
            }
        </style>

<body @click.prevent="myBody">
            
js部分：
    <script>
        new Vue({
            el:'body',
            methods:{
                myBody:function(){
                    alert('我右鍵了');
                }
            }
        })
    </script>

鍵盤事件 -- 鍵盤監控事件利用keydown/up來監控用戶按下了什麼按鍵

  • 鍵盤監控事件
html部分：
    <style>
            body,html{
                height: 100%;
                width: 100%;
            }
    </style>

<body @keydown="mybody">
    
js部分：
        <script>
        new Vue({
            el:'body',
            methods:{
                mybody:function(){
                    alert('我按鍵盤了');
                }
            }
        })    
    </script>

  • event.keyCode監控用戶按鍵的ASCII碼，能夠經過查看keyCode來賦予不一樣按鍵不一樣事件，例如經過console.log(event.keyCode);能夠看到按鍵A的鍵值是65，那麼咱們能夠設置只有當按下A鍵時才顯示的事件

    • @keydown.65等效於if(e.keyCode==65) 
html部分：
    <style>
            body,html{
                height: 100%;
                width: 100%;
            }
    </style>

<body @keydown.65="mybody">
    
js部分：
        <script>
        new Vue({
            el:'body',
            methods:{
                mybody:function(){
                    alert('我按了A鍵');
                }
            }
        })    
    </script>
  • 能夠組合鍵使用
html部分：
    <style>
            body,html{
                height: 100%;
                width: 100%;
            }
    </style>

<body @keydown.65.66.67="mybody">
    
js部分：
        <script>
        new Vue({
            el:'body',
            methods:{
                mybody:function(){
                    alert('我按了abc鍵');
                }
            }
        })    
    </script>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程