Vue系列（一）：簡介、起步、經常使用指令、事件和屬性、模板、過濾器

時間 2019-11-09

標籤 vue 系列簡介起步經常使用指令事件屬性模板過濾器简体版

原文原文鏈接

1、 Vue.js簡介

1. Vue.js是什麼

Vue.js也稱爲Vue，讀音/vju:/，相似view，錯誤讀音v-u-ecss

是一個輕量級MVVM（Model-View-ViewModel）框架，和angular、react相似，其實就是所謂的數據雙向綁定
數據驅動+組件化的前端開發（核心思想）
更容易上手、小巧

vue2.0和1.0相比，最大的變化就是引入了Virtual DOM（虛擬DOM）,頁面更新效率更高，速度更快。html

參考：官網前端

2.vue和angular的區別

2.1 angular

上手較難
指令以ng-xxx開頭
全部屬性和方法都存儲在$scope中
由google維護

2.2 vue

簡單、易學、更輕量
指令以v-xxx開頭
HTML代碼+JSON數據，再建立一個vue實例
由我的維護：尤雨溪，華人，目前就任於阿里巴巴，2014.2開源了vue.js庫

共同點：都不兼容低版本IEvue

2、起步

1. Hello World

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        window.onload=function(){
            //配置是否容許vue-devtools檢查代碼，方便調試，生產環境中須要設置爲false，默認爲true
            Vue.config.devtools=false;
            Vue.config.productionTip=false; //阻止vue啓動時生成生產消息

            var vm=new Vue({
                el:'#itany', //指定關聯的元素
                data:{ //存儲數據
                    msg:'Hello World'
                }
            });
        }
    </script>
</head>
<body>
    <div id="itany">
        {{msg}} <!-- 兩對大括號{{}}稱爲模板，用來進行數據的綁定顯示在頁面中 -->
    </div>

    <h3>
        {{msg}}
    </h3>
</body>
</html>

2. 安裝vue-devtools插件，便於在chrome中調試vue

vue-devtools下載地址react

直接將vue-devtools解壓縮，而後將文件夾中的chrome拖放到擴展程序中

//配置是否容許vue-devtools檢查代碼，方便調試，生產環境中須要設置爲false
    Vue.config.devtools=false;
    Vue.config.productionTip=false; //阻止vue啓動時生成生產消息

3、經常使用指令

1. 什麼是指令？

用來擴展html標籤的功能。ios

2. vue中經常使用的指令

v-model
雙向數據綁定，通常用於表單元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>經常使用指令：v-model</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        window.onload=function(){
            new Vue({
                // el:'.itany',
                el:'div', //vue2.0中不容許將vue實例掛載到<html>或<body>元素，在vue1.0中是能夠的
                data:{
                    name:'', //即便沒有值，也不能省略，報錯
                    age:21,
                    flag:true,
                    nums:[12,4,23,5],
                    user:{id:9527,name:'唐伯虎'}
                }
            });
        }
    </script>
</head>
<body>
    <!-- <div id="itany"> -->
    <!-- <div class="itany"> -->
    <div>
        用戶名：<input type="text" v-model="name">
        <br>

        {{name}} <br>
        {{age}} <br>
        {{flag}} <br>
        {{nums}} <br>
        {{user}}
    </div>
</body>
</html>

v-for
對數組或對象進行循環操做，使用的是v-for，不是v-repeat
注：在vue1.0中提供了隱式變量，如$index、$keygit
```
在vue2.0中去除了隱式變量，已被廢除
```

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>經常使用指令：v-for</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:'#itany',
                data:{
                    arr:[12,4,5,34,2,11],
                    user:{id:9527,name:'唐伯虎',age:25},
                    arr2:[12,4,5,34,2,11,12],
                    users:[
                        {id:9527,name:'唐伯虎',age:25},
                        {id:1001,name:'秋香',age:22},
                        {id:1002,name:'石榴姐',age:24}
                    ]
                }
            });
        }
    </script>
</head>
<body>
    <div id="itany">
        <!-- {{arr}} -->

        <ul>
            <!-- 普通循環 -->
            <!-- <li v-for="value in arr">{{value}}</li> -->
            <!-- <li v-for="value in user">{{value}}</li> -->

            <!-- 鍵值循環 -->
            <!-- <li v-for="(v,k) in arr">{{k}}={{v}}</li> -->
            <!-- <li v-for="(v,k) in user">{{k}}={{v}}</li> -->

            <!-- 能夠直接循環包含重複數據的集合，能夠經過指定:key屬性綁定惟一key，當更新元素時可重用元素，提升效率，相似於vue1.0中track-by -->
            <!-- <li v-for="(v,k) in arr2" :key="k">{{v}}</li> -->

            <li v-for="(user,index) in users">
                {{index+1}},{{user.id}},{{user.name}},{{user.age}}
            </li>
        </ul>
    </div>
</body>
</html>

+ v-on
 用來綁定事件，用法：v-on:事件="函數"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>經常使用指令：v-on</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        window.onload=function(){
            let vm=new Vue({
                el:'#itany',
                data:{  //存儲數據
                    arr:[12,34,45,23,5]
                },
                methods:{ //存儲方法
                    show:function(){
                        console.log('show方法');
                    },
                    add(){
                        // console.log(this); //this表示當前vue實例
                        // console.log(this===vm); //true
                        this.arr.push(666); //使用this訪問當前實例中的成員
                        // this.show();
                    }
                }
            });
        }
    </script>
</head>
<body>
    <div id="itany">
        <!-- <button onclick="show()">點我</button> -->
        <button v-on:click="show">點我</button>
        <button v-on:click="add()">向數組中添加一個元素</button>
        <br>
        {{arr}}
        <hr>
        
        <button v-on:mouseover="show">鼠標通過</button>
        <button v-on:dblclick="show">鼠標雙擊</button>
    </div>
</body>
</html>

v-show/v-if
用來顯示或隱藏元素，v-show是經過display實現，v-if是每次刪除後再從新建立，與angular中相似

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>經常使用指令：v-show</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        window.onload=function(){
            let vm=new Vue({
                el:'#itany',
                data:{ 
                    flag:true
                },
                methods:{ 
                    change(){
                        this.flag=!this.flag;
                    }
                }
            });
        }
    </script>
</head>
<body>
    <div id="itany">
        <!-- <button v-on:click="change">隱藏</button> -->
        <button v-on:click="flag=!flag">隱藏</button>

        <hr>
        <div style="width: 100px;height: 100px; background-color: red" v-if="flag">歡迎來到南京網博</div>
    </div>
</body>
</html>

4、事件和屬性

1. 事件

1.1 事件簡寫

v-on:click=""    
簡寫方式 @click=""

1.2 事件對象`$`event

console.log(e.target.innerHTML); //DOM對象
console.log(this); //當前Vue實例
包含事件相關信息，如事件源、事件類型、偏移量
target、type、offsetx

1.3 事件冒泡

阻止事件冒泡：
    a)原生js方式:e.stopPropagation();依賴於事件對象
    b)vue方式，不依賴於事件對象
        @click.stop

1.4 事件默認行爲

阻止默認行爲：
    a)原生js方式:e.preventDefault();依賴於事件對象
    b)vue方式：@click.prevent

1.5 鍵盤事件

原生：console.log(e.keyCode);
     if(e.keyCode==13){
        console.log('您按了回車');
     }
回車：@keydown.13 或@keydown.enter
上：@keydown.38 或@keydown.up

默認沒有@keydown.a/b/c...事件，能夠自定義鍵盤事件，也稱爲自定義鍵碼或自定義鍵位別名

1.6 事件修飾符

.stop - 調用 event.stopPropagation()。
.prevent - 調用 event.preventDefault()。
.{keyCode | keyAlias} - 只當事件是從特定鍵觸發時才觸發回調。
.native - 監聽組件根元素的原生事件。
.once - 只觸發一次回調。

2. 屬性

2.1 屬性綁定和屬性的簡寫

v-bind 用於屬性綁定， v-bind:屬性=""

屬性的簡寫：
    v-bind:src="" 簡寫爲 :src=""

2.2 class和style屬性

綁定class和style屬性時語法比較複雜：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>class和style屬性</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        window.onload=function(){
            let vm=new Vue({
                el:'#itany',
                data:{
                    bb:'aa',
                    dd:'cc',
                    flag:true,
                    num:-2,
                    hello:{aa:true,cc:true},
                    xx:{color:'blue',fontSize:'30px'},
                    yy:{backgroundColor:'#ff7300'}
                }
            });
        }
    </script>
    <style>
        .aa{
            color:red;
            font-size:20px;
        }
        .cc{
            background-color:#ccc;
        }
    </style>
</head>
<body>
    <div id="itany">
        <!-- 
            class屬性
         -->
        <!-- <p class="aa">南京網博</p> -->  <!-- 能夠訪問，普通css方式 -->

        <!-- <p :class="aa">南京網博</p> --> <!-- 不能夠，Vue的屬性綁定時不能直接css樣式 -->

        <!-- 方式1:變量形式 -->
        <!-- <p :class="bb">南京網博</p> -->

        <!-- 方式2：數組形式，同時引用多個 -->
        <!-- <p :class="[bb,dd]">南京網博</p> -->

        <!-- 方式3：json形式，經常使用！！！ -->
        <!-- <p :class="{aa:true,cc:flag}">南京網博</p> -->
        <!-- <p :class="{aa:num>0}">南京網博</p> -->

        <!-- 方式4：變量引用json形式 -->
        <!-- <p :class="hello">南京網博</p> -->
        
        <!-- 
            style屬性
         -->
         <p :style="[xx,yy]">itany</p>

    </div>
</body>
</html>

5、模板

1. 簡介

Vue.js使用基於HTML的模板語法，能夠將DOM綁定到Vue實例中的數據
模板就是{{}}，用來進行數據綁定，顯示在頁面中
也稱爲Mustache語法

2. 數據綁定的方式

a.雙向綁定
    v-model
b.單向綁定    
    方式1：使用兩對大括號{{}}，可能會出現閃爍的問題，能夠使用v-cloak解決
    /* 必須配置css樣式，不然不生效 */
    [v-cloak]{ //屬性選擇器
        display:none;
    }
    <h3>aaa<span v-cloak>{{msg}}</span></h3>
    
    方式2：使用v-text（等價 {{}}，但不會出現閃爍問題 ）、v-html

3. 其餘指令

v-once 數據只綁定一次
v-pre 不編譯，直接原樣顯示

6、過濾器

1. 簡介

用來過濾模型數據，在顯示以前進行數據處理和篩選
語法：{{ data | filter1(參數) | filter2(參數)}}

2. 關於內置過濾器

vue1.0中內置許多過濾器，如：
    currency、uppercase、lowercase
    limitBy
    orderBy
    filterBy
vue2.0中已經刪除了全部內置過濾器，所有被廢除
如何解決：
    a.使用第三方工具庫，如lodash、date-fns日期格式化、accounting.js貨幣格式化等
    b.使用自定義過濾器

3. 自定義過濾器

分類：全局過濾器、局部過濾器

3.l 自定義全局過濾器

使用全局方法Vue.filter(過濾器ID,過濾器函數)

3.2 自定義局部過濾器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定義過濾器</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        /**
         * 自定義全局過濾器
         */
        Vue.filter('addZero',function(data){
            // console.log(data);
            return data<10?'0'+data:data;
        });
        /*Vue.filter('number',(data,n) => {
            // console.log(data,n);
            return data.toFixed(n);
        });*/
        Vue.filter('date',data => {
            let d=new Date(data);
            return d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate()+' '+d.getHours()+':'+d.getMinutes()+':'+d.getSeconds();
        });
        

        window.onload=function(){
            let vm=new Vue({
                el:'#itany',
                data:{
                    currentTime:Date.now()
                },
                filters:{ //局部過濾器
                    number:(data,n) => {
                        return data.toFixed(n);
                    }
                }
            });
        }
    </script>
</head>
<body>
    <div id="itany">
        <!-- <h3>{{3 | addZero}}</h3> -->
        
        <!-- 課後做業：本身實現toFiexed()四捨五入的功能 ，toFixed 不穩定-->
        <h3>{{12.345678 | number(2)}}</h3>
        <!-- <h3>{{12.045 | number(2)}}</h3> -->

        <h3>{{currentTime | date}}</h3>
    
    </div>
</body>
</html>