vue框架3

js的几种循环方式

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

 

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div class="app">
    <h2>1.循环数组</h2>
    <span v-for="item in l">{{item}}</span>
    <h2>2.循环数组带索引</h2>
    <div v-for="(item,index) in l">第{{index+1}}个值，值是{{item}}</div>
    <h2>3.循环对象，默认value</h2>
    <div v-for="item in info">{{item}}</div>
    <h2>4.循环对象，带key和value</h2>
    <div v-for="(item,index) in info">{{index}}:{{item}}</div>
    <h2>5.循环字符串</h2>
    <div v-for="item in T">{{item}}</div>
    <h2>6.循环字符串，带索引</h2>
    <div v-for="(item,index) in T">第{{index+1}}个字母{{item}}</div>
    <h2>7.循环字符串，带索引，空格也算占位</h2>
    <div v-for="(item,index) in T"><p v-if="item!=' '">第{{index+1}}个字符{{item}}</p><br v-else></div>
    <h2>8.循环数字</h2>
    <div v-for="item in 6">{{item}}</div>
    <h2>9.循环数字带索引</h2>
    <div v-for="(item,index) in 6">第{{index+1}}个数是{{item}}</div>
</div>
</body>
<script>
    new Vue({
        el:'.app',
        data:{
            l:[1,2,3],
            info:{name:'han',age:23},
            T:'hello world!',
        }
    })
</script>
</html>
复制代码

2.js的循环方式

复制代码
# 1.js循环都是基于索引的循环
"""
python没有基于索引的循环，都是基于迭代的循环
"""
<script>
    for(i=0;i<10;i++){
        console.log(i)
    }     // 0，1，2，3，4，5，6，7，8，9
    var a = [4,5,6,7]
    for (i=0;i<a.length; i++){
        console.log(a[i])  
    }    // 4，5，6，7 （基于索引的循环）
</script>

# 2.js的in循环，拿到的是索引
<script>
    // 基于迭代的循环
    var a= [4,5,6,7]
    for (item in a){
        console.log(item)
    }  // 0,1,2,3 原生js拿到的是索引
    var a = [4,5,6,7]
    for (i in a) {
        console.log(a[i])
    }  // 4,5,6,7 拿到的是a里面的值
</script>

# 3.es6语法，of循环
<script>
    var a = [4,5,6,7]
    for (item of a) {
        console.log(item)
    }  // 4,5,6,7
</script>

# 4.数组的方法，forEach可以循环
<script>
    var a = [4,5,6,7]
    a.forEach( function (item){
        console.log(item)
    })   // 4,5,6,7  a如果是对象就无法点出forEach
</script>

# 5.jquery的循环，循环数组，对象
// 需要引入jquery的cdn
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
// 代码：
<script>
    var a = [4,5,6,7]
    $.each(a, function (index,item) {
        console.log(index)  // 0,1,2,3 索引
        console.log(item)   // 4,5,6,7 数值
    }) // 0，4，1，5，2，6，3，7
</script>
复制代码

key值的解释

<div v-for="item in 8" :key="item">{{item}}</div> 
     1. vue的v-for写在标签上，
     2. 在标签上加一个key(key属性是vue提供的)，
     3. 用属性指令()绑定一个变量
     4. key(每次循环key值是唯一的)的值每次都不相同
     5. 这样可以加速虚拟dom的替换，从而提升循环效率

数组，对象的检测与更新

复制代码
# 对象：
    - 新增一个key-value，发现页面没有变化，以后用:
           Vue.set(this.info, 'hobby','篮球'）
    - 设置一下即可
# 代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div class="app">
    <h1>循环对象</h1>
    <div v-for="(value,key) in info">
        <h2>key值为:{{key}}</h2>
        <h3>value值为:{{value}}</h3>
        <br>
    </div>
    <button @click="handleAdd">点我添加数据</button>
</div>
</body>
<script>
    new Vue({
        el:'.app',
        data:{
            info:{name:'han',age:23},
        },
        methods:{
            handleAdd(){
                // 页面会变化
                this.info['name'] = '彭于晏'
                // 页面不会变,
                Vue.set(this.info,'hobby','篮球')
            }
        }
    })
</script>
</html>
复制代码

input事件

复制代码
# input的事件：
click       点击事件
input      当输入框进行输入的时候触发的事件
chango   当元素的值发生改变时，触发的事件
blur        当输入框失去焦点的时候，触发的事件
focus      当获得焦点触发事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div class="app">
    <h1>1.点击事件</h1>
    <input type="text" @click="handleClick">
    <h1>2.失去焦点</h1>
    <input type="text" @blur="handleBlur">
    <h1>3.输入事件input</h1>
    <input type="text" @input="handleInput">
    <h1>4.change事件</h1>
    <input type="text" @change="handleChange">
    <h1>5.focus事件</h1>
    <input type="text" @focus="handleFocus">
</div>

</body>
<script>
    new Vue({
        el:'.app',
        data:{
        },
        methods:{
            handleClick() {
                alert('点击了事件')
            },
            handleBlur(){
                console.log('失去了焦点')
            },
            handleInput(){
                console.log('输入了东西')
            },
            handleChange(){
                console.log('内容发生改变')
            },
            handleFocus(){
                console.log('获得了焦点')
            }
    }
    })
</script>
</html>
复制代码

v-model双向数据绑定

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div class="app">
    <h1>1.单向数据绑定</h1>  <!--改变变量vm对应的数据，才会发生改变-->
    <input type="text" :value="name">{{name}}
    <h1>2.双向数据绑定</h1>  <!--改变变量vm对应数据或前端输入框任意一个，另一个也会改变-->
    <input type="text" v-model="age">{{age}}
</div>

</body>
<script>
    var vm = new Vue({
        el:'.app',
        data:{
            name:'han',
            age:23
        },
    })
</script>
</html>
复制代码

过滤案例

箭头函数

复制代码
<script>
// 补充
    // 1.数组的过滤方法
    var dataList=['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf']
    dataList.filter(function (item){
        return true  // 表示这个值保留,false表示这个值舍弃
    })
    // 2.字符串indexOf方法
    // 判断子字符串是否在当前字符串中，在返回其索引，不再返回-1
    var s = 'han is handsome'
    var s1 = 'hhh'
    var s2 = s.indexOf(s1)
    console.log(i)
    // 3.es6的箭头函数写法
    // 函数中套函数，this指向有问题，有了箭头函数,用的都是上一级的this，因为箭头函数没有自己的this
    // >-1. 无参数，无返回值箭头函数
    var f = () => {
        console.log('函数')
    }
    // >-2.有一个参数，没有返回值的箭头函数,括号可留可去
    var f = item => {  // var f = (item) => {
        console.log(item)
    }
    // >-3.有多个参数，没有返回值的箭头函数,括号不可去
    var f = (item, key) => {
        console.log(item)
    }
    // >-4.有一个参数，一个返回值
    // 方式一:
    var f =  (item)=> {
        return item + 'han'
    }
    // 方式二:
    var f = item => {
        return item + 'han'
    }
    // 方式三:
    var f = item => item + 'han'

    var res = f('han')
    console.log(res)

</script>
复制代码

过滤

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div class="app">
    <h1>过滤案例</h1>
    <p>请输入你要搜索的内容:
        <input type="text" v-model="myText" @input="handleInput">
    </p>
    <ul>
        <li v-for="item in newDataList">{{item}}</li>
    </ul>
</div>
</body>
<script>
    var vm = new Vue({
        el:'.app',
        data:{
            myText:'',
            dataList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf'],
            newDataList:['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf'],
        },
        methods:{
            handleInput() {
                // 简化前
                // this.newDataList = this.dataList.filter(item => {
                //     // 判断item在不在myText中
                //     // 1.this指向问题
                //     // if (_this.myText.indexOf(item) >= 0) {
                //     // 2.判断输入的值myText是否在item中
                //     // if (item.indexOf(_this.myText) >= 0) {
                //     //     return true
                //     // } else {
                //     //     return false
                //     // }
                //     // 以上五行简写后：
                //     return item.indexOf(this.myText) >= 0
                // })
                // 简化后
                this.newDataList = this.dataList.filter(item => item.indexOf(this.myText) >= 0 )
            }
        }
    })
</script>
</html>
复制代码

 

事件修饰符

复制代码
# 事件的修饰符
.stop          只处理自己的事件，子控件冒泡的事件不处理（组织事件冒泡）
.self           只处理自己的事件，子控件冒泡的事不处理
.prevent     阻止a链接的跳转
.once         事件只会触发一次（适用于抽奖）


# 代码示例：（在console中查看效果）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div class="app">
    <h1>事件修饰符stop，子控件不再冒泡给父控件</h1>
    <ul @click='handleUl'>
        <li @click.stop="handleLi">第一</li>
        <li>第二</li>
    </ul>

    <h1>事件修饰符self:只处理自己的事件，子控件的冒泡，不处理</h1>
    <ul @click.self="handleUl">
        <li @click='handleLi'>第一</li>
        <li>第二</li>
    </ul>

    <h1>prevent组织a的跳转</h1>
    <a href="http://www.cnblog.com" @click.prevent="handleA">点击进入博客园</a>

    <h1>once 只响应一次</h1>
    <button @click.once="handleClick">点击抽奖</button>
</div>

</body>
<script>
    var vm = new Vue({
        el:'.app',
        data:{},
        methods: {
            handleLi() {
                console.log('li被点击了')
            },
            handleUl() {
                console.log('ul被点击了')
            },
            handleA(){
                console.log('a标签被点击了')
                // 阻止a的跳转，自己决定要不要跳
                // 手动指定跳
                location.href = 'http://www.baidu.com'
            },
            handleClick() {
                console.log('点击事件')
            }
        }
    })

</script>
</html>
复制代码

按键修饰符

复制代码
# 按钮事件：按了键盘某个键，就会触发函数的执行
@keyup="handleKeyUp"

# 键盘事件
keydown：按下键盘键
keypress：紧接着keydown事件触发（只有按下字符键时触发）
keyup：释放键盘键

# 按键修饰符：只有某个按键被按下才触发
@keyup.enter
@keyup.13



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div class="app">
    <!--    1.按键检测-->
    <!--    <input type="text" v-model="text" @keyup="handleKeyUp">{{text}}-->
    <!--    2.只能检测特定的按键，以回车键为例-->
    <!--    <input type="text" v-model="text" @keyup="handleKeyUp1">{{text}}-->
    <!--    3.监测回车键,传入两个参数，a对应的是1，event对应2-->
    <!--    <input type="text" v-model="text" @keyup.13="handleKeyUp2(1,2)">{{text}}-->
    <!--    4.监测回车键,传入$event,监测event的值-->
    <!--    <input type="text" v-model="text" @keyup.enter="handleKeyUp2(1,$event)">{{text}}-->
</div>

</body>
<script>
    var vm = new Vue({
        el:'.app',
        data:{
            text:''
        },
        methods: {
            // 1.按键监测
            handleKeyUp(event) {
                console.log('按键被按下了',event.key,event.keyCode) // keyCode会显示检测按键对应的数字关系
            },
            // 2.监测回车
            handleKeyUp1(event){
                if (event.keyCode == 13) {
                    console.log('开始跟后端交换搜索了，只有回车按键会触发执行')
                }
            },
            handleKeyUp2(a,event) {
                console.log(event)
                console.log(a)
                console.log('enter被按了')
            },

            handleKeyUp3(a, event) {
                console.log(event)
                console.log('enter被按了')
            }

        }
    })
</script>
</html>
复制代码

表单控制

复制代码
#本质：input框>>>>变量类型是什么？
   text         类型
   radio       单选
   checkbox 单选和多选

# 代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div class="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="handleClick">登录</button>
</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: {
            handleClick(){
                console.log(this.username,this.password,this.gender,this.remember,this.hobby)
            }
        }
    })
</script>
</html>
复制代码

 

posted @   橘子菌菌n  阅读(23)  评论(0)  编辑  收藏  举报
相关博文：
·  vue框架4
·  vue框架2
·  vue-3
·  vue_day03
·  vue基本操作
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球 运作规律
点击右上角即可分享
微信分享提示
AI IDE Trae