Vue数据绑定和事件处理

Hvemi-l

已于 2022-03-21 14:24:05 修改

阅读量383

点赞数

文章标签： vue.js 前端

于 2022-03-18 09:07:45 首次发布

本文链接：https://blog.csdn.net/weixin_57662065/article/details/123565608

版权

数据绑定

1.内容绑定

使用 {{}}，将 data 中的数据显示成内容（开始标签与结束标签之间）

<!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>
</head>

<body>
    <div class="app">
        <span>{{msg}}</span>
    </div>


    <script src="./vue.js"></script>
    <script>
        var app = new Vue({
            el: '.app',
            data: {
                msg: 'hello',
            }
        })
    </script>
</body>

</html>

2.属性绑定

将data中的数据作为某个元素的属性的值

使用 v-bind：属性名=“data中的数据” 指令，属性可以是内置，也可以是自定义

v-bind：缩写为：

<!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>
</head>
<body>
    <div id="app">
        <p v-bind:id="id">{{title}}</p>
        <a :href="url">CSDN</a>
        <img :src="img_url" alt="">
    </div>
    <script src="./vue.js"></script>
    <script>
        var ap=new Vue({
            el:'#app',
            data:{
                id:'p1',
                title:'今天是2月8号',
                url:'http://www.baidu.com',
                img_url:'./imgs/1.jpg'
            }
        })
    </script>
</body>
</html>

3.双向绑定

使用 v-model 指令，v-model 指令只适用于表单控件，r如：<inout>、<textarea>、<select>等控件

<!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>
</head>
<body>
    <div id="app">
        <input type="text" v-model="msg">
    </div>
    <script src="./vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                msg:'hello'
            }
        })
    </script>
</body>
</html>

data 中变量的值发生变化，页面从新渲染
从页面中改变值，data 中对应的变量值也发生变化

<div id="app">
    <label for="man">男</label>
    <input type="radio" id="man" value="man" v-model="gender">
    <label for="women">女</label>
    <input type="radio" id="women" value="women" v-model="gender">
</div>

设置多个单选框的v-model值一样时，就可以不用写 name 属性
选择某个单选框后，此单选框的 vlue 属性值会赋值给 gender 属性
设置 gender 属性的值为某个单选框的 value 值，此单选框就会默认选中

事件

1.事件绑定

使用 v-on：指令为元素注册事件

v-on：缩写为 @

<!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>
</head>

<body>
    <div id="app">
        <button v-on:click="clickMe">click</button>
        <button @click="click1">click1</button>
    </div>
    <script src="./vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {},
            methods: {
                clickMe: function () {
                    console.log('heihei')
                },
                click1:function(){
                    console.log('click1')
                }

            }
        })
    </script>
</body>