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

js的几种循环方式

1.v-for可以循环的变量

*	数组 （带索引 index要和item在一个括号里 ）
*	对象	（默认是vaule值 想获取key 把key和item写一个括号里 ）
*	字符串	（空格也算字符想把空格也打印出来 要加判断）
*	数字

代码：

<!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>
    <link rel="stylesheet" href="bootstrap.css">
    <script src="bootstrap.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>


</head>
<body>

<div id="app">
    <p v-for="item in l">{{item}}</p>						   //数组
    <p v-for="(index,item) in l">索引{{index}},{{item}}</p>	 //带索引的数组
    <p v-for="item in d">{{item}}</p>//对象 默认是value
    <p v-for="(key,item) in d">key:{{key}},{{item}}</p>		  //带key的对象
    <p v-for="item in s">{{item}}</p> 						  //字符串
    <div v-for="item in s">	//打印出空格
        <p v-if="item != ' '">{{item}}</p>
        <br v-else>
    </div>
    <p v-for="item in 5">{{item}}</p> 						   //打印数字


</div>

</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            l: [1, 2, 3],
            d: {name: 'joyce', age: 18},
            s: 'hi joyce',

        }
    })
</script>
</html>

2.js的循环方式

* js的for循环基于索引的循环 python没有给予索引的循环 python都是基于迭代的循环 

    for(i=0;i<10;i++){
        console.log(i)

    var a=[4,5,6]
        for (i = 0;i<a.length;i++){
            console.log(a[i])
    }

*js 的in循环 拿到的是索引 跟vue的v-for区分

var a =[4,5,6]
    for (i in a){
        // console.log(i) //拿索引
        console.log(a[i]) //拿数据值
    }

*es 6语法 of循环

    var a = [4,5,6]
    for (item of a){
        console.log(item)
    }

*数组的方法 forEach可以循环

    var a = [4,5,6,7]
    a.forEach(function (item) {
        console.log(item)
    })

*jq 的循环 循环数组 对象

    var a = [4 , 2 , 3]
    $.each(a,function (index,item) {
        console.log(index)
        console.log(item)
    })

key值的解释

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

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

数据，对象的检测与更新

#对象 新增一个key：value 发现页面没有变化（如果是已有的key 想进行修改可以直接改）
方式一：
	methods:{
            handleClick(){
                Vue.set(this.info,'hobby','篮球')               
            }
        },
#固定写法 Vue.set(this.info，'key','value')
方式二：
	methods:{
            handleClick(){
                this.info['age']='18'
                this.info['hobby'] = '555'
            }
        },
#上面修改一个已有key的对象 下面添加一个新的对象会自动传入页面会变

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>
    <link rel="stylesheet" href="bootstrap.css">
    <script src="bootstrap.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>


</head>
<body>

<div id="app" >
    <h1>点击事件 click</h1>
    <input type="text" @click="handleClick">
    <h1>失去焦点事件</h1>
    <input type="text" @blur="handleBlur">
    <h1>input事件</h1>
    <input type="text" @input="handleInput">
    <h1>change事件</h1>
    <input type="text" @change="handleChange" :value="info">
    <h1>focus事件</h1>
    <input type="text" @focus="handleFocus" >
</div>

</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            info:"123",
        },
        methods:{
            handleClick(){
                alert(点了)
            },
            handleBlur(){
                console.log('失去焦点 ')
            },
            handleInput(){
                console.log('输入了')
            },
            handleChange(){
                console.log('改变了')
            },
            handleFocus(){
                console.log('获得焦点')
            },
            }
    })
</script>
</html>

v-model双向数据绑定

input 可以输入值 输入后 就被js变量拿到 如果使用 :values = '变量' 这种形式 页面中输入框变化 变量不会变 
     <input type="text" :value="age">----{{age}}
            
使用 v-model = '变量'这种形式 做双向数据绑定
	    <input type="text" v-model="name">----{{name}}

代码：

<!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>
    <link rel="stylesheet" href="bootstrap.css">
    <script src="bootstrap.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>


</head>
<body>

<div id="app" >
    <h1>单向数据绑定</h1>
    <input type="text" :value="age">----{{age}}
    <h1>双向数据绑定</h1>
    <input type="text" v-model="name">----{{name}}
</div>

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


    })
</script>
</html>

过滤案例

补充：
	1.数组的过滤方法
    var newDataList = dataList.filter(function (item) {
        return false  //turn 标识保留 false表示值不要
    })

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

	3.es 6 箭头函数  函数中套函数 this指向有问题 有了箭头函数 箭头函数没有自己的this 用的是上一级的
    var f=function () {
        console.log('13')
    }

	4.箭头函数
		//无参数 无返回值箭头函数
    var f=()=>{
         console.log('13')
    }
    //有一个参数 没有返回值的箭头函数 括号可以去掉
    var f = index=>{
        console.log('13')
    }
    //有两个参数 没有返回值的箭头函数 括号必须有
    var f = (index,item)=>{
        console.log('123')
    }
    //有一个参数一个返回值

    var f = function (index) {
        return index + '123'
    }
    //简化：
    var f = index=>index + '123'
    var res = f('456')
    console.log(res)l

事件修饰符

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

<!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>
    <link rel="stylesheet" href="bootstrap.css">
    <script src="bootstrap.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>


</head>
<body>

<div id="app">
    <h1>事件修饰符
        <ul @click="handleUL">
            <li @click.stop="handLI">1</li>
            <li>2</li>
        </ul>
        <h1>阻止a跳转</h1>
        <a href="http://www.baidu.com" @click.prevent="handleA">点我</a>
    </h1>
    <button @click.once="handleClick">抽奖</button>
</div>

</body>
<script>
    var vm = new Vue({
        el:'#app',
        data:{

        },
        methods:{
            handLI(){
                alert('li123')
            },
            handleUL(){
                 alert('ul123')
            },
            handleA(){
              alert('123')
              location.href='http://www.cnblogs.com'
            },
            handleClick(){
                alert('123')
            },
        }
    })
</script>
</html>

案件修饰符

* 按键事件：按键盘上的某个键子 就会触发函数的执行

@keyup.enter  一样
@keyup.13

代码：

<!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>
    <link rel="stylesheet" href="bootstrap.css">
    <script src="bootstrap.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>


</head>
<body>

<div id="app">
    <input type="text" v-model="text" @keyup.enter="handleKeyUp">----{{text}}
</div>

</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            text: '',
        },
        methods: {
            handleKeyUp(event) {
                if (event.keyCode == 13){
                    console.log('132')
                }
            },
        }
    })
</script>
</html>

表单控制

input -- 变量类型
	text 类型
    randio 单型
    checkbox 单选或多选

代码：

<!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>
    <link rel="stylesheet" href="bootstrap.css">
    <script src="bootstrap.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>


</head>
<body>
    <div id="app">
        <p>用户名：<input type="text" v-model="username"></p>
        <p>密码：<input type="text" 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="handleClick">点击</button>

    </div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            username: '',
            password: '',
            gender: '',
            remember:false,
            hobby:[],

        },
        methods: {
            handleClick(){
                console.log(this.username,this.password,this.gender,this.remember,this.hobby)
            },
        }
    })
</script>
</html>