Vue的一点小基础（数据绑定）

原创于 2025-03-05 18:41:02 发布 · 320 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

vue 专栏收录该内容

1 篇文章

订阅专栏

1.最基本的数据绑定形式就是文本插值，使用的是“{{ }}”的样式，输出的是纯文本。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>演示</title>
  </head>
  <body>
    <div id="app">
        <p>我是：{{name}}</p>
        <p>年龄：{{age}}</p>
    </div>
        <script src="vue.js"></script>
        <script>
            new Vue({
                el:'#app',
                data:{
                    name:'美女帅哥',
                    age:18
                }
            })
        </script>
  </body>
</html>

2. v-html:渲染页面，展示html内容。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>演示</title>
   <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <div v-html="message"></div>
    </div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            message:'用户名<input type="text" name="中文名"/>'+'密码<input type="password" name="密码"/>'
        }
    })
</script>
</html>

效果如下：

可以看到body标签中的<div v-html="message"></div>，正确的展示了vue里的' 用户名<input type="text" name="中文名"/>'+'密码<input type="password" name="密码"/> ' 这一段html代码，使得最后展示的效果实现了两个文本框。

3.v-text：相比较v-html ，v-text渲染文本，只显示文本信息；

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>演示</title>
   <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <div v-text="message"></div>
    </div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            message:'用户名<input type="text" name="中文名"/>'+'密码<input type="password" name="密码"/>'
        }
    })
</script>
</html>

效果如下

与上面的代码相比，仅仅是将v-html修改为v-text，其余不变，但两者的效果却截然不同，v-text并没有展现<input>标签的效果，只是简单粗暴的将 '用户名<input type="text" name="中文名"/>'+'密码<input type="password" name="密码"/>' 以文本的样式展现出来

4.v-model:绑定文本框，可以实现双向绑定

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>演示</title>
   <script src="vue.js"></script>
</head>
<body>
    <div id="myApp">
        <p>{{message}}</p>
        <input v-model="message"/>
        <button onclick="alert('message='+app.message)">点击查看</button>
    </div>
</body>
<script>
    var myDate={
        message:'hello world'
    }
    var app= new Vue({
        el:'#myApp',
        data:myDate 
    })
</script>
</html>

效果如下

所谓双向绑定，通俗易懂的就是，修改文本框的内容可以影响到message，同理，修改message的内容，也能影响到文本框的内容。两者都是一起变化的，不会出现一方改变，另一方还是原值的现象。

5.v-bind:主要用于属性绑定，常用于跳转超链接

书写格式为：<a v-bind:href="url"></a>，或者简写成<a :href="url"></a>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>演示</title>
   <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <a v-bind:href="url">百度</a>
    </div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            url:'https://www.baidu.com'
        }
    })
</script>
</html>

效果如下