03: vuejs 事件、模板、過濾器

時間 2020-05-22

標籤 vuejs 事件模板過濾器简体版

原文原文鏈接

目錄：Vue其餘篇

01: vue.js安裝javascript

02: vue.js經常使用指令css

03: vuejs 事件、模板、過濾器html

1.2 模板返回頂部

　　一、簡介

　　　　　　Vue.js使用基於HTML的模板語法，能夠將DOM綁定到Vue實例中的數據

　　　　　　模板就是{{}}，用來進行數據綁定，顯示在頁面中，也稱爲Mustache語法

　　二、數據綁定的方式

　　　　　　a.雙向綁定

　　　　　　　　v-model

　　　　　　b.單向綁定

　　　　　　　　方式1：使用兩對大括號{{}}，可能會出現閃爍的問題，能夠使用v-cloak解決

　　　　　　　　方式2：使用v-text、v-html

　　三、其餘指令

　　　　　　v-once 數據只綁定一次

　　　　　　v-pre 不編譯，直接原樣顯示

　　　　　　官網指令： https://cn.vuejs.org/v2/api/#v-once

1.3 自定義過濾器返回頂部

　　一、說明

　　　　　　1. 在vue升級以後，vue不建議使用過濾器，而是用插值表達式，或者動態數據綁定替換

　　　　　　2. 使用過濾器的目的是爲了在組件間複用處理數據的業務邏輯

　　　　　　3. Vue類中存在一個靜態方法filter方法，用來定義過濾器

　　二、使用過濾器(過濾器定義必須在實例化vue對象前)

　　　　　　1. 語法 {{數據 | 過濾器名稱參數1 參數2 參數3 | 過濾器2 參數2}}

　　　　　　2. 能夠使用多個過濾器，前一個過濾器的輸出將做爲後一個過濾器的輸入

　　　　　　3. 2.0版本的改動 {{數據 | 過濾器(參數1, 參數2)}} （2.0版本對過濾器的傳參作了改動）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="app">
        <p> price: 數據   currency: 過濾器名稱    ￥和3：表示傳遞的參數 </p>
        <h1>{{price | currency('￥', 3)}}</h1>
    </div>
    <script type="text/javascript" src="vue.js"></script>
    <script type="text/javascript">
        /** * 自定義過濾器 * currency 過濾器名稱 * @price 價格 * @sign 價格標志 * @len 小數位保留的長度 **/ Vue.filter('currency', function(price, sign, len) { // 從第二個開始纔是傳遞的參數
 price = Math.abs(price); // 保證是正數
 sign = sign || '￥'; // 默認爲人命幣標誌
 len = len || 2; // 默認保留兩位小數
            var arr = String(parseInt(price)).split(''); // arr = ["1", "2", "3", "4", "5", "6", "7", "8", "9"]
            for (var i = arr.length - 3; i > 0; i -= 3) { // 添加了成員後面的位置變了，因此從後向前遍歷，首位不能添加
 arr.splice(i, 0, ',') // i(插入的索引位置)；0（刪除0個字符串）； ','(添加的符合)
 } // for循環後 arr = [1, 2, ',', 3, 4, 5, ',', 6, 7, 8]
            return sign + arr.join('') + (price - parseInt(price)).toFixed(len).slice(1) // 轉化成小數 原數字減去整數 保留len位小數，去掉整數部分
            // toFixed(len) 保留len位小數（獲得結果是字符串）
            // 0.23456.toFixed(3) = "0.235" "'0.235'.slice(1) = ".235"
 }); new Vue({ el: '#app', data: { price: 1234567891.1234567, msg: 'a hot day' } }) </script>
</body>
</html>

自定義過濾器

　　　　　　1. 在元素切換狀態的時候（例如：元素的顯隱），咱們能夠爲元素添加動畫
　　　　　　2. Transition屬性：Vue會根據屬性值自動建立三個css類，例如 transition=「demo」
　　　　　　　　　　demo-transition：定義過渡的
　　　　　　　　　　demo-enter 進入樣式
　　　　　　　　　　demo-leave 移出樣式
　　　　　　3. 注意：2.0類的名稱變了
　　　　　　　　　　.demo-transition => .demo-enter-active, .demo-leave-active
　　　　　　　　　　.demo-enter => .demo-enter
　　　　　　　　　　.demo-leave => .demo-leave-to
　　　　　　　　　　Transition屬性變成了 transition組件了，經過name定義過渡名稱

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css"> .demo { width: 100px; height: 100px; margin-top: 20px; background: green;
        }
        /*定義過渡*/ .demo-enter-active, .demo-leave-active { transition: all 1s;
        }
        /*定義進場動畫和出場動畫*/ .demo-enter, .demo-leave-to { width: 0; height: 0; opacity: 0;
        }
    </style>
</head>
<body>
    <div id="app">
        <button v-on:click="toggle">切換顯隱</button>
        <transition name="demo">
            <div class="demo" transition="demo" v-if="isShow">這是內容</div>
        </transition>
    </div>
    <script type="text/javascript" src="vue.js"></script>
    <script type="text/javascript">
        // 定義vue實例化對象
        var app = new Vue({ el: '#app', data: { isShow: true }, methods: { toggle: function() { // 切換isShow
                    this.isShow = !this.isShow; } } }) </script>
</body>
</html>

過分

1.5 支付寶註冊返回頂部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css"> * { margin: 0; padding: 0; list-style: none;
        } body { background: #ccc;
        } #app { width: 800px; margin: 50px auto; border: 1px solid #ccc; background: #fff; height: 600px; padding-top: 80px;
        } label { margin-left: 100px; margin-right: 20px;
        } input { padding: 8px 15px; width: 300px;
        } ul { width: 330px; margin-left: 176px; border: 2px solid #ccc; margin-top: -1px;
        } ul li { padding: 0 15px; height: 26px; line-height: 26px;
        } ul li:hover, ul li.hover { background: #efefef;
        }
    </style>
</head>
<body>
    <div id="app">
        <label>帳戶名</label>
        <input type="text" v-model="msg" @keydown.up="showPrevLi" @keyup.down="showNextLi" @keyup.enter="chooseLi"
        >
        <!-- ul的顯示與msg有關 -->
        <ul v-show="msg">
            <li v-for="item in dealMail" v-on:click="chooseCurrentLi">{{dealMsg}}@{{item}}.<template v-if="item == 189">cn</template><template v-else>com</template></li>
        </ul>
    </div>
    <script type="text/javascript" src="vue.js"></script>
    <script type="text/javascript">
        // 建立vue實例化對象
        var app = new Vue({ el: '#app', data: { // 定義綁定的數據
 msg: '', num: -1, isFirst: true, // 是不是第一次
 email: ['qq', 163, 126, 189, 'sina', 'hotmail', 'gmail', 'sohu', '21cn'] }, // 動態數據綁定
 computed: { dealMsg: function(vue) { // 處理msg, 截取@符號以前的
                    if (this.msg.indexOf('@') >= 0){ // 是否存在@
                        // 截取@符號以前的，不包括@, slice, substring, substr, 哪一個參數表示長度，出現負數，第一個參數大於第二個參數怎麼辦，李鵬濤
                        return this.msg.slice(0, this.msg.indexOf('@')) } return this.msg // 不然返回msg
 }, // 過濾mail集合
 dealMail: function() { if (this.msg.indexOf('@') > 0) { // 判斷是否包含@, 包含@，根據@符號後面的內容過濾
                        var str = this.msg.slice(this.msg.indexOf('@') + 1); // 截取@後面的內容
                        var result = []; // 過濾email集合
                        for (var i = 0; i < this.email.length; i++) { // 遍歷email找到符號條件的
                            var mail = this.email[i] + (this.email[i] == 189 ? '.c' : '.co'); // 每個成員要帶上後綴，例如sina => sina.co
                            if (mail.indexOf(str) === 0) { // 什麼成員符合條件：以str開頭,
 result.push(this.email[i]) // 存儲這個成員
 } } return result; // 返回過濾的結果
 }else { return this.email // 不包含，直接返回email
 } } }, // 定義事件回調函數
 methods: { chooseCurrentLi: function(e) { // 點擊li，而後選中li
                    var val = e.target.innerHTML; // 獲取li的內容
                    this.msg = val; // 更新msg
 }, // 點擊向上鍵，顯示前一個li
 showPrevLi: function(e) { e.preventDefault(e); // 阻止默認行爲
                    if (this.isFirst) { // 若是是第一次，不用減了
                        this.isFirst = false; // 此次過去了，就不是第一次了
 } else { this.num--; } this.changeCurrentLiStyle(); // 更新li的樣式
 }, // 點擊向下鍵，顯示後一個li
 showNextLi: function() { this.num++; // 更改num
                    this.changeCurrentLiStyle(); // 更新li的樣式
                    this.isFirst = false; // 第一次已通過去了
 }, getNum: function(len) { // 獲取num對應的li的索引值
                    // 對於任意一個數（正數和負數）
                    // 對len取餘以後，保證在-len到len之間
                    // var num = this.num % len;
                    // // 此時加上len，保證是0到2*len之間，必定是正數了
                    // num += len;
                    // // 此時再取餘，就保證是0到len之間了
                    // num %= len
                    return (this.num % len + len) % len; }, // 改變當前li的樣式
 changeCurrentLiStyle: function() { var lis = this.$el.getElementsByTagName('li'); // 獲取全部的li
                    if (lis.length === 0) { // 判斷li是否存在
                        return; } var num = this.getNum(lis.length); // 獲取索引值
                    for (var i = 0; i < lis.length; i++) { // 排他法設置類
 lis[i].className = ''; } lis[num].className = 'hover'; // 當前li選中
 }, // 點擊enter鍵，顯示當前li
 chooseLi: function() { var lis = this.$el.getElementsByTagName('li'); // 獲取對應的li
                    if (lis.length === 0) { // 判斷li是否存在
                        return; } var num = this.getNum(lis.length); // 獲取索引值
                    var value = lis[num].innerHTML; // 獲取li的值
                    this.msg = value; } } }) </script>
</body>
</html>