Vue学习笔记

最新推荐文章于 2023-10-07 20:57:14 发布

pikayin

最新推荐文章于 2023-10-07 20:57:14 发布

阅读量80

点赞数

文章标签： vue.js 学习 javascript

本文链接：https://blog.csdn.net/pikayin/article/details/123295673

版权

这篇博客介绍了Vue.js中的数据绑定概念，包括单向绑定（v-bind）和双向绑定（v-model）。文章通过示例展示了如何在HTML中使用v-model进行数据交互，并强调了v-model主要用于表单元素，如input和select。同时，文中指出v-model默认收集的是value值，但尝试在非表单元素如h2上使用v-model会导致错误。

摘要由CSDN通过智能技术生成

数据绑定：

<!--Vue中有两种数据绑定的方式：

1、单向绑定（v-bind):数据只能从data流向页面

2、双向绑定（v-model）:数据不仅能从data流向页面，还可以从页面流向data

双向绑定一般都应用在表单类元素上（如input、select等）

v-model:value可以简写为v-model，因为v-model默认收集的就是value值-->

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>数据绑定</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <div id="root">
            单向数据绑定：<input type="text" :value="name"><br/>
            双向数据绑定：<input type="text" v-model="name">
            <!--如下代码是错误的，因为v-model只能用于表单类元素（输入类元素上）-->
            <h2 v-model:x="name">我好呀</h2>

        </div>
    </body>
    <script type="text/javascript">
            new Vue({
                el:'#root',
                data:{
                    name:'尹木星辰'
                }
            })
    </script>
</html>