表单输入-事件绑定-生命周期

最新推荐文章于 2023-04-19 14:23:03 发布

琴～～

最新推荐文章于 2023-04-19 14:23:03 发布

阅读量354

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/yangyanqin2545/article/details/114295350

版权

1.表单+表格案例

https://www.bootcss.com/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 将bootstrap.css引入 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- 1.引入vue.js -->
    <script src="./vue.js"></script>
</head>
<body>
    <!-- 2.作用域 -->
    <div id="app" class="container">
        <h1 class="text-center">添加用户信息</h1>
        <div>
            用户名: <input type="text" v-model="name" class="form-control" />
        </div>
        <div>
            年 龄: <input type="text" v-model="age" class="form-control"/>
        </div>
        <div>
            <button @click="add()" class="btn btn-info">添加</button>
            <button @click="unset()" class="btn btn-danger">重置</button>
        </div>
        <hr>
        <h1 class="text-center">用户信息列表</h1>
        <table border="1" width="500" style="border-collapse: collapse;" class="table table-bordered table-hover">
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>操作</th>
            </tr>
            <tr v-for="(item,index) in user">
                <td>{{index+1}}</td>
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
                <td>
                    <button @click="del(index)" class="btn btn-info">删除</button>
                </td>
            </tr>
            <tr v-if="user.length===0">
                <td colspan="4">暂无数据</td>
            </tr>
            <tr>
                <td colspan="4">
                    <button @click="delAll()" class="btn btn-info">全部删除</button>
                </td>
            </tr>
        </table>
    </div>
    <script>
        // 3.实例化vue
        new Vue({
            el:'#app',
            // 数据
            data:{
                name:'',
                age:'',
                user:[
                    {
                        name:'甜也',
                        age:18,
                    },
                    {
                        name:'兰鹏',
                        age:28,
                    }
                ]
            },
            // 方法
            methods:{
                // 添加
                add(){
                    // 将用户信息存入到this.user
                    this.user.push({
                        name:this.name,
                        age:this.age
                    })
                    this.unset()
                },
                // 重置
                unset(){
                    this.name = '';
                    this.age = '';
                },
                // 删除
                del(index){
                    this.user.splice(index,1)
                },
                // 全部删除
                delAll(){
                    this.user = [];
                }
            }
        })
    </script>
</body>
</html>

2.class动态样式

:class=“变量”
:class=“三元运算符”

:class="{类名1:ture,类名2:false,类名3:false}"

当样式超过2个以上显示时,需要使用{},类名的值为true时,样式显示,为false时隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1.引入vue.js -->
    <script src="./vue.js"></script>
    <style>
        .red{
            background: red;
        }
        .lime{
            color: lime;
        }
        .blue{
            background: blue;
        }
        .grey{
            background: grey;
        }
    </style>
</head>
<body>
    <!-- 2.作用域 -->
    <div id="app">
        <!-- 动态样式1:   :class="变量" -->
        <h1 :class="classN">蒹葭苍苍</h1>
        <button @click="changeBlue()">变蓝</button>
        <button @click="changeGrey()">变灰</button>
        <hr>
        <!-- 动态样式2 :class="三元运算符" -->
        <h2 :class="isShow ? 'blue lime' : 'grey lime'">白露为霜</h2>
        <ul>
            <li v-for="(item,index) of arr" :class="index%2==0 ? 'blue lime' : 'grey lime'">{{item}}</li>
        </ul>
        <hr>
        <!-- 动态样式3 :class="{类名1:ture,类名2:false,类名3:false}"-->
        <div :class="{red:false,blue:true,lime:true}">小荷才露尖尖角</div>
        <ul>
            <li v-for="(item,index) in arr" :class="{red:index%3===0,grey:index%3===1,blue:index%3===2}">
                {{item}}
            </li>
        </ul>
    </div>
    <script>
        // 3.实例化vue
        new Vue({
            el:'#app',
            // 数据
            data:{
                classN:'red lime',
                isShow:true,
                arr:['科比','詹姆斯','乔丹','姚明','易建联','刘劲']
            },
            // 方法
            methods:{
                changeBlue(){
                    this.classN = 'blue lime';
                },
                changeGrey(){
                    this.classN = 'grey lime';
                }
            }
        })
    </script>
</body>
</html>

3.style样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1.引入vue.js -->
    <script src="./vue.js"></script>
    <style>
        .box{
            width:100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <!-- 2.作用域 -->
    <div id="app">
        <!-- 静态样式 -->
       <div style="background: red;color:green;">静态样式</div>
       <hr>
       <!-- 动态样式 -->
       <div :style="{background: 'red',color:'green'}">动态样式</div>
       <!-- 动态样式变形 -->
       <div class="box" :style="styleN">动态样式变形</div>

        <hr>
        <ul>
            <li v-for="(item,index) of arr" :style="{background:item.color}">
                <p>{{item.name}}</p>
                <p>{{item.url}}</p>
            </li>
        </ul>
    </div>
    <script>
        // 3.实例化vue
        new Vue({
            el:'#app',
            // 数据
            data:{
                styleN:{
                    backgroundColor:'orange',
                    color:'green',
                },
                arr:[
                    {
                        name:'京东',
                        url:'http://www.jd.com',
                        color:'green'
                    },
                    {
                        name:'天猫',
                        url:'http://www.tmall.com',
                        color:'yellow'
                    },
                ]
            },
            // 方法
            methods:{

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

4.双for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1.引入vue.js -->
    <script src="./vue.js"></script>
</head>
<body>
    <!-- 2.作用域 -->
    <div id="app">
        <ul>
            <li v-for="(item,index) in movies">
                <p>{{item.title}}</p>
                <p>{{item.direc}}</p>
                
                <span v-for="(i,index) in item.act">{{i}}&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
                <span v-for="(i,index) in item.type">{{i}}&nbsp;&nbsp;&nbsp;&nbsp;</span>
            </li>
        </ul>
    </div>
    <script>
        // 3.实例化vue
        new Vue({
            el:'#app',
            // 数据
            data:{
                movies:[
                    {
                        title:'你好,李焕英',
                        direc:'贾玲',
                        act:['贾玲','沈腾','张小斐','陈赫'],
                        type:['喜剧','回忆']
                    },
                    {
                        title:'唐3',
                        direc:'陈思诚',
                        act:['王宝强','刘昊然','肖央'],
                        type:['喜剧','悬疑']
                    },
                    {
                        title:'刺杀小说家',
                        direc:'路阳',
                        act:['杨幂','雷佳音','郭金飞'],
                        type:['奇幻','冒险']
                    }
                ]
            },
            // 方法
            methods:{

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

5.key

在数组遍历时,需要绑定一个key,当元素改变时,虚拟DOM通过唯一的KEY进行判断修改了哪些元素,修改完成之后,再跟真实的DOM进行对比.将产生差异的部分通过浏览器修改即可,相同的部分不做修改.
注意:key值可以是number或者string类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1.引入vue.js -->
    <script src="./vue.js"></script>
</head>
<body>
    <!-- 2.作用域 -->
    <div id="app">
        <ul>
            <li v-for="(item,index) in stars" :key="item.name">
                <span>{{item.name}}</span>
                <button @click="del(index)">删除</button>
            </li>
        </ul>
    </div>
    <script>
        // 3.实例化vue
        new Vue({
            el:'#app',
            // 数据
            data:{
                stars:[
                    {
                        id:1,
                        name:'张小斐'
                    },
                    {
                        id:2,
                        name:'陈赫'
                    },
                    {
                        id:3,
                        name:'郑凯'
                    },
                    {
                        id:4,
                        name:'包贝尔'
                    }
                ]
            },
            // 方法
            methods:{
                del(index){
                    this.stars.splice(index,1)
                }
            }
        })
    </script>
</body>
</html>

1.表单绑定

1-1.v-model指令

 1.v-model:做数据双向绑定
 2.文本输入框:v-model绑定输入框的值   value不起任何作用
 3.单选框:
 a.默认值:  v-model绑定的初始值===value的值时,为默认值
 b.没有value属性时.表单提交传递的结果是null,
 c.有value属性时,表单提交传递的结果是对应的value值
 4.复选框:
 a.默认值: v-model绑定的初始值===value的值时,为默认值
 b.没有value属性时表单提交传递的结果是一个错误的array(包含null值)
 c.有value属性时,表单提交传递的结果是对应的多个value值
 5.下拉框:
 a.默认值:
 v-model是绑定在select标签上
 v-model绑定的初始值===value的值时,为默认值
 b.没有value属性时表单提交传递的结果是一个''
 c.有value属性时,表单提交传递的结果是对应的value值
 6.文本域:v-model绑定输入框的值   value不起任何作用

1-2.表单修饰符

lazy失去焦点时,获取数据

<div>name:{{user.username}}</div>
<div>
用户名: <input type="text" v-model.lazy="user.username" value="root" />
</div>

number将数据类型修改为number

<div>price:{{user.username}}</div>
<div>
用户名: <input type="text" v-model.number="user.username" value="root" />
</div>

trim去掉字符串两边的空格

<div>trim:{{user.username}}</div>
<div>
用户名: <input type="text" v-model.trim="user.username" value="root" />
</div>

2.事件绑定

2-1.绑定事件

绑定事件v-on

事件绑定:
1.v-on:事件名称="函数"
2.@事件名称="函数"

参数传递

事件传参
1.没有参数时,()可以省略
2.有参数时,()不可以省略

获取event对象

3.获取事件对象,函数调用时如果有其他参数,需要传递一个$event,如果没有其他参数,则无需传递$event,在形参中直接获取event对象即可.

阻止默认事件preventDefault

 <!-- 阻止默认事件 -->
<div @contextmenu="menu" class="box"></div>
menu(e){
     // 使用事件源阻止默认对象
     e.preventDefault()
     console.log(111);
 }

阻止事件传播stopPropagation

<!-- 阻止事件传播 -->
<div class="outer" @click="outer">
	<div class="inner" @click="inner">
	
	</div>	
</div>
inner(e){
     // 使用事件对象源event阻止事件传播
     e.stopPropagation()
     console.log('inner');
 }

2-2. 事件修饰符

执行一次once

<button @click.once="add">按钮</button>
add(){
	console.log('只执行一次');
}

阻止默认事件prevent

 <!-- prevent阻止默认事件 -->
        <button @contextmenu.prevent="add1">阻止默认事件</button>
        <textarea @keydown.enter.prevent="enter" id="" cols="30" rows="10"></textarea>
 add1(){
     console.log('阻止默认事件');
 },
     enter(){
         console.log('回车了');
     }

阻止事件传播stop

<!-- stop阻止事件传播 -->
        <div class="outer" @click="outer">
            <div class="inner" @click.stop="inner"></div>
        </div>
outer(){
    console.log('outer');
},
    inner(){
        console.log('inner');
    }

是自己才触发self

<!-- 案例 -->
        <button @click="isShow = true">删除</button>
        <div class="main" v-if="isShow" @click.self="isShow=false">
            <div class="con">
                <h2>确定要删除吗?</h2>
                <div>
                    <button class="btn" @click="confirm">确定</button>
                    <button class="btn" @click="isShow=false">取消</button>
                </div>
            </div>
        </div>

捕获capture

<!-- capture捕获改变触发事件的顺序 -->
<div class="outer" @click.capture="outer1">
    <div class="inner" @click="inner1"></div>
</div>

2-3.键盘事件

<!-- 键盘事件 -->
        <input type="text" @keydown.enter="enter" @keydown.13="enter" @keydown.left="left" @keydown.right="right" @keydown.up="up" @keydown.down="down">

3.生命周期

3-1.定义

从开始到结束(死亡)的过程就是生命周期

钩子函数:在某事某刻自动被触发的函数就是钩子函数

3-2.钩子函数

1.beforeCreate:创建之前:所有的都是undefined
2.created创建完成:el还是undefined,此时数据已经存在
3.beforeMount挂载之前:找到挂载点,但是数据还没有被解析
4.mounted挂载完成:找到挂载点,数据被解析,渲染页面完成.到此处就可以开发轮播图,计时器.延时器.发我ajax请求/.
5.beforeUpdate更新之前:数据已经是最新的,此处指的是页面再次渲染之前.
6.updated更新完成:数据已经是最新的,此处指的是页面再次渲染完成.
7.beforeDestroy销毁之前:
8.destroyed销毁完成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1.引入vue.js -->
    <script src="./vue.js"></script>
</head>
<body>
    <!-- 2.作用域 -->
    <div id="app">
        <div>{{name}}</div>
        <input type="text" v-model="name">
        <button>销毁</button>
    </div>
    <script>
        // 3.实例化vue
        const vm = new Vue({
            el:'#app',
            // 数据
            data:{
                name:'赵丽颖'
            },
            // 方法
            methods:{

            },
            // 生命周期:就是一堆函数
            // 1.创建之前:所有的都是undefined
            beforeCreate(){
                console.group("==创建之前==")
                console.log(this.$el);
                console.log(this.$data);
                console.log(this.name);
                console.groupEnd()
            },
            // 2.创建完成:el还是undefined,此时数据已经存在
            created(){
                console.group("==创建完成==")
                console.log(this.$el);
                console.log(this.$data);
                console.log(this.name);
                console.groupEnd()
            },
            // 3.挂载之前:找到挂载点,但是数据还没有被解析
            beforeMount(){
                console.group("==挂载之前==")
                console.log(this.$el);
                console.log(this.$data);
                console.log(this.name);
                console.groupEnd()
            },
            // 4.挂载完成:找到挂载点,数据被解析,渲染页面完成.
            // 到此处就可以开发轮播图,计时器.延时器.发我ajax请求/.
            mounted(){
                console.group("==挂载完成==")
                console.log(this.$el);
                console.log(this.$data);
                console.log(this.name);
                console.groupEnd()
            },
            // 5.更新之前:数据已经是最新的,此处指的是页面再次渲染之前.
            beforeUpdate(){
                console.group("==更新之前==")
                console.log(this.$data);
                console.log(this.name);
                console.groupEnd()
            },
            // 5.更新完成:数据已经是最新的,此处指的是页面再次渲染完成.
            updated(){
                console.group("==更新完成==")
                console.log(this.$data);
                console.log(this.name);
                console.groupEnd()
            },
            // 销毁之前:
            beforeDestroy(){
                console.group("==销毁之前==")
                console.groupEnd()
            },
            // 销毁之后
            destroyed(){
                console.group("==销毁完成==")
                console.groupEnd()
            },
        })
        document.querySelector('button').onclick = function(){
            vm.$destroy()
           
        }
    </script>
</body>
</html>

面试题

1.常用的事件修饰符都有哪些？分别说明它们的作用。
.prevent .stop .capture .up .down .enter .13 .left .right
2.什么是Vue的生命周期？
	Vue生命周期是指vue实例对象从创建之初到销毁的过程，vue所有功能的实现都是围绕其生命周期进行的，在生命周		期的不同阶段调用对应的钩子函数可以实现组件数据管理和DOM渲染两大重要功能
3.解析Vue生命周期中各个钩子函数分别在什么场景下执行。

琴～～

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表单输入-事件绑定-生命周期

1.表单+表格案例https://www.bootcss.com/<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-
复制链接

扫一扫