今日内容概要

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

今日内容详细

js几种循环方式

1. 基于索引的循环 
	var l = [1, 2, 3]
	for (i = 0; i < l.length; i++){
            console.log(i)
    }

2. 基于in循环 拿到的还是索引
	for (i in l){
            console.log(i)
        }

3. es6中的语法 基于of循环 拿到的是一个个数据值
	for (i of l){
            console.log(i)
        }

4. 数组的forEach循环方法
	l.forEach(function (i) {
            console.log(i)
        })

5. jQuery的循环 循环数组 对象
	$.each(a, function(index, item){
        console.log(index)  // index是索引
        console.log(item)  // item是数据
    })

v-for可以循环的变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>

</head>
<body>
    <div id="app">
        <h1>循环数组</h1>
        <p v-for="i in l">{{i}}</p>
        
        <h1>循环数组带索引</h1>
        <p v-for="(i, index) in l">索引{{index}} 值{{i}}</p>
        
        <h1>循环对象</h1>
        <p v-for="i in obj">{{i}}</p> <!--默认是value值-->
        
        <h1>循环对象 带key和value</h1>
        <p v-for="(value, key) in obj">键{{key}} 值{{value}}</p>
        
        <h1>循环字符串</h1>
        <p v-for="i in s">{{i}}</p>
        
        <h1>循环字符串带索引</h1>
        <p v-for="(i, index) in s">索引{{index}} 值{{i}}</p>
        
        <h1>循环数字</h1>
        <p v-for="i in 8">{{i}}</p>
        
        <h1>循环数字带索引</h1>
        <p v-for="(i, index) in 8">索引{{index}} 数字{{i}}</p>

    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                l: ['lzj', 'lz', 'zj'],
                obj: {'name': 'lzj', 'age': 18},
                s: 'hello world'
            }
        })
    </script>
</body>
</html>

key值的解释

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

<div v-for="i in l" :key="i">{{i}}</div>

后续使用v-for的时候尽量写上

数组对象的检测与更新

当我们手动给对象新增一个key-value的时候 发现页面没有变化 但是修改原有的值页面是会变化的 是因为手动新增的key-value并不会被检测与更新 我们可以通过Vue.set()方法来实现就行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
    <script src="vue/vue.js"></script>

</head>
<body>
    <div id="app">

        <div v-for="(value, key) in obj">
            <p>key值是{{key}}</p>
            <p>value值是{{value}}</p>
        </div>

        <button @click="button">点我加数据</button>

    </div>


    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                obj: {'name': 'lzj', 'age': 18},
            },
            methods: {
                button(){
                    // 页面时会变化的 因为name已经被检测与更新
                    this.obj['name'] = '彭于晏'
                    // 页面并不会变化 但是是有值的 
                    // 新增的key-value并不会被检测与更新
                    this.obj['gender'] = '男'
                    // 该遇到数据有了 页面没变的情况下可以使用
                    Vue.set(this.obj, 'gender', '男')
                }
            }
        })
    </script>
</body>
</html>

input事件

input标签的事件有
	click	当输入框别惦记的时候 触发事件
	input	当输入框进行输入的时候 触发的事件
	change	当元素的值发生改变时 触发的事件
	blur	当输入框失去焦点的时候 触发的事件
	focus	当输入框获得焦点的时候 触发的事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
    <script src="vue/vue.js"></script>

</head>
<body>
    <div id="app">
        <h1>点击事件</h1>
        <input type="text" @click="inputClick">
        
        <h1>获取焦点事件</h1>
        <input type="text" @focus="inputFocus">
        
        <h1>失去焦点事件</h1>
        <input type="text" @blur="inputBlur">
        
        <h1>改变事件</h1>
        <input type="text" @change="inputChange">
        
        <h1>输入事件</h1>
        <input type="text" @input="inputInput">

    </div>


    <script>
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {
                inputClick(){
                    alert('我是点击事件')
                },
                inputFocus(){
                    console.log('我是获取焦点事件')
                },
                inputBlur(){
                    console.log('我是失去焦点事件')
                },
                inputChange(){
                    console.log('我是改变事件')
                },
                inputInput(){
                    console.log('我是输入事件')
                }
            }
        })
    </script>
</body>
</html>

v-model双向数据绑定

我们可以通过:value="变量"的方式给input输入框赋予一个默认值 但是当我们改变input框中的数据的时候 并不会同步给变量 因为它是单向数据绑定的 我们可以使用v-model将数据做双向绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
    <script src="vue/vue.js"></script>

</head>
<body>
    <div id="app">
        <h1>单向数据绑定</h1>
        <!--改变input框的值并不会改变变量name的值-->
        <input type="text" :value="name"> ------>{{name}}
        <h1>双向数据绑定</h1>
        <!--改变input框的值会改变变量name的值-->
        <input type="text"  v-model="age"> ------>{{age}}
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data:{
                name: 'lzj',
                age: 18
            },
            methods:{}
        })
    </script>
</body>
</html>

过滤案例

js中数组的过滤方法

实现过滤前需要了解

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

2.字符串的indexOf方法
    判断字符串是否在当前字符串中 如果在返回的 是索引 不在则返回-1
    var s = 'lzj is handsome'
    var s1 = 'lzj'
    var i = s.indexOf(s1)
    console.log(i)  // 0

3.箭头函数
	函数中套函数 那么this的指向就有问题 所以出现了箭头函数
	无参数 无返回值的箭头函数
        var f = () => {
            console.log('我是无参 无返回值的箭头函数')
        }
	有一个参数 没有返回值的箭头函数
        var f = (item) => {  // 参数可以在括号内 也可以不加括号
            console.log('我是有一个参数 无返回值的箭头函数')
        }
	有多个参数 没有返回值的箭头函数
        var f = (key, value) => {  // 括号不能去掉
            console.log('我是有多个参数 无返回值的箭头函数')
        }
	有一个参数 一个返回值
        var f = item => {
            return item + 'lzj'
        }
	可以接着简写
        var f = item => item + 'lzj'

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue/vue.js"></script>

</head>
<body>
    <div id="app">
        请输入要搜索的内容<input type="text" v-model="text" @input="inputInput">
        <ul>
            <!--过滤出来的是需要变化的 所以不直接使用源数据 使用会改变的新数据 -->
            <li v-for="i in newList">  
                {{i}}
            </li>
        </ul>

    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data:{
                text: '',
                dataList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf'],
                // 创建一个和原数据一样的新数据 供用户不输入情况下查看
                newList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf']
            },
            methods: {
                inputInput(){
                    //var _this = this // this指向有问题 赋值一下
                    // 将过滤后的数据组成新数组
                    //_this.newList = _this.dataList.filter(function (item) {
                    //    判断用户输入的值在不在filter后的一个个数据中
                    //    if (item.indexOf(_this.text) >= 0){
                    //        return true
                    //    } else {
                    //        return false
                    //    }
                    // })
                    // 使用了箭头函数 缩减了代码 也不存在了this指向问题
                    this.newList=this.dataList.filter(item => item.indexOf(this.text) >= 0)
                }
            }
        })
    </script>
</body>
</html>

事件修饰符

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue/vue.js"></script>

</head>
<body>
    <div id="app">
        <h1>.stop事件修饰符</h1>
        <ul @click="ulClick">
            <!--点子类事件后 只执行子类事件 防止冒泡给父类-->
            <li @click.stop="liClick">我是li</li>
        </ul>

        <h1>.self事件修饰符</h1>
        <!--只有点我自己才会触发事件-->
        <ul @click.self="ulClick">
            <li @click="liClick">我是li</li>
        </ul>

        <h1>.prevent事件修饰符</h1>
        <!--    a标签使用prevent就会阻止跳转    -->
        <a href="http://www.baidu.com" @click.prevent="aClick">点我点我</a>

        <h1>.once事件修饰符</h1>
        <!--    使用once事件修饰符 那么该事件就只会执行一次    -->
        <p @click.once="oneClick">点我看美女</p>

    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data:{},
            methods: {
                ulClick(){
                    console.log('我是ul 我被点击了')
                },
                liClick(){
                    console.log('我是li 我被点击了')
                },
                aClick(){
                    console.log('我不让你看')
                    // 手动指定跳转 不自动跳转
                    location.href = 'http://www.cnblogs.com'
                },
                oneClick(){
                    alert('骗你的 哈哈哈哈')
                }
            }
        })
    </script>
</body>
</html>

按键修饰符

按钮事件;按了键盘某个键 就会触发函数的执行
	@keyup="函数名"

按键修饰符:只有按下指定按键才会触发
	可以是按键名
	@keyup.enter="函数名"
	也可以是按键对应的键码值(keyCode)
	@keyup.13="函数名"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue/vue.js"></script>

</head>
<body>
    <div id="app">
        <!--    任意键都会触发 传$event可以将当前按键信息传过去   -->
        <input type="text" @keyup="keyupInput($event)">
        <!--    指定键会触发    -->
        <input type="text" @keyup.enter="keyupInput">
        <!--    指定键码值对应键会触发    -->
        <input type="text" @keyup.13="keyupInput">
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {
                // 可以给触发函数传参数
                keyupInput(event){
                    // event是所按键的详细信息
                    console.log(event)
                }
            }
        })
    </script>
</body>
</html>

表单控制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue/vue.js"></script>
</head>
<body>
<div>
    <div id="app">

        <p>用户名：<input type="text" v-model="username"></p>
        <p>密码：<input type="password" v-model="password"></p>
        <p>性别：
            男：<input type="radio" v-model="gender" value="1">
            女：<input type="radio" v-model="gender" value="2">
        </p>
        <p>记住密码：<input type="checkbox" v-model="remember"></p>

        <p>爱好：
            篮球：<input type="checkbox" v-model="hobby" value="篮球">
            足球：<input type="checkbox" v-model="hobby" value="足球">
            排球：<input type="checkbox" v-model="hobby" value="排球">
        </p>

        <button @click="buttonClick">登录</button>

    </div>

</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            username: '',
            password: '',
            gender: '',  // radio单选，多个radio绑定同一个变量，选中某个，就对应value值
            remember: false, // checkbox 单选是true或false
            hobby: []  // checkbox 多选是数组类型，必须一开始定义就是数组，多个checkbox绑定一个变量
        },
        methods: {
            buttonClick() {
                console.log(this.username, this.password, this.gender, this.remember, this.hobby)
            }
        }

    })
</script>
</html>

作业

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue/vue.js"></script>

</head>
<body>
<div id="shop">
    <div v-for="(goods, index) in goods_list">
        商品名:{{goods.name}} 价格:{{goods.price}}
        <input type="checkbox" v-model="new_list" :value="index" @change="goodsClick">
    </div>
    <span v-if="all">取消全选</span>
    <span v-else>全选</span>
    <input type="checkbox" v-model="all" @click="allClick">
    <h2>总价{{all_price}}</h2>
</div>
<script>
    var all = 0
    var vm = new Vue({
        el: '#shop',
        data: {
            goods_list: [{name: '保时捷', price: 999}, {name: '法拉利', price: 1000}, {name: '兰博基尼', price: 1000}],
            new_list: [],
            all: false,
            all_price: 0
        },
        methods: {
            goodsClick() {
                if (this.new_list.length === this.goods_list.length){
                    this.all = true
                }else {
                    this.all = false
                }
                all = 0
                for (i of this.new_list) {
                    all += this.goods_list[i].price
                }
                this.all_price = all

            },
            allClick() {
                if (this.all) {
                    this.new_list = []
                    this.all_price = 0
                } else {
                    all = 0
                    for (i in this.goods_list) {
                        all += this.goods_list[i].price
                        this.new_list.push(i)
                    }
                    this.all_price = all
                }

            }
        }
    })
</script>
</body>
</html>

标签：console,log,item,事件,vue3,var,new
From： https://www.cnblogs.com/lzjjjj/p/17124679.html

vue3

今日内容概要

今日内容详细

js几种循环方式

v-for可以循环的变量

key值的解释

数组对象的检测与更新

input事件

v-model双向数据绑定

过滤案例

事件修饰符

按键修饰符

表单控制

作业

相关文章

赞助商

阅读排行

vue3

今日内容概要

今日内容详细

js几种循环方式

v-for可以循环的变量

key值的解释

数组 对象的检测与更新

input事件

v-model双向数据绑定

过滤案例

事件修饰符

按键修饰符

表单控制

作业

相关文章

赞助商

阅读排行

数组对象的检测与更新