vue.js -- 响应式数据

时间：2022-11-12 07:19:56

前言

本文简单介绍了vue的响应式的效果。

响应式数据

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

<!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 ></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 ></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页面渲染出的数据具备响应式。

结语

本小节到此结束，谢谢大家的观看！

如有问题欢迎各位指正

标签：

相关文章