vue.js -- 响应式数据

最新推荐文章于 2022-11-29 10:11:11 发布

爱划水de鲸鱼哥～

最新推荐文章于 2022-11-29 10:11:11 发布

阅读量219

点赞数 1

分类专栏： Vue3 文章标签： Vue 响应式数据实时更新 mounted钩子数据绑定

本文链接：https://blog.csdn.net/m0_47901007/article/details/118490977

版权

Vue3 专栏收录该内容

31 篇文章 4 订阅

订阅专栏

响应式数据

响应式数据是指当数据改变后，视图中的内容也会发生相应的改变。

<!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>vue响应式数据</title>
    <!-- 使用CDN引入Vue -->
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
    <script>
        Vue.createApp({		//创建Vue实例
         data(){
                return {
                    content: '0'
                }
            },
            template:'<div>{{content}}</div>'
        }).mount('#root');	//将创建的Vue实例挂载到DOM上
    </script>
</body>
</html>

页面成功渲染出数字 0

代码解释：
首先采用CDN方式引入Vue
然后使用Vue.createApp（）创建一个Vue实例
通过mount()将Vue实例挂载到id为root的DOM节点上
将data返回值通过插值表达式的方式在页面中渲染出来

页面渲染出的数字 0 ，就是响应式数据。

为了确认页面渲染出来的数据具备响应式，我们将data后加上mounted()，并在mounted()中调用一个定时器，定时器每隔1000毫秒将data的返回值加一，看页面如何渲染。

mounted() 是一个钩子，在初始化页面完成后对节点进行相关操作。

修改后的代码：

<!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>vue响应式数据</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
    <script>
        Vue.createApp({
            data(){
                return {
                    content: 0
                }
            },
            mounted(){
                setInterval(() => {
                    this.content++;
                }, 1000);
            },
            template:'<div>{{content}}</div>'
        }).mount('#root');
    </script>
</body>
</html>

页面每隔一秒动态显示：0，1，2，3…

说明使用Vue页面渲染出的数据具备响应式。

爱划水de鲸鱼哥～

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue.js -- 响应式数据

响应式数据响应式数据是指当数据改变后，视图中渲染出来的内容也相应的改变。<!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, initi
复制链接

扫一扫