vue学习（三）数据驱动案例

最新推荐文章于 2024-03-11 17:32:56 发布

java知路

最新推荐文章于 2024-03-11 17:32:56 发布

阅读量282

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue 数据驱动

本文链接：https://blog.youkuaiyun.com/qq_34874784/article/details/85542076

vue 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了Vue.js中数据驱动视图的概念，演示了如何使用Vue进行数据绑定，包括单向和双向数据绑定的实现方式。通过实例展示了当数据变化时，视图如何自动更新，以及如何利用v-model实现输入框与数据的同步。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前一篇：node学习（四）初始化前端vue项目

入门程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="test">
    <h1>{{name}}Hello World</h1>
</div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    //vue 只能作用于 el 作用的标签
    //这里只作用于 #test"
    const test = new Vue({
        el: "#test", //element ;vue作用的标签
        data: {
            name: "zhagnsan !"
        },
    });
</script>
</html>

2.数据驱动，

双向数据绑定

数据发生变化时，视图也发生变化，

再浏览器console控制台给name重新赋值

视图的内容会自动发生变化

b.在页面上加上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="test">
    <h1>{{name}}  Hello World</h1>
    <input type="text" v-model="name">
</div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    //vue 只能作用于 el 作用的标签
    //这里只作用于 #test"
    const test = new Vue({
        el: "#test", //element ;vue作用的标签
        data: {
            name: "zhagnsan !"
        },
    });
</script>
</html>