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

回顾

幸存者偏差 达克效应

1. m v vm演示
2. 插值语法 {{}}
	三目运算符 ---> 条件?'':''
3.文本指令
	v-xx	vue的指令,放在标签属性里
  v-text='变量'
  v-html=
  v-show	style-display:none(隐藏) <p v-show="true"> 哈哈哈 </p>
  v-if	标签整个删除个插入
4. 事件指令
	v-on:事件名='函数'	简写 @事件=''
    es6:对象定义的方式、模板字符串(反引号)5. 属性指令
	v-bind:属性='变量'	简写 :属性='值'
6. v-if v-else-if v-else

7. v-for='item in 数组,对象,字符串,数字'

js的几种循环方式

v-for可以循环的变量:v-for写在标签上,能循环数组、对象、字符串、数字,

<!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">

        <h1>v-for可以循环什么?</h1>
        <h2>循环数组</h2>
        <span v-for="item in l">{{item}}</span>
        <h2>循环数组带索引</h2>
        <div v-for="(item,index) in l">{{index + 1}}个,值是:{{item}}</div>

        <h2>循环对象,默认是value</h2>
        <div v-for="item in info">{{item}}</div>
        <h2>循环对象,带key和value</h2>
        <div v-for="(item,key) in info">key值是:{{key}}-----{{item}}</div>

        <h2>循环字符串</h2>
        <div v-for="item in s">
            <p v-if="item!=' '">{{item}}</p>
            <br v-else>
        </div>
        <h2>循环字符串-带索引</h2>
        <div v-for="(item,index) in s">

            <p v-if="item!=' '">{{item}}---->索引是:{{index}}</p>
            <br v-else>
        </div>


        <h2>循环数字</h2>
        <div v-for="item in 8">{{item}}</div>
        <h2>循环数字-带索引</h2>
        <div v-for="(item,index) in 8">{{item}}----索引是:{{index}}</div>


    </div>

</div>
</body>
<script>
    var l1 = [4, 5, 6,]
    new Vue({
        el: '.app',
        data: {
            l: [1, 2, 3],
            info: {name: 'lqz', age: 19, l1},
            s: 'hello               world'
        },
        methods: {},
    })
</script>
</html>

总结:v-for循环默认是将值循环出来,字符串、数组、数字的循环索引是从0开始的,循环的第二个值是从0开始的索引值。而对象默认循环的是值,循环的第二个参数是键,注意与python中字典区分开

image-20230215094043855L不能放,它是对象里的一个值

image-20230215093944024

div是不占空间的,带上空格

image-20230215094341650

显示空格

image-20230215094740556

js的循环方式

  1. js 的循环

是基于索引的循环;python 没有基于索引的循环,python都是基于迭代的循环

var a = ['你', '我', '它','她']
for(i=0;i<a.length;i++){
  // console.log(i)  结果:0 1 2 3
  console.log(a[i])
}

image-20230215102449507

  1. js的in循环

拿到的是索引,是基于索引的循环,跟vue的v-for区分

  var b = ['你', '我', '它','她']
  for(i in b){
    console.log(i)  结果是:0 1 2 3
  }

image-20230215102748268

  1. es6的语法

---> of 循环 基于迭代的

  var d = ['你', '我', '它','她']
  for(i of d){
    console.log(i)  结果是:你 我 它 她
  }

image-20230215102926258

  1. 数组的方法

forEach可以循环

var e = ['你', '我', '它','她']
e.forEach(function(item){
  console.log(item)  结果:你 我 它 她
})

image-20230215103019217

  1. jQuery的循环

循环数组:第一个参数是索引值,第二个才是值。循环对象:第一个参数是键,第二个才是值

var f = ['你', '我', '它','她']
$.each(f, function (index,item){
  console.log(index)  结果是:0 1 2 3
  // console.log(item) 结果:你 我 它 她
})

var dic = {'name': 'jason', 'age':18, 'height': 180}
$.each(dic, function (index, item){
  console.log(index) 结果:name age height
})

补充

Element

Vue Element也是一个框架,是基于Vue的框架。
Vue框架是对JS的封装,并没有封装进去CSS样式。Vue Element是基于Vue的框架,它封装了CSS样式,使用Vue需要样式的话就是用它。
官网(有很多可以利用的资源):https://element.eleme.cn/#/zh-CN

image-20230215165429870

python的海象运算符

if

基础写法:

x = 3
if x < 10:
  print('hello')

海象运算符:

if x:=3 < 5:
    print('hello')

while

基础语法:

num = 3
while num:
  print(num)
  num -= 1

海象运算符写法:

num = 3
while (num:=num-1)+1:
  print(num)  # 2 1 0

用于推导式中:

image-20230215214723863

海象:

image-20230215214933945

key值的解释

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

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

数组、对象的检测与更新

对象,新增一个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>
    <div class="app">

        <h1>循环对象</h1>
        <div v-for="(value,key) in info">
            <h3>key值是:{{key}}</h3>
            <h2>value是:{{value}}</h2>
            <hr>
        </div>
        <button @click="handleAdd">点我,加数据</button>


    </div>

</div>
</body>
<script>
    var vm = new Vue({
        el: '.app',
        data: {
            info: {name: 'lqz', age: 19},
        },
        methods: {
            handleAdd() {
                // 页面会变化
                // this.info['name'] = '彭于晏'
                // 页面不会变,单是值有了
                // this.info['hobby'] = '篮球'

                // 遇到数据变了,页面没变的情况,都是用
                Vue.set(this.info, 'hobby', '篮球')

            }
        },
    })
</script>
</html>

数据添加了,页面没有显示

image-20230215183324386

对象,新增一个key:value,Vue.set(this.info,'weight',999)

image-20230215183849809

input事件

# input 的事件:
	click
    input	当输入框进行输入的时候 触发的事件
    change	当元素的值发生改变时 触发的事件
    blur	当输入框失去焦点的时候 触发的事件
    focus   当获得焦点,触发事件
<!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">
        <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">

        <h1>focus事件,鼠标已选中就触发了聚焦事件</h1>
        <input type="text" @focus="handleFocus">

    </div>

</div>
</body>
<script>
    var vm = new Vue({
        el: '.app',
        data: {},
        methods: {
            handleClick() {
                alert('点了')
            },
            handleBlur() {
                console.log('失去了')
            },
            handleInput() {
                console.log('输入了东西')
            },
            handleChange() {
                console.log('我变了')
            },
            handleFocus() {
                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/vue.js"></script>
</head>
<body>
<div>
    <div class="app">
        <h1>单向数据绑定</h1>
        <input type="text" :value="name">---->{{name}}--->单向数据绑定
        <h1>双向数据绑定</h1>
        <input type="text" v-model="age">---->{{age}}--->双向数据绑定
    </div>
</div>
</body>
<script>
    var vm = new Vue({
        el: '.app',
        data: {
            name: 'lqz',
            age:10
        },
    })
</script>
</html>

image-20230215191449765

过滤案例

分析:

首先分析过滤案例如何来实现,类似于我们在搜索引擎上打字搜东西,一打字就会有提示出现。

image-20230215191906273

实现:

那我们来模拟一下,定个数组,当搜打字搜的时候就能触发它的过滤。

<!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="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(){
        // var _this = this
        // this.newDataList = this.dataList.filter(function(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)
      }
    }
  })

  // 原型 var f = function(){ console.log('箭头函数')}
  // 箭头函数:无参数 无返回值
  // var f = () => {
  //   console.log('箭头函数')
  // }
  // f()

  // 原型
 var f = function(item){
    console.log(item)
 }

 f('wyf')
 // 箭头变形 有一个参数没有返回值
  var g = key => {
    console.log(key)
  }
  g('fhy')

  var k = (item) => {
      return item + 'wyf'
  }

  var res = k('wyf')
  console.log(res)

  var l = item => item+'wyf'

  var kk = l('wyf')
  console.log(kk)

</script>
</html>

补充1:数组的过滤方法

只有数组才有过滤filter

  var li = ['sae', 'her', 'jason', 'tony', 'sei']
  var newLi = li.filter(function (item){
  //  return false  // 结果:[] false表示不要该值 
    return true  // 结果:sae her jason ... true表示保留该值
  })
  console.log(newLi)

补充2:字符串的indexOf方法

判断子字符串是否在当前字符串中,如果在返回的是索引,如果不在返回-1

var a = 'my name is wyf'
var b = 'n'
var c = a.indexOf(b)
console.log(c) // 3 返回a字符串中对应的索引值,不存在返回-1

补充3:es6 的箭头函数写法

函数中套函数,this指向有问题,有了箭头函数,箭头函数没有自己的this,用的都是上一级的this

1.无参函数,无返回值箭头函数

  // 原型 var f = function(){ console.log('箭头函数')}
  // 箭头函数:无参数 无返回值
  var f = () => {
    console.log('箭头函数')
  }
  f()

2.有一个参数,没有返回值的箭头函数 括号可以去掉,可以加

  // 原型
 var f = function(item){
    console.log(item)
 }
 f('wyf')

 // 箭头变形 有一个参数没有返回值
  var g = key => {
    console.log(key)
  }
  g('fhy')

3.有多个参数,没有返回值的箭头函数 括号不能去掉

var f = (item, key) => {
console.log(item)
}

4.有一个参数,一个返回值

太low:
var f = (item) =>{
  return item + 'wyf'
}
var res = f('wyf')
console.log(res)  结果wyfwyf
太low:
var f = item =>{
  return item + 'wyf'
}
var res = f('wyf')
console.log(res)  结果wyfwyf
高端:
var f = item => item + 'wyf'
var res = f('wyf')
console.log(res)  结果wyfwyf

事件修饰符(了解)

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

修饰click事件
<!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">
        <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.baidu.com" @click.prevent="handleA">点我看美女</a>

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

</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.cnblogs.com'

            },
            handleClick() {
                console.log('我被点了')
            }
        }

    })
</script>
</html>

按键修饰符

按键事件:按了键盘某个键,就会触发函数的执行 @keyup='handlekeyUp'

按键修饰符:只有某个按键被按下才触发 @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>
    <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>

按键event.codekey -->按键对应的数字 event.key -->按键英文字符
image-20230215213042230
按键修饰符
image
如果传参的话
image
那要想拿到就得特指
image

表单控制

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>
    <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>

</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 @   小福福  阅读(259)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
  1. 1 原来你也在这儿 温余福
  2. 2 世间美好和你环环扣扣 温余福
  3. 3 随风起舞 温余福
  4. 4 罪恶都市 温余福
罪恶都市 - 温余福
00:00 / 00:00
An audio error has occurred, player will skip forward in 2 seconds.

作词 : 王星

作曲 : 灰鸿啊/皮皮

编曲 : 夏日入侵企画

制作人 : 邢硕

节奏吉他 : 肯尼

主音吉他 : 张伟楠

贝斯 : 皮皮

鼓 : 海鑫

和声 : 邢硕

音效制作 : 邢硕

录音 : 邢硕/夏国兴

混音 : 于昊

特别鸣谢 : 张伟楠

这城市的车流和这地表的颤抖

像一颗石子落入地心之后泛起的温柔

暗涌

河水流过转角她的楼

被梦魇

轻声呓语唤醒身后的幼兽

失效感官焦灼只剩下

麻木愚钝无从感受

共同支撑全都瓦解

只是我们现在都

已忘记到底是

谁隐藏春秋

谁在大雨之后

把旗帜插在最高的楼

过去陈旧的还在坚守

内心已腐朽

摇摇欲坠不停退后

毁灭即拯救

夏日掠夺春秋

结局无法看透

眼看这情节开始变旧

所有的城池已失守

最终无法占有

无眠辗转

伴着人间破碎的旧梦

像繁星

退却后只剩下混沌的夜空

炙热

掩盖风声鹤唳的担忧

把所有失落无助反手推入

无尽的白昼

失效感官焦灼只剩下

麻木愚钝无从感受

共同支撑全都瓦解

只是我们现在都已经忘记到底是

谁隐藏春秋

谁在大雨之后

把旗帜插在最高的楼

过去的陈旧还在坚守

内心已腐朽

摇摇欲坠不停退后

毁灭即拯救

夏日掠夺春秋

结局无法看透

眼看这情节开始变旧

所有的城池早已失守

惶恐难以接受

缠绵往复不肯放手

最终无法占有

谁隐藏春秋

谁在大雨之后

把旗帜插在最高的楼

过去的陈旧还在坚守

内心已腐朽

摇摇欲坠不停退后

毁 灭 即 拯 救

谁掠夺春秋

谁在大雨之后

把旗帜插在最高的楼

过去的陈旧还在坚守

内心已腐朽

摇摇欲坠不停退后

毁灭即拯救

夏日掠夺春秋

结局无法看透

明知城池已失守

缠绵往复不肯放手

最终无法占有

点击右上角即可分享
微信分享提示