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

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

java知路

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

阅读量219

点赞数

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

本文链接：https://blog.csdn.net/qq_34874784/article/details/85542076

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

前一篇：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>

输入框发生变化是，数据也会发生变化

java知路

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue学习（三）数据驱动案例

前一篇：node学习（四）初始化前端vue项目入门程序&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt;&lt;/head&gt;&l
复制链接

扫一扫