• Vue 基础之二


    一:条件渲染

    指令释义
    v-if 相当于: if
    v-else 相当于:else
    v-else-if 相当于:else if
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>ifelse ifelse</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    </head>
    <body>
    <div id="box">
        <h3>案例:ifelse ifelse</h3>
        <h2 v-if="type==='1'">A</h2>
        <h2 v-else-if="type==='2'">B</h2>
        <h2 v-else>C</h2>
    </div>
    </body>
    <script>
        let vm = new Vue({
            el: '#box',
            data: {
                type: '1',
            }
        })
    </script>
    </html>

     

    二:列表渲染

     

     v-if+v-for+v-else控制购物车商品的显示

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>v-if + v-for + v-else控制购物车商品的显示</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
        <style>
            table, td {
                border: 1px solid black;
                text-align: center;
            }
        </style>
    </head>
    <body>
    <div id="box">
        <h2>我的购物车</h2>
        <button @click="show">刷新购物车</button>
        <br><br>
        <table v-if="!shopping_car.length==0">
            <tr>
                <td>商品名称</td>
                <td>价格</td>
            </tr>
            <tr v-for="item in shopping_car">
                <td>{{item.name}}</td>
                <td>{{item.price}}</td>
            </tr>
        </table>
        <table v-else>
            <tr>
                <td>商品名称</td>
                <td>价格</td>
            </tr>
            <tr>
                <td>暂无信息</td>
                <td>暂无信息</td>
            </tr>
        </table>
    </div>
    </body>
    <script>
        let vm = new Vue({
            el: '#box',
            data: {
                isActive: false,
                shopping_car: []
            },
            methods: {
                show() {
                    this.shopping_car = [
                        {name: 'Threadripper 3990X', price: '29999元'},
                        {name: 'NVIDIA RTX 8000', price: '59999元'},
                        {name: 'ROG ZENITH II EXTREME', price: '9999元'},
                    ]
                }
            }
        })
    </script>
    </html>

     

     v-for遍历数组(列表)、对象(字典)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>v-for遍历数组(列表)、对象(字典)</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
        <style>
            table, td {
                border: 1px solid black;
                text-align: center;
            }
        </style>
    </head>
    <body>
    
    <div id="box">
        <h2>数组(列表)for循环遍历</h2>
        <ul>
            <li v-for="(value,index) in list_test">{{index}} —— {{value}}</li>
        </ul>
    
        <h2>对象(字典)for循环遍历</h2>
        <ul>
            <li v-for="(value,key) in dic_test">{{key}} —— {{value}}</li>
        </ul>
    
        <h2>数组(列表)套对象(字典)for循环遍历</h2>
        <table>
            <tr>
                <td>姓名</td>
                <td>年龄</td>
                <td>性别</td>
                <td>国籍</td>
            </tr>
            <tr v-for="info in summary_test">
                <td>{{info.name}}</td>
                <td>{{info.age}}</td>
                <td>{{info.gender}}</td>
                <td>{{info.country}}</td>
            </tr>
        </table>
    </div>
    </body>
    <script>
        let vm = new Vue({
            el: '#box',
            data: {
                list_test: ['First', 'second', 'Third', 'Forth', 'Fifth'],
                dic_test:{name: 'Darker', age: 18, gender: 'male'},
                summary_test: [
                        {name: 'Alan', age: 23, gender: 'male', country: 'America'},
                        {name: 'Ben', age: 15, gender: 'male', country: 'Australia'},
                        {name: 'Cindy', age: 12, gender: 'female', country: 'Japan'},
                        {name: 'Darker', age: 18, gender: 'male', country: 'China'},
                        {name: 'Elisa', age: 26, gender: 'female', country: 'Mexico'},
                    ]
            }
        })
    </script>
    </html>

    注意!在Vue中:

    • 数组的indexvalue是反的
    • 对象的keyvalue也是反的

     

    ③ key值 的解释

    vue中使用的是虚拟DOM,会和原生的DOM进行比较,然后进行数据的更新,提高数据的刷新速度(虚拟DOM用了diff算法)

    • v-for循环数组、对象时,建议在控件/组件/标签写1个key属性,属性值唯一
    • 页面更新之后,会加速DOM的替换(渲染)
    • :key="变量"
     

    ④ 数组更新与检测

    可以检测到变动的数组操作:
    • push:最后位置添加
    • pop:最后位置删除
    • shift:第一个位置删除
    • unshift:第一个位置添加
    • splice:切片
    • sort:排序
    • reverse:反转
    检测不到变动的数组操作:
    • filter():过滤
    • concat():追加另一个数组
    • slice():
    • map():
    原因:

    作者重写了相关方法(只重写了一部分方法,但是还有另一部分没有重写)

    解决方法:
    // 方法1:通过 索引值 更新数组(数据会更新,但是页面不会发生改变)
    vm.arrayList[0]
    "Alan"
    vm.arrayList[0]='Darker'
    "Darker"
    
    // 方法2:通过 Vue.set 更新数组(数据会更新,页面也会发生改变)
    Vue.set(vm.arrayList, 0, 'Darker')

    三:事件处理

    事件释义
    input 当输入框进行输入的时候 触发的事件
    change 当元素的值发生改变时 触发的事件
    blur 当输入框失去焦点的时候 触发的事件

    change 和 blur 最本质的区别:

    • 如果输入框为空,失去焦点后,change不会触发,但是blur会触发
     

    1.过滤案例

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>过滤案例</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    </head>
    <body>
    <div id="box">
        <p><input type="text" v-model="myText" @input="handleInput" placeholder="请输入要筛选的内容:"></p>
    <!-- <p><input type="text" v-model="myText" @change="handleInput" placeholder="请输入要筛选的内容:"></p> -->
    <!-- <p><input type="text" v-model="myText" @blur="handleInput" placeholder="请输入要筛选的内容:"></p> -->
        <ul>
            <li v-for="data in newList">{{data}}</li>
        </ul>
    </div>
    </body>
    <script>
        var vm = new Vue({
            el: '#box',
            data: {
                myText: '',
                dataList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf'],
                newList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf'],
            },
            methods: {
                handleInput() {
                    this.newList = this.dataList.filter(item => {
                        // item.indexOf(this.myText):输入框中输入的字符串在筛选元素中的索引
                        return item.indexOf(this.myText) > -1   // 返回索引大于1的元素:>-1 就表示包含在其中
                    })
                },
            },
        })
    </script>
    </html>

     

    2.事件修饰符

    事件修饰符释义
    .stop 只处理自己的事件,父控件冒泡的事件不处理(阻止事件冒泡)
    .self 只处理自己的事件,子控件冒泡的事件不处理
    .prevent 阻止a链接的跳转
    .once 事件只会触发一次(适用于抽奖页面)

    使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生

    •  v-on:click.prevent.self 会阻止所有的点击
    •  v-on:click.self.prevent 只会阻止对元素自身的点击
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>事件修饰符</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    </head>
    <body>
    <div id="box">
    <!--    <ul @click="handleUl">-->
        <ul @click.self="handleUl">
    <!--        <li v-for="data in dataList" @click="handleLi">{{data}}</li>-->
            <li v-for="data in dataList" @click.stop="handleLi">{{data}}</li>
            <li><a href="http://www.baidu.com">不拦截</a></li>
            <li><a href="http://www.baidu.com" @click="handleLink($event)">点击拦截</a></li>
            <li><a href="https://www.baidu.com" @click.prevent="handleLink">点击拦截</a></li>
            <li><button @click.once="test">只执行一次</button></li>
        </ul>
    </div>
    </body>
    <script>
        var vm = new Vue({
            el: '#box',
            data: {
                dataList: ['1','22','333','4444']
            },
            methods: {
                handleUl(ev){
                    console.log('ul被点击了')
                },
                handleLi(){
                    console.log('li被点击了')
                    ev.stopPropagation()    // 点击事件停止 冒泡(向父组件传递时间)
                },
                handleLink(ev){
                    ev.preventDefault()
                },
                test(){
                    alert('只触发1次')
                }
            }
        })
    </script>
    </html>

    事件冒泡

    事件冒泡

    阻止事件冒泡

    阻止事件冒泡

    阻止链接跳转+只执行1次

    阻止链接跳转+只执行1次

     

    3.按键修饰符

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>按键修饰符</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    </head>
    <body>
    <div id="box">
        <!--    <input type="text" v-model="myInput" @keyup="handleKey">-->
        <!--    <input type="text" v-model="myInput" @keyup.13="handleKey">-->
        <input type="text" @keyup="handleKey1">
        <input type="text" @keyup.enter="handleKey2">
    </div>
    </body>
    <script>
        var vm = new Vue({
            el: '#box',
            data: {
                dataList: ['1', '22', '333', '4444']
            },
            methods: {
                handleKey1(ev) {
                    console.log('按下了' + ev)
                    // if (ev.keyCode==13){
                    //     console.log('回车键被按下了')
                    // }
                },
                handleKey2(ev) {
                    console.log('按下了回车键')
                }
            }
        })
    </script>
    </html>

     

    四:数据双向绑定

     

    v-model的使用

    实现标签与数据的双向绑定,会根据空间类型自动选取正确的方法来更新元素。

    v-model不仅可以给input赋值还可以获取input中的数据,而且数据的获取是实时的。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    </head>
    <body>
    <div id="box">
        <input type="text" v-model="myText" placeholder="请输入内容">
        您输入的内容是:{{myText}}
    </div>
    </body>
    <script>
        var vm = new Vue({
            el: '#box',
            data: {
                myText: '',
            },
        })
    </script>
    </html>




    placeholder定义和用法:
    placeholder 属性提供可描述输入字段预期值的提示信息
    该提示会在输入字段为空时显示,并且会在字段获得焦点时消失。

     

    五:表单控制

     

    1.checkbox选中

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>checkbox</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    </head>
    <body>
    <div id="box">
        <input type="text" placeholder="请输入用户名:"><br>
        <input type="password" placeholder="请输入密码:"><br>
        <input type="checkbox" v-model="radio">记住用户名
    </div>
    </body>
    <script>
        var vm = new Vue({
            el: '#box',
            data: {
                myText: '',
                textBig: '',
                radio: false,
            },
        })
    </script>
    </html>

     

    2.单选

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>单选</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    </head>
    <body>
    <div id="box">
        <input type="radio" v-model="radio" value=""><input type="radio" v-model="radio" value=""><input type="radio" v-model="radio" value="保密">保密
        <br><br>您选择的性别:{{radio}}
    </div>
    </body>
    <script>
        var vm = new Vue({
            el: '#box',
            data: {
                radio: '',
            },
    
        })
    </script>
    </html>

     

    3.多选

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>多选</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    </head>
    <body>
    <div id="box">
    
        <input type="checkbox" v-model="many" value="篮球">篮球
        <input type="checkbox" v-model="many" value="足球">足球
        <input type="checkbox" v-model="many" value="棒球">棒球
        <input type="checkbox" v-model="many" value="桌球">桌球
        <br><br>您喜欢的球类:{{many}}
    </div>
    </body>
    <script>
        var vm = new Vue({
            el: '#box',
            data: {
                many: [],
            },
        })
    </script>
    </html>

     

    4.购物车案例 - 结算,增加一次,减少一次,全选,全不选

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    </head>
    <body>
    <div id="box">
    <input type="checkbox" v-model="isAll" @change="handleCheck"> 全选/全不选

    <ul>
    <li v-for="item in datalist">
    <input type="checkbox" :value="item" v-model="checkgroup" @change="handleOne">

    {{item}}
    <button @click="add(item)">增加</button> <button @click="reduce(item)">减少</button>

    <!-- 数量:<input type="text" @change="mount" :value="">-->
    </li>

    </ul>
    <br>
    当前价格是:{{getPrice()}}
    <br>
    {{checkgroup}}
    </div>
    </body>

    <script>
    var vm = new Vue({
    el:'#box',
    data:{
    datalist: [
    {name: '特斯拉', price: 10, number: 1, id: '1'},
    {name: '苹果', price: 3, number: 4, id: '2'},
    {name: '香蕉', price: 80, number: 6, id: '3'}
    ],
    checkgroup:[],
    isAll:false,

    },
    methods:{
    getPrice(){
    var sum_price=0
    for(i in this.checkgroup){
    sum_price+=this.checkgroup[i]['number']*this.checkgroup[i]['price']
    }
    return sum_price
    },
    handleCheck(){
    if (this.checkgroup.length>0){
    this.checkgroup=[]
    }else {
    this.checkgroup=this.datalist
    }
    },
    handleOne(){
    // console.log('选中',this.checkgroup.length)
    // console.log('总数据',this.datalist.length)
    if (this.checkgroup.length==this.datalist.length){
    this.isAll=true
    }else {
    this.isAll=false
    }

    },
    add(item){
    console.log(11111,item)
    item.number+=1

    },
    reduce(item){
    if (item.number>0){
    item.number-=1

    }


    },


    }
    })


    </script>

    </html>

    4.购物车案例 - 结算

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>购物车结算</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
        <style>
            table, td {
                border: 1px solid black;
                text-align: center;
            }
        </style>
    </head>
    <body>
    <div id="box">
        <table>
            <tr>
                <td>商品名称</td>
                <td>价格</td>
                <td>数量</td>
                <td>选择</td>
            </tr>
            <tr v-for="item in dataList">
                <td>{{item.name}}</td>
                <td>{{item.price}}</td>
                <td>{{item.number}}</td>
                <td><input type="checkbox" :value="item" v-model="checkGroup"></td>
            </tr>
        </table>
        <br>已选商品:{{checkGroup}}
        <br>总价:{{getPrice()}}
    </div>
    </body>
    <script>
        var vm = new Vue({
            el: '#box',
            data: {
                dataList: [
                    {name: '今瓶没', price: 99, number: 2},
                    {name: '西柚记', price: 59, number: 1},
                    {name: '水壶转', price: 89, number: 5},
                ],
                checkGroup: [],
            },
            methods: {
                getPrice() {
                    let sum_price = 0
                    for (i in this.checkGroup) {    // 这里的 i 是索引
                        sum_price += this.checkGroup[i]['number'] * this.checkGroup[i]['price']
                    }
                    return sum_price
                }
            }
        })
    </script>
    </html>

     

    5.购物车案例 - 全选/全不选

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>全选/全不选</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
        <style>
            table, td {
                border: 1px solid black;
                text-align: center;
            }
        </style>
    </head>
    <body>
    <div id="box">
        <table>
            <tr>
                <td>商品名称</td>
                <td>价格</td>
                <td>数量</td>
                <td>全选/全不选<input type="checkbox" v-model="allChecked" @change="checkAll"></td>
            </tr>
            <tr v-for="item in dataList">
                <td>{{item.name}}</td>
                <td>{{item.price}}</td>
                <td>{{item.number}}</td>
                <td><input type="checkbox" :value="item" v-model="checkGroup" @change="checkOne"></td>
            </tr>
        </table>
        <br>已选商品:{{checkGroup}}
        <br>总价:{{getPrice()}}
    </div>
    </body>
    <script>
        var vm = new Vue({
            el: '#box',
            data: {
                dataList: [
                    {name: '今瓶没', price: 99, number: 2},
                    {name: '西柚记', price: 59, number: 1},
                    {name: '水壶转', price: 89, number: 5},
                ],
                checkGroup: [],
                allChecked: false,
            },
            methods: {
                getPrice() {
                    let sum_price = 0
                    for (i in this.checkGroup) {    // 这里的 i 是索引
                        sum_price += this.checkGroup[i]['number'] * this.checkGroup[i]['price']
                    }
                    return sum_price
                },
                checkAll() {
                    if (this.checkGroup.length > 0) {
                        this.checkGroup = []
                    } else {
                        this.checkGroup = this.dataList
                    }
                },
                checkOne() {
                    // if (this.checkGroup.length === this.dataList.length) {
                    //     this.allChecked = true
                    // } else {
                    //     this.allChecked = false
                    // }
                    this.allChecked = this.checkGroup.length === this.dataList.length;
                }
            }
        })
    </script>
    </html>

     

    6.购物车案例 - 数量加减

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>控制加减</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
        <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
    <div class="row">
        <div id="box" class="col-md-4 offset-md-1 text-center mt-5 ">
            <table class="table table-bordered">
                <thead>
                <tr>
                    <th scope="col">商品名称</th>
                    <th scope="col">单价</th>
                    <th scope="col">数量</th>
                    <th scope="col">全选/全不选 <input type="checkbox" v-model="allChecked" @change="checkAll"></th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="item in dataList">
                    <td>{{item.name}}</td>
                    <td>{{item.price}}</td>
                    <td>
                        <button class="btn link btn-sm" @click="reduceNum(item)">-</button>
                        {{item.number}}
                        <button class="btn link btn-sm" @click="item.number++">+</button>
                    </td>
                    <td><input type="checkbox" :value="item" v-model="checkGroup" @change="checkOne"></td>
                </tr>
                <tr class="text-left">
                    <td colspan="4">已选商品:{{checkGroup}}
                </tr>
                <tr class="text-left">
                    <td colspan="4">总价:{{getPrice()}}
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    </body>
    <script>
        var vm = new Vue({
            el: '#box',
            data: {
                dataList: [
                    {name: '今瓶没', price: 99, number: 1},
                    {name: '西柚记', price: 59, number: 1},
                    {name: '水壶转', price: 89, number: 1},
                ],
                checkGroup: [],
                allChecked: false,
            },
            methods: {
                getPrice() {
                    let sum_price = 0
                    for (i in this.checkGroup) {
                        sum_price += this.checkGroup[i]['number'] * this.checkGroup[i]['price']
                    }
                    return sum_price
                },
                checkAll() {
                    if (this.checkGroup.length > 0) {
                        this.checkGroup = []
                    } else {
                        this.checkGroup = this.dataList
                    }
                },
                checkOne() {
                    // if (this.checkGroup.length === this.dataList.length) {
                    //     this.allChecked = true
                    // } else {
                    //     this.allChecked = false
                    // }
                    this.allChecked = this.checkGroup.length === this.dataList.length;
                },
                reduceNum(item) {
                    if (item.number === 1) {
                        item.num = 1
                    } else {
                        item.number--
                    }
                }
            }
        })
    </script>
    </html>

  • 相关阅读:
    。。。。。。
    数据库
    python基础
    。。。。
    drf
    CRM笔记梳理
    人生苦短,我学PYTHON
    React的初步了解
    递归与迭代比较
    有没有大佬会很标准的三层架构
  • 原文地址:https://www.cnblogs.com/ltyc/p/14141276.html
Copyright © 2020-2023  润新知