Vue入門（一）之作用域、v-on事件監聽、條件判斷、書籍購物車

原創 Dream_ya 2020-04-30 16:20

一、塊級作用域（let和var）

1、塊級作用域問題（ES5）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>按鈕1</button>
<button>按鈕2</button>
<button>按鈕3</button>
<button>按鈕4</button>
<script>
    var btns = document.getElementsByTagName('button');
    for (var i=0;i<btns.length; i++) {
        // 閉包可以解決，但是太麻煩，函數一個作用域
        btns[i].addEventListener('click', function () {
            console.log('第'+ i + '個按鈕被點擊')
        })
    }
</script>
</body>
</html>

2、作用域解決（ES6）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>按鈕1</button>
<button>按鈕2</button>
<button>按鈕3</button>
<button>按鈕4</button>
<script>
//    var btns = document.getElementsByTagName('button');
//    for (var i=0;i<btns.length; i++) {
          // 閉包可以解決，但是太麻煩，函數一個作用域
//        btns[i].addEventListener('click', function () {
//            console.log('第'+ i + '個按鈕被點擊')
//        })
//    }
    const btns = document.getElementsByTagName('button');
    for (let i = 0; i < btns.length; i++){
        btns[i].addEventListener('click', function () {
            console.log('第'+ i + '個按鈕被點擊')
        })
    }
</script>
</body>
</html>

3、const使用

使用const修飾的標識符爲常量，不可以再次賦值，只有需要改變標識符的時候才使用let

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
//    1、不可以修改
//    const name = 'yyy';
//    name = 'abc'
//
//    2、const定義標識符，必須賦值
//    const name;

//    3、 常量的含義是指向的對象不能修改，但是可以改變對象內部的屬性
    const obj = {
        name: 'yyy',
        age: 18,
        height: 180
    };
    obj.name = 'kobe';
    obj.age = 30;
    obj.height = 1.70;
    console.log(obj);
</script>
</body>
</html>

在這裏插入圖片描述

4、對象字面量的增強寫法

<1> 屬性增強寫法
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
//    const obj = {
//        name: 'yyy',
//        age: 18,
//        run: function () {
//            console.log('run')
//        }
//    }
    // 屬性的增強寫法
    const name  = 'yyy';
    const age = 18;
    const height = 1.88;

    // ES5寫法
//    const obj = {
//        name: name,
//        age: age,
//        height: height
//    }
    
    // ES6寫法
    const obj = {
        name,
        age,
        height
    };

    console.log(obj);
</script>
</body>
</html>
<2> 函數增強寫法
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
//    const obj = {
//        name: 'yyy',
//        age: 18,
//        run: function () {
//            console.log('run')
//        }
//    }

    // 函數的增強寫法
    //ES5寫法
//    const obj = {
//        run: function () {
//            
//        },
//        eat: function () {
//            
//        }
//    }
    
    // ES6寫法
    const obj = {
        run() {
            
        },
        eat() {
            
        }
    }
</script>
</body>
</html>

二、v-on事件監聽

1、v-on的基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h1>{{counter}}</h1>
    <!--<button v-on:click="counter++">+</button>-->
    <!--<button v-on:click="counter--">-</button>-->
    <button v-on:click="increment">+</button>
    <!--語法糖寫法-->
    <button @click="decrement">-</button>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            counter: 0
        },
        methods: {
            increment() {
                this.counter++
            },
            decrement() {
                this.counter--
            }
        }
    })
</script>
</body>
</html>

在這裏插入圖片描述

2、v-on參數問題

如果該方法不需要額外參數，那麼方法後的()可以不添加
如果需要同時傳入某個參數，同時需要event時，可以通過$event傳入事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--事件調用的方法沒有參數-->
    <button @click="btn1Click">按鈕1</button>
    <button @click="btn1Click()">按鈕1</button>

    <!--在事件定義時，寫方法時省略了小括號，但是本身是需要一個參數，這個時候，
    Vue會默認將瀏覽器生成的event事件對象作爲參數傳入到方法中-->
    <button @click="btn2Click('btn2Click')">按鈕2</button>
    <button @click="btn2Click()">按鈕2</button>
    <!--這樣會傳入event事件-->
    <button @click="btn2Click">按鈕2</button>

    <!--同時需要event對象，又需要參數, 需要手動獲取event對象：$event-->
    <button @click="btn3Click">按鈕3</button>
    <button @click="btn3Click('abc', $event)">按鈕3</button>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: 'hello,Vue'
        },
        methods: {
            btn1Click() {
                console.log('btn1Click');
            },
            btn2Click(event) {
                console.log('----------',event);
            },
            btn3Click(abc, event) {
                console.log('@@@@@@@@@@',abc, event)
            }
        }
    })
</script>
</body>
</html>

3、v-on的修飾符

（1）.stop

阻止事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
<div>
    <div @click="divClick">
        aaa
        <button @click.stop="btnClick">按鈕</button>
    </div>
</div>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: 'hello,Vue'
        },
        methods: {
            btnClick() {
                console.log("btnClick");
            },
            divClick() {
                console.log('divClick')
            }
        }
    })
</script>
</body>
</html>

在這裏插入圖片描述

（2）.prevent

阻止默認行爲

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
<div>
    <form action="baidu">
        <input type="submit" value="提交" @click.prevent="submitClick">
    </form>
</div>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: 'hello,Vue'
        },
        methods: {
            submitClick() {
                console.log('submitClick');
            }
        }
    })
</script>
</body>
</html>
（3）.鍵別名

這裏用enter鍵做演示，不加.enter時，只要鬆開按鍵，都會打印console.log，加入.enter後只有鬆開enter鍵纔會

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
<div>
    <!--監聽某個鍵盤鍵點擊-->
    <input type="text" @keyup.enter="keyUp">
</div>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: 'hello,Vue'
        },
        methods: {
            keyUp() {
                console.log('keyup');
            }
        }
    })
</script>
</body>
</html>
（4）.once

只能調用一次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
<div>
    <!--.once-->
    <button @click.once="btn2Click">按鈕2</button>
</div>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: 'hello,Vue'
        },
        methods: {
            btn2Click() {
                console.log('btn2Click');
            }
        }
    })
</script>
</body>
</html>

三、條件判斷

1、v-if使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h1 v-if="false">{{message}}</h1>
    <h1 v-if="true">{{message}}</h1>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: 'hello,Vue'
        }
    })
</script>
</body>
</html>

2、v-if和v-else使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h1 v-if="isShow">
        {{message}}
    </h1>
    <h1 v-else>isShow爲false</h1>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: 'hello,Vue',
            isShow: true
        }
    })
</script>
</body>
</html>

3、v-if和v-else-if和v-else使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h1 v-if="score>=90">優秀</h1>
    <h1 v-else-if="score>=80">良好</h1>
    <h1 v-else-if="score>=60">及格</h1>
    <h1 v-else>不及格</h1>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            score: 98
        }
    })
</script>
</body>
</html>

4、用戶登錄切換案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <span v-if="isUser">
        <label for="username">用戶賬號</label>
        <input type="text" id="username" placeholder="用戶賬號">
    </span>
    <span v-else>
        <label for="email">用戶郵箱</label>
        <input type="text" id="email" placeholder="用戶郵箱">
    </span>
    <button @click="isUser = !isUser">切換類型</button>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            isUser: true
        }
    })
</script>
</body>
</html>

在這裏插入圖片描述
如果不想input進行復用，就添加不用的key
在這裏插入圖片描述

5、v-show使用

頻率高的切換就使用v-show，否則v-if

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--v-if: 當條件爲flalse時，包含v-if指令的元素，不會存在dom中-->
    <!--v-show: 當條件爲false時，v-show只是給我們元素添加了一個行內樣式 ==> display: none-->
    <h1 v-if="isShow" id="a">{{message}}</h1>
    <h1 v-show="isShow" id="b">{{message}}</h1>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: 'hello,Vue',
            isShow: true
        }
    })
</script>
</body>
</html>

四、循環遍歷

1、v-for遍歷數組

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--沒有使用索引值-->
    <ul>
        <li v-for="item in names">{{item}}</li>
    </ul>
    <!--獲取索引值-->
    <ul>
        <li v-for="(item,index) in names">{{index+1}}.{{item}}</li>
    </ul>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            names: ['kobe', 'james']
        }
    })
</script>
</body>
</html>

在這裏插入圖片描述

2、v-for遍歷對象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--獲取一個值，那麼獲取的是value-->
    <ul>
        <li v-for="item in info">{{item}}</li>
    </ul>
    <!--獲取key和value ==> (value,key)-->
    <ul>
        <li v-for="(value,key) in info">{{value}}-{{key}}</li>
    </ul>
    <!--獲取key、value、index ==> (value, key, index)-->
    <ul>
        <li v-for="(value, key, index) in info">{{value}}-{{key}}-{{index}}</li>
    </ul>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            info: {
                name: 'yyy',
                age: 18,
                height: 1.88
            }
        }
    })
</script>
</body>
</html>

在這裏插入圖片描述

3、v-for使用過程添加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--加入key保證唯一性，這樣插入值時，效率更高，不會逐個修改-->
    <ul>
        <li v-for="item in letters" :key="item">{{item}}</li>
    </ul>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            letters: ['A', 'B', 'C', 'D','E']
        }
    })
</script>
</body>
</html>

4、那些數組的方法是響應式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="item in letters" :key="item">{{item}}</li>
    </ul>
    <button @click="btnClick">按鈕</button>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            letters: ['A', 'B', 'C', 'E']
        },
        methods: {
            btnClick() {
//                1、push方法
//                this.letters.push('abc')
//                this.letters.push('abc','def')
//                2、pop方法: 刪除數組最後一個元素
//                this.letters.pop()
//                3、shift方法: 刪除數組中第一個元素
//                this.letters.shift()
//                4、unshift方法: 在數組最前面添加元素
//                this.letters.unshift('abc')
//                this.letters.unshift('abc','def')
//                5、splice作用:
//                刪除元素：第二個參數傳入刪除幾個元素（如果沒有，就刪除到最後）
//                this.letters.splice(2)    //第二個元素刪除到最後（不包括第二個元素）
//                this.letters.splice(1,2)   //從第一個元素開始刪除2個元素
//                替換元素：第二個參數傳入我們要替換幾個元素，後面是用於替換前面的元素
//                this.letters.splice(1,3,'x','y','z','l')
//                插入元素：第一個參數表示那個位置插入，第二個參數必須爲0，後面跟要插入的元素
//                this.letters.splice(1, 0,'x','y','z','l')
//                6、sort排序
//                this.letters.sort()
//                7、reverse反轉
//                this.letters.reverse()
//                8、通過vue set
                Vue.set(this.letters,0,'bbbb')
            }
        }
    })
</script>
</body>
</html>

五、書籍購物車案例

1、目錄結構

在這裏插入圖片描述

2、index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div id="app">
    <div v-if="books.length">
    <table>
        <thead>
            <th></th>
            <th>書籍名稱</th>
            <th>出版日期</th>
            <th>價格</th>
            <th>購買數量</th>
            <th>操作</th>
        </thead>
        <tbody>
            <tr v-for="(item,index) in books">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.date}}</td>
                <!--<td>{{getFinalPrice(item.price)}}</td>-->
                <td>{{item.price | showPrice}}</td>
                <td>
                    <button @click="decrement(index)" v-bind:disabled="item.count <= 1">-</button>
                    {{item.count}}
                    <button @click="increment(index)">+</button>
                </td>
                <td>
                    <button @click="removeHandle(index)">移除</button>
                </td>
            </tr>
        </tbody>
    </table>
    <h2>總價格：{{totalPrice | showPrice}}</h2>
    </div>
    <h2 v-else> 購物車爲空</h2>
</div>
<script src="../js/vue.js"></script>
<script src="main.js"></script>
</body>
</html>

3、main.js

const app = new Vue({
    el: '#app',
    data: {
        books: [
            {
                id: 1,
                name: '<<UNIX編程藝術>>',
                date: '2006-2',
                price: 59.00,
                count: 1
            },
            {
                id: 2,
                name: '<<編程珠璣>>',
                date: '2008-10',
                price: 39.00,
                count: 1
            }
        ]
    },
    methods: {
        // getFinalPrice(price) {
        //     return '￥' + price.toFixed(2)
        // }
        increment(index) {
            this.books[index].count++
        },
        decrement(index) {
            this.books[index].count--
        },
        removeHandle(index) {
            this.books.splice(index,1)
        }
    },
    computed: {
        totalPrice() {
            let totalPrice = 0;
            for (let i =0; i< this.books.length; i++){
                totalPrice += this.books[i].price * this.books[i].count
            }
            return totalPrice
        }
    },
    // 過濾器
    filters: {
        showPrice(price) {
            return '￥' + price.toFixed(2)
        }
    }
})

4、style.css

table {
    border: 1px solid #e9e9e9;
    border-collapse: collapse;
    border-spacing: 0;
}

th, td {
    padding: 8px 16px;
    border: 1px solid #e9e9e9;
    text-align: left;
}

th {
    background: #f7f7f7;
    color: #5c6b77;
    font-weight: 600;
}

5、結果

在這裏插入圖片描述

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

Vue加載OpenLayer入門教程（超簡單）

Vue加載OpenLayer很簡單，很簡單，很簡單第一步：創建vue項目第二步 加載openlayer 很簡單，很簡單，很簡單 學會了vue，開始測試mapbox的搭配，學會了mapbox，有整了一下openlayer的導入，剛開

来日可期啊 2020-07-08 12:37:34

Element-ui

Element-ui一、什麼是Element-ui 一、什麼是Element-ui element 是基於 vue 實現的一套不依賴業務的 UI 組件庫，提供了豐富的PC端組件，減少用戶對常用組件的封裝，降低了開發的難易程度

狂风 2020-07-08 11:49:25

vue引入echarts的自定義主題

1、首先從官網上配置屬於自己的主題，然後點擊導出配置，即可導出對應的json文件 2、通過後臺數據庫，自動選擇對應主題文件 3、然後再需要使用的地方使用即可

Agwenbi 2020-07-08 11:38:51

ElementUI的Drawer加上滾動條

第一種： 出處：https://www.cnblogs.com/jaycethanks/p/12507203.html <style lang="scss"> /*1.顯示滾動條：當內容超出容器的時候，可以拖動：*/ .el-drawe

肖潇不吃丸子 2020-07-08 11:18:09

Vue中出現“‘xxxxx‘ is defined but never used”解決辦法

 【解決辦法】： 在package.json或者.eslintrc.js中找到  eslintConfig  塊，在其rules下加入"no-unused-vars": "off"即可，如下圖   然後重新npm run serve即

肖潇不吃丸子 2020-07-08 11:18:09

使用npm上傳包教程

1、首先擁有自己的上傳文件，例如 class lc{ constructor(){ this.arr = []; } map(){ this.arr.map((item)=>{

Agwenbi 2020-07-08 11:00:30

vue在history的路由模式下，刷新後界面報404

需要配置下nginx，位置在/conf/vhosts/*.conf，將當前目錄下的所有conf都修改一下最好 server { listen 80; server_name agwenb

Agwenbi 2020-07-08 11:00:30

vue使用element-resize-detector監聽元素寬度變化

如圖，當我們切換左側菜單展示效果的時候，右側內容會對應變寬，但此時的echarts並不能執行自適應效果，這是因爲切換菜單展示效果並沒有觸發window.onresize，所以爲解決類似此問題，我們可使用element-resize-det

Agwenbi 2020-07-08 11:00:30

vuex進行分包管理

1、創建對應的目錄結構 2、index.js文件的內容 import Vue from 'vue' import Vuex from 'vuex' import moduleIndex from "./module/module-in

Agwenbi 2020-07-08 11:00:30

vue項目，使用前端微服務

1、先看最終的實現效果，主項目上的導航欄中的子項目菜單下的所有導航界面，均屬於副項目的界面 2、首先我們先新建兩個vue項目，例如一個是parent，另一個是child 3、主項目輸入命令 vue add vue-cli-plugin

Agwenbi 2020-07-08 11:00:30

富文本/整段文本中右側無法對齊的問題之text-align: justify(css)

今天的重點是：text-align: justify（實現兩端對齊） 對於整個段落，用的最多的要數富文本（作用於商品詳情頁），但用正常的形式排下去，右邊的效果就像小狗啃了一般，參差不齊。所以應該如何修飾呢？ 要使文本兩端沿着它的外邊線對齊

Syleapn 2020-07-08 07:14:58

uni-app中組件間方法調用

在此總結下，供參考！ 一、先上結果圖，如下：     二、項目說明 紅色圈起來的爲子組件，綠色圈起來的爲父組件。 uni-app項目，所以具體組件引入流程不在詳細說明，直接列出代碼。   三、代碼 1、子組件child.vue <t

Syleapn 2020-07-08 07:14:58

Spring Boot + Vue實現樹形結構

一、前言 開發過程中，涉及到多級菜單的應用，樹形結構比較常見，今天就做了一個Spring Boot + Vue + Element-UI 實現樹形結構的一個小demo。 Tree組件最適合的結構是無序列列表ul，創建一個遞歸組件Item表

素小暖 2020-07-08 06:49:16

Vue入門（12）webpack上

1.安裝 npm i [email protected] -D 2.編譯打包生成build.js 看下目錄結構 首先新建一個main.js. main.js是整個程序的入口文件。 main.js中 import Vue from "

徐扬_前端小白的成长之路 2020-07-08 06:33:45

element-ui+vue彈出多個message的問題處理

如果出現網絡問題，刷新頁面，或者有多個接口請求就會出現報錯，那麼提示就會連續彈出幾個： 解決方案：重寫Message。彈出前判斷是否有相同彈出框，若有則關閉它再彈出新的 resetMessage.js： import {Mess

zeke_x 2020-07-08 06:07:33