vue03

内容概要

js的几种循环方式
key值的解释
数组，对象的检测与更新
input事件
v-model双向数据绑定
过滤案例
事件修饰符
按键修饰符
表单控制
补充

v-for的循环对象(数字，字符串，数字，对象)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js_dir/vue.js"></script>
</head>
<body>
<div id="app">
    <h3>字符串</h3>
    <div v-for="item in data_str">
        <p>{{item}}</p>
        <!--        <p v-if="item !=' '">{{item}}</p>-->
        <!--        <br v-else>-->
    </div>
    <h3>数字</h3>
    <!-- 不带索引的 -->
    <p v-for="item in data_number">{{item}}</p>
    <!--     带索引的 -->
    <p v-for="(value, index) in data_number">索引:{{index}}-----值:{{value}}</p>
    <h3>数组</h3>
    <p v-for="(value, index) in data_array">索引:{{index}}----值:{{value}}</p>
    <h3>对象</h3>
    <p v-for="value in data_obj">{{value}}</p>
    <p v-for="(value, key) in data_obj">键:{{key}}---值{{value}}</p>

</div>


</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            data_str: 'hello world',
            data_array: [1, 2, 3, 4],
            data_obj: {"name": "lqz", "age": 18},
            data_number: 8
        }
    })
</script>
</html>

总结

数字，是从1开始，如果想要索引或想要多个就写括号

<p v-for="(value, index) in data_number">

注意第一个是值，第二个才是索引

其余的都一样

js的循环方式

    for (a = 0; a < 10; a++) {
        console.log(a)
    }
    let a = 0
    for (;a < 10;) {
        console.log(a)
        a++
    }
    let a = "holle world"
    for (i of a){
        console.log(i)
    }
    for (i in a){
    //     // 索引
        console.log(i)
    }

    let a = ["篮球", "足球", "乒乓球"]
    for (i of a){
        console.log(i)
    }
    for (i in a){
        console.log(i)
    }

    let a = {"name": "lqz", "age": 18}
    // for (i of a){
    //     console.log(i)
    // }
    for (i in a){
        console.log(i)
    }

    // 数组独有的循环方式
    var a = [4, 5, 6, 7]
    a.forEach(item=>console.log(item))
    a.forEach(function (item) {
        console.log(item)

    })
    // jq 的for循环
    var a = {"name": "lqz", "age": 18}
    $.each(a, function (key, value) {
        console.log(`键${key} 值${value}`)

    })

总结

js 的有基于索引的 i=0;i<10;i++这种

有迭代的for i in 数据这种取出来的的key

for i of 数据这取出来的是value

数组独有的forEach里面写函数可以写箭头函数

jq的$.each 第一个参数循环数据，第二个写函数，函数有两个参数，第一个是键，第二个是值

key值得解释

vue的v-for写在标签上，在标签上加一个key，用属性指令绑定一个变量，key的值每次都不一样，这样可以加速虚拟dom替换，从而提高循环效率，key值必须唯一

<div v-for="item in 8" :key="item">{{item}}</div>

当你在插入的数据，他就不会再把一个个的在写一遍，也是插入

数组，对象的检测与更新

对象，新增一个key-value，发现页面没有变化，以后用

Vue.set() 设置一下即可。

    <h3>数据</h3>
    <div v-for="(value, key) in data_obj">
        <h4>键:{{key}},值{{value}}</h4>

    </div>
    <br>
    <br>
    <br>
    <button @click="func1" value="asdsa">点击添加</button>
    <div v-for="(value, index) in data_array">
        <h4>索引:{{index}},值{{value}}</h4>
    </div>
    <button @click="func2">点击添加</button>
</div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            data_obj: {"name": "lqz", "age": 19},
            data_array: [1, 2, 4]
        },
        methods: {
            func1() {
                Vue.set(this.data_obj, "wewe", "sdasds")
            },
            func2() {
                Vue.set(this.data_array, this.data_array.length, "呵呵")
            }

        }
    })

总结

Vue.set(往那个数据上加, 键, 值)

input事件

click 点击事件
input 当输入框进行输入的事件，触发事件
change 当元素的值发生改变时，触发的事件
blur 当输入框失去焦点的时候，触发事件
focus 当获得焦点，触发事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js_dir/vue.js"></script>
    <script src="./js_dir/jquery-1.12.4.js"></script>
</head>
<body>
<div id="app">
    <button @click="func1">点击</button>
    <br>
    <br>
    <input type="text" :value="vv" @input="func2" id="da"> ------------> {{vv}}
    <br>
    <br>
    <input type="text" @change="func3">
    <br>
    <br>
    <input type="text" @blur="func4">
    <br>
    <br>
    <input type="text" @focus="func5">
    <br>
    <br>


</div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            vv: "嘿嘿"
        },
        methods: {
            func1() {
                alert("点击了")
            },
            func2() {
                this.vv= $('#da').val()
            },
            func3() {
                console.log("我改变了")
            },
            func4() {
                console.log("失去")
            },
            func5() {
                console.log("焦点")
            }
        }

    })
</script>
</html>

v-model双向数据绑定

input 可以输入值，输入后，就被js变量拿到，如果使用

:value="变量" 这种形式，页面中输入框变化，变量不会表，使用v-model做双向数据绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js_dir/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" :value="vv"> ----单向绑定-----> {{vv}}
    <br>
    <br>
    <br>
    <input type="text" v-model:value="vv1"> ----双向绑定-----> {{vv1}}
    <br>
    <br>
    <br>
    <!-- 简写 -->
    <input type="text" v-model="vv2"> ----双向绑定-----> {{vv2}}
</div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            vv: "芜湖",
            vv1: "起飞",
            vv2: "喜喜"
        }
    })

</script>
</html>

过滤案例

实现一个，提示文本一样的

我们实现low一点。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js_dir/vue.js"></script>
</head>
<body>
<div id="app">
    <!-- 先写一个文本框 -->
    <input type="text" v-model="vv" @input="func1">
    <ul>
        <li v-for="value in new_data">{{value}}</li>
    </ul>
</div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            vv: "",
            data_list: ["aaa", "ass", "sad", "bdd", "bdasd", "dasfrf"],
            new_data: [],
        },
        methods: {
            func1() {
                let _this = this
                // 判断 数组里面有没有, input框里面有的, 有则展示在列表
                this.new_data = this.data_list.filter(function (item) {
                    // 使用这种方法一定要注意 this的指向问题
                    if (item.indexOf(_this.vv) >= 0) {
                        return true
                    } else {
                        return false
                    }
                })
            }
        }

    })
</script>
</html>

事件修饰符

.stop只处理自己的事件，子控件冒泡的事件不处理（阻止事件冒泡）
.self 只处理自己的事件，子控件冒泡的事件不处理
.prevent 阻止a连接的跳转

.once 事件只会触发一次(适用于抽奖页面)

所以以后一直点没用要刷新着点

<body>
<div id="app">
    <ul @click="func1"> 父控件
        <li @click="func2">子控件</li>
    </ul>

</div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        methods: {
            func1() {
                console.log("我是ul")
            },
            func2() {
                console.log("我是li")
            }
        }
    })
</script>

<body>
<div id="app">
    <ul @click="func1"> 父控件
        <li @click.stop="func2">子控件</li>
    </ul>

</div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        methods: {
            func1() {
                console.log("我是ul")
            },
            func2() {
                console.log("我是li")
            }
        }
    })
</script>

stop只处理自己，不会向父级冒泡

<body>
<div id="app">
        <ul @click.self="func1"> 父控件
        <li @click="func2">子控件</li>
    </ul>

</div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        methods: {
            func1() {
                console.log("我是ul")
            },
            func2() {
                console.log("我是li")
            }
        }
    })
</script>

只处理自己，子控件的冒泡不予处理

    <a href="http://www.baidu.com" @click.prevent="func1">点击看美女</a>

    <button @click.once="func2">点击</button>
</div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        methods: {
            func1() {
                console.log("我是嘿嘿")
            },
            func2() {
                console.log("我是喜喜")
            }
        }
    })
</script>

按键修饰符号

按键事件，按了键盘的某个键，就会触发函数的执行，

@keyup="func1"当键按下去，在弹起来在执行

按键修饰符号，只有某个按键被按下才触发

绑定给某个键的事件

@keyup.enter (直接写键)
@keyup.13 (写键对应的数字)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js_dir/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" @keyup="func1">
</div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        methods: {
            func1(itme) {
                 console.log(itme)
            },

        }
    })
</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div>
    <div class="app">
        <!--        <input type="text" v-model="text" @keyup="handleKeyUp">-&ndash;&gt;{{text}}-->
        <!--        <input type="text" v-model="text" @keyup.13="handleKeyUp2">-&ndash;&gt;{{text}}-->
        <input type="text" v-model="text" @keyup.enter="handleKeyUp2(1,$event)">--->{{text}}
    </div>
 
</div>
</body>
<script>
    var vm = new Vue({
        el: '.app',
        data: {
            text: ''
        },
        methods: {
            handleKeyUp(event) {
                // console.log('按键被按下了')
                // keyCode 对照表https://blog.csdn.net/zqian1994/article/details/109486445
                // console.log('按钮被按下了：', event.key, event.keyCode)
                if (event.keyCode == 13) {
                    console.log('开始跟后端交换搜索了')
                }
            },
            handleKeyUp2(a, event) {
                console.log(event)
                console.log('enter被按了')
            }
 
        }
 
    })
</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js_dir/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" @keyup="func1">
</div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        methods: {
            func1(itme) {
                console.log(itme.key)
                console.log(itme.keyCode)
            },

        }
    })
</script>
</html>

绑定给键的事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js_dir/vue.js"></script>
</head>
<body>
<div id="app">
 <input type="text" @keyup.enter="func1">
</div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        methods: {
            func1(itme) {
                console.log("呵呵")
            },

        }
    })
</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js_dir/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" @keyup.13="func1">
</div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        methods: {
            func1(itme) {
                console.log("呵呵")
            },

        }
    })
</script>
</html>

表单控制

input        变量类型的是什么
text         类型
radio        单选
checkbox      单选和多选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js_dir/vue.js"></script>
</head>
<body>
<div id="app">
    用户名: <input type="text" v-model="username">
    <br>
    <br>
    密码: <input type="password" v-model="password">
    <br>
    性别: 男:
    <input type="radio" value="男" v-model="gender">
    女:
    <input type="radio" value="女" v-model="gender">
    <br>
    爱好: 篮球:
    <input type="checkbox" value="篮球" v-model="hobby">
    足球:
    <input type="checkbox" value="足球" v-model="hobby">
    <br>
    <br>
    <button @click="func1">点击</button>

</div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            username: '',
            password: '',
            gender: '',
            hobby: [],
        },
        methods: {
            func1() {
                console.log(this.username)
                console.log(this.password)
                console.log(this.gender)
                console.log(this.hobby)
            },

        }
    })
</script>
</html>

注意

一定一定要写在被vue托管的的标签里面，

前端传过来多个值，要用数组来接收

补充

箭头函数
function(item){
    return item
}
变形
(item)=>{return item}

变形(单个形参才可以)
item=>{return item}

在变形
item=>item

多个形参
(item, aa)=>{函数体}


    // 补充1 ：数组的过滤方法
    // var dataList = ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf']
    // var newDataList = dataList.filter(function (item) {
    //     return false  // return true表示这个值保留,false 表示这个值不要
    // })
    // console.log(newDataList)


    // 补充2 ：字符串的indexOf方法，判断子字符串是否在当前字符串中,如果在返回的是索引，如果不在返回-1
    // var s = 'lqz is handsome'
    // var s1 = 'qqq'
    // var i = s.indexOf(s1)
    // console.log(i)


    // 补充3 ：es6 的箭头函数写法---》函数中套函数，this指向有问题，有了箭头函数，箭头函数没有自己的this，用的都是上一级的this

作业

海象运算符

a = 5
while  (a:= a-1) + 1:
    print(a)

先定义 a等于 5，

然后进入 while的条件，先执行括号里面的

a:= a-1    就相当于 a = a-1 
a = 4
判断   a+ 1 是 true 还是 false
是 true
打印 4
如此循环

while True:
    if (a :=input("输入")) == "123":
        print(a)
        break
    print(a)

可以理解为先赋值在判断

就是赋值符号可以写在条件里面了

购物车案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js_dir/vue.js"></script>
    <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head>
<body>
<div id="app">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <h3>商品列表</h3>
                <table class="table table-hover table-striped">
                    <thead>
                    <tr>
                        <th>编号</th>
                        <th>名称</th>
                        <th>价格</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="item in goods_list">
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.price}}</td>
                        <td><input type="checkbox" v-model="item.er" @change="func1"></td>
                    </tr>
                    </tbody>
                </table>
                <div class="pull-right">总价格<input type="text" class="disabled" v-model="vv"></div>
            </div>

        </div>

    </div>


</div>
</body>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            goods_list: [
                {"id": 1, "name": "苹果", "price": 18, "er": false},
                {"id": 2, "name": "栗子", "price": 19, "er": false},
                {"id": 3, "name": "香蕉", "price": 20, "er": false},
                {"id": 4, "name": "生菜", "price": 21, "er": false},
            ],
            vv: ""
        },
        methods: {
            // func1() {
            //     let content = 0
            //     for (obj of this.goods_list) {
            //         if (obj.er) {
            //             content = content+ obj.price
            //             this.vv = content
            //         }
            //         }
            // },
            func1() {
                let content = 0
                let aa = this.goods_list.filter(item => item.er)
                if (aa) {
                    for (obj of aa) {
                        content = content + obj.price
                    }
                }
                this.vv = content
            },
        }
    })
</script>
</html>

posted @ 2023-02-15 19:47 可否阅读(33) 评论(0) 收藏举报

可否