key的性能保障,事件处理器,表单控件等介绍

最新推荐文章于 2024-05-17 14:32:46 发布

qq_46372132

最新推荐文章于 2024-05-17 14:32:46 发布

阅读量94

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_46372132/article/details/134408686

版权

4-2key设置-性能的保障

不能修改原数组的方法,如果想要修改原数组,就进行重新赋值
this.items = this.items.filter((item) => item.message.match(/Foo/))
keyCode键的值

**key设置-性能的保障**

提高性能,可以对比老的虚拟dom,一样的就留着,不一样就补上

Vue默认按照"就地更新"策略来更新通过v-for渲染的元素列表.当数据项的顺序发生改变时候,vue不会随着移动Dom元素的顺序,而是就地更新每个元素,确保他们在原本指定的索引位置上渲染

为了给vue一个提示,通常给他一个key值,作为唯一的key标识符(通常给的是id作为唯一的标识符),从而重用和重新排序现有的元素.

:key="item.id"唯一标识符
<div v-for="item in data" :key="item.id">
    
</div>

虚拟Dom

{
  type: 'div',
  props: {
    id: 'container'
  },
  children: [
    {
      type: 'span',
      props: {
        class: 'text1'
      },
      children: 'hello '
    },
    {
      type: 'span',
      props: {
        class: 'text2'
      },
      children: 'kerwin'
    },
  ]
}

真实dom

<div id="container">
  <span class="text1">hello </span>
  <span class="text2">kerwin</span>
</div>

在这里插入图片描述

4-3数组的监听

vue能够侦听响应式的数组的变更方法,并且在他们被调用时触发相关的更新.这些变更的方法包括:

pop()
push()
unshift()
shift()
splice()
sort()
reverse()

对于一些不可变的数组,比如filter,concat,slice,map,这些都不会改变原数组,但是会返回一个新数组

当遇到的是非变更方法时，我们需要将旧的数组替换为新的：

this.items = this.items.filter((item) => item.message.match(/Foo/))

4-4模糊搜索

方法一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="box">
        <input type="text" v-model="search">
        <ul>
         <template v-for="data in list">
            <li v-if="data.includes(search)">
             	{{data}}
             </li>
           </template>
        </ul>
    </div>
    <script>
        var obj={
            data() {
                return {
                    search:'',
                    list:["a","b","c","d","ad","ac","dd","fds","cf","da","vv","bb","vc","cv"]
                }
            },
        }
        var app=Vue.createApp(obj).mount('#box')
    </script>
</body>
</html>

方法二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模糊搜索</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="box">
        <input type="text" v-model="val" >
        <ul>
           <li v-for="data in test()">
               {{data}}
           </li>
        </ul>
        {{test()}}
    </div>
    <script>
        var obj={
            data() {
                return {
                    val:"",
                    list:["a","b","c","d","ad","ac","dd","fds","cf","da","vv","bb","vc","cv"]
                }
            },
        
          methods: {
                test(){
                    return this.list.filter(item=>{
                       return item.includes(this.val)
                    })
                    
                }
          },
        }
        var app=Vue.createApp(obj).mount("#box")
    </script>
</body>
</html>

5.事件处理器

5-1事件处理器

内联事件处理器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="box">
        {{count}}
        <button @click="Add(1,2,$event)">add1</button>
        <button @click="add2">add2</button>
        <button @click="count++">add3</button>
          <!-- 改变状态 -->
        <div v-if="isShow">111111</div>
        <button @click="isShow=!isShow">show/hidden</button>
    </div>
    <script>
        var obj={
            data() {
                return {
                   count:1 ,
                   isShow:true
                }
            },
            methods: {
                Add(a,b,event){
                    console.log(a,b,event.target);
                },
                add2(event){
                    console.log(event);
                }
            },
        }
        var app=Vue.createApp(obj).mount('#box')
    </script>
</body>

方法事件处理器

<button @click="test">test</button>

5-2事件修饰符-事件偷懒符

.stop(阻止冒泡)
.self(只有事件源是自己的时候,才会触发)
.prevent(阻止默认行为)
.once(就执行一次,就不执行了)
.capture
.passive

在这里插入图片描述

按键修饰符

.enter
.tab
.delete
.esc
.space
.up
.down
.left
.right

6.表单控件

6-1表单输入绑定

普通文本与多行文本

 {{myText}}
        <input type="text" v-model="myText">
        <textarea v-model="myText"></textarea>

记住用户名:使用布尔值

<h1>checkbox演示---记住用户名</h1>
        <div>
            用户名:<input type="text" v-model="username">
            <div>记住用户名:<input type="checkbox" v-model="isRem"></div>
            <button @click="login()">登录</button>
        </div>

复选框:使用数组存储

  <h1>checkbox-----多选框</h1>
    
        <div>
            vue<input type="checkbox" value="vue" v-model="selectList">
            react<input type="checkbox" value="react"  v-model="selectList">
            小程序<input type="checkbox" value="app"  v-model="selectList">
            Java<input type="checkbox" value="java"  v-model="selectList">
            <button>注册</button>
        </div>

单选框:使用字符串

 <h1>radio-----最喜欢</h1>
        <div>
            vue<input type="radio" value="vue" v-model="fav">
            react<input type="radio" value="react"  v-model="fav">
            小程序<input type="radio" value="app"  v-model="fav">
         <div>
            <button>注册</button>
         </div>

下拉列表:使用value值

<h1>select -----下拉列表</h1>
        <select v-model="select">
            <option :value="1">已完成</option>
            <option :value="2">已取消</option>
            <option :value="3">已付款</option>
        </select>

在这里插入图片描述

6-2表单修饰符

input事件,每次value改变,都会触发

change事件,失去焦点,并且内容发生改变

lazy:相当于变成了change事件

   <input type="text" v-model.lazy="myText">

2…number用户输入自动转换为数字，你可以在 v-model 后添加 .number 修饰符来管理输入：

<input v-model.number="age" />

number 修饰符会在输入框有 type="number" 时自动启用。

3.trim默认自动去除用户输入内容中两端的空格，你可以在 v-model 后添加 .trim 修饰符：

<input v-model.trim="msg" />

qq_46372132

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
key的性能保障,事件处理器,表单控件等介绍

key的性能保障,事件处理器,表单控件等介绍
复制链接

扫一扫

key的性能保障,事件处理器,表单控件等介绍

4-2key设置-性能的保障

4-3数组的监听

4-4模糊搜索

5.事件处理器

5-1事件处理器

5-2事件修饰符-事件偷懒符

6.表单控件

6-1表单输入绑定

6-2表单修饰符

“相关推荐”对你有帮助么？