后端程序员的前端必备【Vue】 - 03 Vue属性绑定和事件绑定

yinying293

已于 2023-05-02 00:03:42 修改

阅读量855

点赞数 2

分类专栏：后端程序员的前端路线 Java # 框架演进文章标签： vue.js 前端 javascript java

于 2023-05-01 14:28:03 首次发布

本文链接：https://blog.csdn.net/yinying293/article/details/130455874

版权

Java 同时被 3 个专栏收录

73 篇文章 1 订阅

订阅专栏

框架演进

49 篇文章 0 订阅

订阅专栏

后端程序员的前端路线

14 篇文章 0 订阅

订阅专栏

1 Vue属性绑定

1.1 v-bind标签

插值表达式是不能写在html的标签的属性内的。如果要用vue中的属性作为html标签的属性的内容，就可以通过v-bind进行属性绑定

v-bind:
:

<div id="app">
    <input name="username" type="text" v-bind:value="username">
    <!-- 简写 -->
    <input name="username" type="text" :value="username">
    <a :href="url">点击百度</a>
    
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            username:"admin",
            url:'http://www.baidu.com'
        }
    })
</script>

1.2 v-model标签

通过v-model将标签的value值与vue对象中的data属性值进行双向绑定。

<div id="app">
    <!-- <input name="keywords" type="text" v-model:value="keywords"> -->
    <!-- 简写 -->
    <input name="keywords" type="text" v-model="keywords">
    {{keywords}}
</div>
<script>
    new Vue({
        el: "#app",
        data: {            
            keywords:"默认值",            
        }
    })
</script>

1.3 案例

动态表格效果：

1、通过表单添加数据，渲染到列表中。
2、遍历数组和对象，并能删除和更新

<!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>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        id: <input type="text" v-model='id'> 
        用户名：<input type="text" v-model='name'>
        年龄：<input type="text" v-model='age'>
        <button @click="addUser">添加</button>
        <table width="45%"  cellpadding='0px' cellspacing=0 border="1px">
            <tr>
                <th>id</th>
                <th>用户名</th>
                <th>年龄</th>
                <th>操作</th>
            </tr>
            <tr v-for="user,index in users" :key='user.id'>
                <td>{{user.id}}</td>
                <td>{{user.name}}</td>
                <td>{{user.age}}</td>
                <td><button @click="delUser(index)">删除</button></td>
            </tr>
        </table>          
    </div>
    <script>
        new Vue({
            el:"#app",
            data(){
                return {
                    id:'',
                    name:'',
                    age:'',
                    users:[]
                }
            },
            methods:{
                addUser:function(){
                    let id = this.id;
                    let name = this.name;
                    let age = this.age;
                    this.users.push({id,name,age})
                },
                delUser:function(index){
                    //从数组中移除元素  参数1：下标  参数2：
                    this.users.splice(index,1);     
                }
            }
        })
    </script>
</body>
</html>

2 Vue事件绑定

通过配合具体的事件名，来绑定vue中定义的函数

2.1 事件绑定

v-on:
@

<div id="app">
    <!-- <button v-on:click="f1">点击按钮触发事件</button> -->
    <!-- 另一种写法 -->
    <button @click="f1()">点击按钮触发事件</button>

    <!-- 其他事件监听 -->
    <input type="f2" v-on:blur="changed">
    <select @change="f3">
        <option>武汉</option>
        <option>北京</option>
        <option>上海</option>
    </select>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
        },
        methods:{
            f1:function(){
                alert("vue点击事件绑定");
            },
            f2:function(){
                alert("输入框失去焦点");
            },
            f3:function(){
                alert("下拉框内容改变");
            }
        }
    })
</script>

2.2 参数传递

event表示事件对象 event.srcElement.dataset表示当前元素上绑定的数据集合

2.2.1 使用JS函数传值

<div id="app">        
    <button @click="update(id,name)">修改</button>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            id:1,
            name:'admin'
        },
        methods:{                
            update:function(id,name){
                console.log(id);
                console.log(name);
            }

        }
    })
</script>

2.2.2 使用dataset传值

<div id="app">  
    <button @click="add" :data-id="id" :data-name="name">添加</button>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            id:1,
            name:'admin'
        },
        methods:{
            add:function(event){
                //event表示事件对象   event.srcElement.dataset表示当前元素上绑定的数据集合
                console.log(event.srcElement.dataset.id);
                console.log(event.srcElement.dataset.name);
            }
        }
    })
</script>

2.2.3 两者结合使用

$event：表示当前元素对象

<div id="app">
    <button @click="select(id,$event)" :data-name="name">查询</button>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            id:1,
            name:'admin'
        },
        methods:{            
            select:function(id,event){
                console.log(id);
                console.log(event.srcElement.dataset.name);
            }
        }
    })
</script>

2.3 事件修饰符

.prevent 消除元素的默认事件

.stop 阻止事件冒泡（阻止子标签向上冒泡）

.self 设置只能自己触发事件（子标签不能触发）

.once 限定事件只触发一次

<div id="app">
    <div style="width: 300px; height: 300px;background-color: blueviolet;" @click.self="d1">
        <div style="width: 200px; height: 200px;background-color: brown;" @click="d2">
            <div style="width: 100px; height: 100px;background-color: cadetblue;" @click.stop="d3">
            </div>
        </div>
    </div>

    <form action="http://www.baidu.com">
        <button @click.prevent="tijiao">提交</button>
    </form>

    <a @click.once="doOnce">事件只触发一次</a>

</div>
<script>
    new Vue({
        el:"#app",
        data:{
        },
        methods:{
            d1:function(){
                alert("div1");
            },
            d2:function(){
                alert("div2");
            },
            d3:function(){
                alert("div3");
            },
            tijiao:function(){
                alert("提交表单操作");
            },
            doOnce:function(){
                alert("事件只触发一次")
            }

        }
    })
</script>

2.4 按键修饰符

在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

<!-- 只有在 `key` 是 `Enter` 时调用 `f1()` -->
<input v-on:keyup.enter="f1">

<!-- 使用 keyCode 也是允许的： -->
<input v-on:keyup.13="f1">

数字键对照表https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode

<!-- 可以通过全局 config.keyCodes 对象自定义按键修饰符别名 -->
<input type="text" @keyup.hc="f1">
<script>
    Vue.config.keyCodes.hc = 13
</script>

2.5 系统修饰符

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

.ctrl
.alt
.shift
.meta

<!-- Alt + a -->
<input v-on:keyup.alt.65="do1">
<!-- Ctrl + Click -->
<div v-on:click.ctrl="do2">Do something</div>

2.6 练习

完成一个计算器功能

<div id ="app">
        <input type="number" v-model.number="in1">
        <select v-model="op">
            <option>+</option>
            <option>-</option>
            <option>*</option>
            <option>/</option>
        </select>
        <input type="number" v-model.number="in2">
        <button @click="result">=</button>
        {{res}}
    </div>
    <script>
     //创建Vue实例
     var vm = new Vue({
        el: '#app',
        data:{
            in1:'',
            in2:'',
            op:'+',
            res:''
        },
        methods: {
            result:function(){
                var str = this.in1 + this.op + this.in2;
                this.res = eval(str);
            }
        }
     });
    </script>