VUE---学习进阶02

最新推荐文章于 2024-09-05 11:22:00 发布

置顶不断进阶学习者

最新推荐文章于 2024-09-05 11:22:00 发布

阅读量352

点赞数 2

分类专栏： VUE.js 文章标签： javascript vue.js html5

本文链接：https://blog.csdn.net/weixin_44857287/article/details/109003621

版权

VUE.js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1.表单的操作

1.1 单选框

v-model双向绑定，获取选中的value值，绑定给data中的sex，进而渲染到页面上。
注意：对于单选框来说，选中的时候，会把自己的value值赋值给变量
在这里插入图片描述

<body>
    <div id="app">
        <h3>性别:</h3>
        <input type="radio"  v-model='sex' value="男">男
        <input type="radio"  v-model='sex' value="女">女
        {{sex}}
    </div>
</body>
<script src="./vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            sex:'',
        },
    })
</script>
</html>

1.2复选框

复选框和单选框原理相同，但是复选框需要使用数组接收。这里的代码会在页面上显示数组。
注意: 对于多选框来说,如果初始值是数组，则会把数据之间放到数组中，如果非数组类型，则会以布尔值展示结果
在这里插入图片描述

<body>
    <div id="app">
        <h3>爱好:</h3>
        <input type="checkbox" value="唱歌" v-model='hobby'>唱歌
        <input type="checkbox" value="跳舞" v-model='hobby'>跳舞
        <input type="checkbox" value="篮球" v-model='hobby'>篮球
        <input type="checkbox" value="rap"  v-model='hobby'>rap
        您的爱好是:{{hobby}}
    </div>
</body>
<script src="./vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            hobby:[]
        },

    })
</script>
</html>

1.3下拉单选

这里是下拉单选，data中用字符串接收即可。v-model要写在select中，进行数据双向绑定。效果图如下：
注意：对于下拉菜单来说，option中间的内容是给用户看的，我们是通过value获取我们需要的值给变量

<body>
    <div id="app">
        <h3>爱好:</h3>
       <select v-model='hobby'> 
            <option value="" disabled>请选择</option>
            <option value="唱歌">唱歌</option>
           <option value="跳舞">跳舞</option>
           <option value="打篮球">打篮球</option>
       </select>
        您的爱好是:{{hobby}}
    </div>
</body>
<script src="./vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            hobby:''
        },
        methods: {
            
        },
    })
</script>
</html>

1.4下拉多选

这里data中的数据格式可以用数组[],也可以用字符串"".会自动以数组形式显示。如图：
下拉多选

<body>
    <div id="app">
        <h3>爱好:</h3>
        <select multiple v-model='hobby'>
            <option value="唱歌">唱歌</option>
            <option value="跳舞">跳舞</option>
            <option value="打篮球">打篮球</option>
        </select>
        您的爱好是:{{hobby}}
       
    </div>
</body>
<script src="./vue.js"></script>
<script>
    // 1.表单操作
    // 2.修饰符
    // 3.vue生命周期
    new Vue({
        el: '#app',
        data: {
            hobby: "",
        },
        methods: {

        },
    })
</script>

</html>

1.5表单操作的简单案例

这里实现的是人员的添加，包括姓名、性别、爱好等。包括两次密码的验证，以及是否同意协约。

<body>
    <div id="app">
        <h2>添加学员</h2>
        <span>姓名</span> <input type="text" v-model='user.name'>
        <br>

        <span>性别</span> <input type="radio" v-model='user.sex' value="男">男<input type="radio" v-model='user.sex' value="女">女
        <br>
        <span>电话</span> <input type="text" v-model='user.tel'>
        <br>
        <span>密码</span> <input type="text" v-model='user.pwd'>
        <br>
        <span>确认密码</span> <input type="text" v-model='user.pass'>
        <br>
        <span>专业</span>
        <!-- 对于下拉菜单来说，option中间的内容是给用户看的，我们是通过value获取我们需要的值给变量 -->
        <select v-model='user.job'>          
            <option value="web工程师">web工程师</option>
            <option value="java工程师">java工程师</option>
            <option value="c++">c++</option>
        </select>
        <br>
        <span>爱好</span>
       <!-- 对于多选框来说,如果初始值是数组，则会把数据之间放到数组中，如果非数组类型，则会以布尔值展示结果 -->
       <input type="checkbox" value="唱歌" v-model='user.hobby'>唱歌
       <input type="checkbox" value="跳舞" v-model='user.hobby'>跳舞
       <input type="checkbox" value="打游戏" v-model='user.hobby'>打游戏
       <input type="checkbox" value="写代码" v-model='user.hobby'>写代码
       <br>
       <span>证书</span>
       <select v-model='user.zs' multiple>          
        <option value="计算机二级">计算机二级</option>
        <option value="英语四级">英语四级</option>
        <option value="英语六级">英语六级</option>
    </select>
    <br>
    <span>备注:</span>
    <textarea  cols="30" rows="10" v-model='user.text'></textarea>
    <br>
    <input type="checkbox" v-model='user.check'>我同意
    <br>
    <input type="submit" value="提交" @click = 'submit' :disabled='!user.check'>
    </div>
</body>
<script src="./vue.js"></script>
<script>
    let vm = new Vue({
        el:'#app',
        data:{
            user:{
                name:'zs',
                sex:'女',
                tel:'1111',
                pwd:'123',
                pass:'',
                job:'web工程师',
                hobby:['唱歌','跳舞'],
                zs:'',
                text:'哈哈',
                check:true
            }
        },
        methods: {
            submit(){
                if(this.user.pwd!=this.user.pass){
                    alert('两次输入的密码不一致')
                    return
                }
                console.log('发请求')
            }
        },
    })
</script>
</html>

2.v-for中key的使用

key的作用是：当添加一项时，会选中原先选中的那一项

注意：
1.:key的取值必须是number类型或者是string类型，不能是对象
2.v-for循环中的唯一值，只要使用循环就必须添加

<body>
    <div id="app">
        <ul>
           
            <li v-for='(item,index) in arr' :key='item.id'><input type="checkbox">{{item.name}}----{{item.id}}-------{{index}}</li>
        </ul>
        <button @click='add'>添加</button>
    </div>
</body>
<script src="./vue.js"></script>
<script>
    let vm = new Vue({
        el:'#app',
        data:{
            arr:[
                {
                    id:1,
                    name:'丁',
                },
                {
                    id:2,
                    name:'韩',
                },
                {
                    id:3,
                    name:'刘',
                },
                {
                    id:4,
                    name:'杨,
                }
            ]
        },
        methods: {
            add(){
                const newArr = { id:5,name:'高'}
                this.arr.splice(2,0,newArr)
            }
        },
    })
</script>
</html>

3.事件修饰符

事件修饰符包括：.stop(阻止冒泡) .prevent(阻止默认行为)
.self(触发本身) .once(只能触发一次) .capture(事件捕获)

3.1.stop(阻止冒泡)

使用: @click.stop=‘inner’
阻止默认冒泡行为

    <style>
        .outer{
            width: 300px;
            height: 300px;
            background: red;
        }
        .inner{
            width: 100px;
            height: 100px;
            background: green;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="outer" @click = 'outer'>
            我是父盒子
            <div class="inner" @click.stop='inner'>我是子盒子</div>
        </div>
    </div>
</body>
<script src="./vue.js"></script>
<script>
    let vm = new Vue({
        el:'#app',
        data:{
           
        },
        methods: {
            outer(){
                console.log('我是父盒子');
            },
            inner(){
                console.log('我是子盒子');
            }
        },
    })
</script>
</html>

3.2.prevent(阻止默认行为)

这里是阻止a标签的跳转
使用：@click.prevent = ‘skip’

</head>
<body>
    <div id="app">
       <a href="http://baidu.com"  @click.prevent = 'skip'>点我就是不跳转</a>
    </div>
</body>
<script src="./vue.js"></script>
<script>
    let vm = new Vue({
        el:'#app',
        data:{
           
        },
        methods: {
            skip(){             
                console.log('阻止了')
            }
        },
    })
</script>
</html>

3.3.self(触发本身)

注意：.self 触发自己的方法，但是本身一旦有点击操作依然会有冒泡此案例中，点击inner的时候会触发inner和box而不会触发outer
使用：@click.self=‘outer’

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            background: red;
        }
        .outer{
            width: 200px;
            height: 200px;
            background: green;
        }
        .inner{
            width: 100px;
            height: 100px;
            background: yellow;
        }
    </style>
</head>
<body>
    <div id="app">
       
      <div class="box" @click='box'>
          我是爷爷
          <div class="outer"  @click.self='outer'>
              我是父亲
              <div class="inner"  @click='inner'>我是孩子</div>
          </div>
      </div>
    </div>
</body>
<script src="./vue.js"></script>
<script>
    let vm = new Vue({
        el:'#app',
        data:{
           
        },
        methods: {
            box(){             
                console.log('我是爷爷')
            },
            outer(){             
                console.log('我是父亲')
            },
            inner(){             
                console.log('我是孩子')
            }
        },
    })
</script>
</html>

3.4 .once(只能触发一次)

绑定元素只能触发一次
使用：@click.once=‘inner’

    <style>
        .box{
            width: 300px;
            height: 300px;
            background: red;
        }
        .outer{
            width: 200px;
            height: 200px;
            background: green;
        }
        .inner{
            width: 100px;
            height: 100px;
            background: yellow;
        }
    </style>
</head>
<body>
    <div id="app">
       
      <div class="box" @click='box'>
          我是爷爷
          <div class="outer"  @click.self='outer'>
              我是父亲
              <div class="inner"  @click.once='inner'>我是孩子</div>
          </div>
      </div>
    </div>
</body>
<script src="./vue.js"></script>
<script>
    let vm = new Vue({
        el:'#app',
        data:{
           
        },
        methods: {
            box(){             
                console.log('我是爷爷')
            },
            outer(){             
                console.log('我是父亲')
            },
            inner(){             
                console.log('我是孩子')
            }
        },
    })
</script>
</html>

3.5.capture(事件捕获)

事件捕获：从外向里
注意：给谁加.capture谁先出来
使用：@click.capture=‘outer’

    <style>
        .box{
            width: 300px;
            height: 300px;
            background: red;
        }
        .outer{
            width: 200px;
            height: 200px;
            background: green;
        }
        .inner{
            width: 100px;
            height: 100px;
            background: yellow;
        }
    </style>
</head>
<body>
    <div id="app">
       
      <div class="box" @click.capture='box'>
          我是爷爷
          <div class="outer"  @click.capture='outer'>
              我是父亲
              <div class="inner"  @click.capture='inner'>我是孩子</div>
          </div>
      </div>
      <div class="box" @click='box'>
        我是爷爷
        <div class="outer"  @click.capture='outer'>
            我是父亲
            <div class="inner"  @click='inner'>我是孩子</div>
        </div>
    </div>
    </div>
</body>
<script src="./vue.js"></script>
<script>
    let vm = new Vue({
        el:'#app',
        data:{
           
        },
        methods: {
            box(){             
                console.log('我是爷爷')
            },
            outer(){             
                console.log('我是父亲')
            },
            inner(){             
                console.log('我是孩子')
            }
        },
    })
</script>
</html>

4.其他修饰符

修饰符包括：键盘修饰符鼠标修饰符表单修饰符

4.1键盘修饰符

使用：@keydown.up = ‘up’
常用的键盘修饰符：
.enter
.tab
.delete('删除’或’退格’键)
.esc
.space
.up
.down
.left
.right

<body>
    <div id="app">
        <input type="text"  @keydown.up="up" placeholder="向上" v-model ="up1">{{up1}}<br>
        <input type="text"  @keydown.down="down" placeholder="向下" v-model ="down1">{{down1}}<br>
        <input type="text"  @keydown.left="left" placeholder="向左" v-model ="left1">{{left1}}<br>
        <input type="text"  @keydown.right="right" placeholder="向右" v-model ="right1">{{right1}}<br>
        <input type="text"  @keydown.enter="enter" placeholder="回车" v-model ="enter1">{{enter1}}
    </div>
</body>
<script src="../vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            left1:"",
            right1:"",
            up1:"",
            down1:"",
            enter1:"",
        },
        methods:{
            up(){
                this.up1 = "向上"
            },
            down(){
                this.down1 = "向下"
            },
            left(){
                this.left1 = "向左"
            },
            right(){
                this.right1 = "向右"
            },
            enter(){
                this.enter1 = "回车"
            },
        }
    })
</script>
</html>

4.2鼠标修饰符

用法：@click.left = ‘left’

<body>
    <div id="app">
        <input type="text"  @click.right="right" placeholder="右键" v-model ="right1">{{right1}}<br>
        <input type="text"  @click.middle="middle" placeholder="滚轮" v-model ="middle1">{{middle1}}<br>
        <input type="text"  @click.left="left" placeholder="左键" v-model ="left1">{{left1}}
    </div>
</body>
<script src="../vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            left1:"",
            right1:"",
            middle1:""
        },
        methods:{
           
            left(){
                this.left1 = "左键"
            },
            right(){
                this.right1 = "邮件"
            },
            middle(){
                this.middle1 = "滚轮"
            },
        }
    })
</script>
</html>

4.3表单修饰符

v-model.lazy = “name” （鼠标再输入框移走之后才会显示更新的内容）
v-model.number = “num”（number 强制转换为数字类型第一个必须为数字）
v-model.trim = “content”（去除首位空格）

<body>
    <div id="app">
      
        <input type="text" v-model.lazy = "name">{{name}}
        
        <input type="text" v-model.number = "num" placeholder="请输入数字">{{num}}
      
        <input type="text" v-model.trim = "content">{{content}}
    </div>
</body>
<script src="../vue.js"></script>
<script>
   let vm = new Vue({
        el:"#app",
        data:{
            name:"",
            num:"",
            content:""
        }
    })
</script>
</html>

5.生命周期

生命周期函数即钩子函数共包括8个
1、beforeCreate():创建之前，el,data,methods都为undefined
2、created()：创建完成，data,methods初始化完成，el为undefined
3、beforeMount()：挂载之前，el为挂在元素，{{}}依然存在
4、mounted()：挂在完成，页面完成
5、beforeUpdate()：更新之前效果与update相同
6、update()：更新完成
7、beforeDestroy()：销毁之前
8、destroy()：销毁完成

生命周期图片
生命周期流程图

<body>
    <button>销毁</button>
    <div id="app">
        {{msg}}
        <div @click='add'>点击</div>
    </div>
</body>
<script src="./vue.js"></script>
<script>
    let vm = new Vue({
        el:'#app',
        data:{
            msg:'hello world!'
        },
        methods: {
           add(){
               console.log('我是vm方法');
           }
        },
        // 创建之前  什么都是undefined
        beforeCreate() {
            console.log('el:',this.$el);
            console.log('data:',this.$data);
        },
        // 创建完成， vue实例化初始化完成，但是el还是undefined
        created() {
            console.log('el:',this.$el);
            console.log('data:',this.$data);
        },
        // 挂载之前  已经找到挂载点，但是数据还未渲染 此时的el是div元素
        beforeMount() {
            console.log('挂载之前')
            console.log('el:',this.$el);
            console.log('data:',this.$data);
        },
        //挂载完成 数据加载完成
        mounted() {
            console.log('挂载完成')
            console.log('el:',this.$el);
            console.log('data:',this.$data);
        },
        // 更新之前  和更新之后的数据都是最新数据
        beforeUpdate() {
            console.log('更新之前')
            console.log('el:',this.$el);
            console.log('data:',this.$data);
        },
        // 更新完成
        updated() {
            console.log('更新完成')
            console.log('el:',this.$el);
            console.log('data:',this.$data);
        },
        // 销毁之前
        beforeDestroy() {
            console.log('销毁之前')
        },
        // 销毁完成
        destroyed() {
            console.log('销毁完成')
        },

    })
    // vm.$mount('#app')
    document.querySelector('button').onclick = function(){
        vm.$destroy()
    }
</script>
</html>

6. 案例

案例一：字符串反转

点击反转字符串反向输出

反转之前，再次点击反转会反转为下图

反转之后：

<body>
    <div id="app">
        <input type="text" v-model = "msg">
        {{msg}}
        <button @click = "reserve">点击反转</button>
    </div>
</body>
<script src="../vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            msg:"肖123"
        },
        methods:{
            reserve(){
               this.msg =  this.msg.split("").reverse().join("");
            }
        }
    })
</script>
</html>

案例二：表单数据的添加与删除

表单数据的添加与删除

<body>
    <div id="app" style="margin:0 auto;width: 400px; height: 500px;">
        <h2>添加</h2>
        <div style="margin:0 auto;width: 200px; height: 130px;">
            
            <span>姓名: </span><input type="text" v-model="name"><br><br>
            <span>年龄: </span><input type="text" v-model="age"><br><br>
            <button @click="add">添加</button>
            <button @click="reset">重置</button>
            
        </div>
        <h2>信息表</h2>
        <table border="1" cellpadding="0" cellspacing="0"
            style="border-collapse: collapse; width: 500px; text-align: center;">
            <tr style="height: 30px;">
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>操作</th>
            </tr>
            <tr style="height: 30px;" v-for="(item,index) in arr">
                <td>{{index+1}}</td>
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
                <td>
                    <button @click="delNum(index)">删除</button>
                </td>
            </tr>
            <tr style="height: 30px;" v-if="arr.length>0">
                <td colspan="4">
                    <button @click="del">全部删除</button>
                </td>
            </tr>
            <tr style="height: 30px;" v-else="">
                <td colspan="4">暂无数据</td>
            </tr>
        </table>
    </div>
</body>
<script src="../vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            name: "",
            age: "",
            arr: [
                {
                    id: 1,
                    name: "赵",
                    age: "18"
                }, {
                    id: 2,
                    name: "钱",
                    age: "18"
                },
                {
                    id: 3,
                    name: "孙",
                    age: "18"
                },
                {
                    id: 4,
                    name: "李",
                    age: "18"
                }
            ]
        },
        methods: {
            add() {
                if(this.name===""||this.age ===""){
                    alert("请输入准确的数据");
                    return;
                }
                this.arr.push({
                    name: this.name,
                    age: this.age
                })
                this.reset();
            },
            reset() {
                this.name = "",
                    this.age = ""
            },
            del() {
                this.arr = []
            },
            delNum(index) {
                this.arr.splice(index, 1)
            }
        }

    })
</script>

</html>