vue基础(数据与属性绑定)

vue是数据驱动的框架

不要总想着编写dom代码,而是通过改变data中的变量的值二改变页面中的数据。

一、内容绑定

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 id="app">
        <span>{{msg}}</span>
    </div>
    <script src="./vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                msg:"helo word"
            }
        })
    </script>
</body>
</html>

2.v-html绑定

使用v-html绑定属性,不需要{{}}

<!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">
        <span v-html="msg"></span>
    </div>
    <script src="./vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                msg:"helo word"
            }
        })
    </script>
</body>
</html>

二、绑定属性

如果希望html标签的某个属性的值来自data中的某个属性的值,需要使用v-bind:属性名称=“data中的某个属性”

如果不加v-bind的,则vue只有将属性的值当做普通字符串,而不会当做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>
    <style>
        .red{
            background-color: red;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div id="app">
        <span :id="id">span的id</span>
        <div v-bind:class="red"></div>
    </div>
    <script src="./vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                id:"aaa",
                red:"red",
            }
        })
    </script>
</body>
</html>

三、双向绑定与单项绑定

1.单项绑定:

        data中的变量的值发生变化,页面绑定这个变量的地方的值也会自动的刷新(插值表达式换和v-html都属于单项绑定)

2.双向绑定:

        1.data中变量的值发生变化,页面从新渲染。

        2.从页面中改变值,data中对应的变量值也发生变化。

        3.使用v-model=" ",来进行双向绑定

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

3.为多个单选按钮的v-model指令的值设置为同一个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>
    <style>
        
    </style>
</head>
<body>
    <div id="app">
        <input type="radio" name="" id="man" value="man" id="" v-model="a">
        <label for="man">男</label>
        <input type="radio" name="" id="woman" value="woman"  v-model="a">
        <label for="woman">女</label>
    </div>
    <script src="./vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                a:""
            }
        })
    </script>
</body>
</html>

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值