（4）数据响应式

最新推荐文章于 2023-02-11 00:07:29 发布

liuyang___

最新推荐文章于 2023-02-11 00:07:29 发布

阅读量122

点赞数

分类专栏： vue学习笔记文章标签： vue

本文链接：https://blog.csdn.net/liuyang___/article/details/125120229

版权

vue学习笔记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

本文介绍了HTML5中的响应式设计，即根据屏幕尺寸变化调整样式，以及Vue框架中的数据响应式原理，通过数据变化更新页面内容。同时，文章详细解析了数据绑定的概念，用于将数据填充到HTML元素中。此外，重点讨论了v-once指令的使用，它只编译元素一次，后续数据改变不会更新该元素，适用于信息展示后不再修改的场景，以此提高性能。

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

如何理解响应式

html5种得响应式（屏幕尺寸的变化导致样式的变化）

数据的响应式（数据得变化导致页面内容得变化）

什么是数据绑定

数据绑定：将数据填充到标签中

v-once只编译一次

显示内容之后不再具有响应式功能

<!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>Document</title>
    <script type="text/javascript" src="vue.min.js"></script>
</head>

<body>
    <div id="app">
        <div>{{msg}}</div>
        <div v-once>{{info}}</div>
    </div>

<script>
    /*
        v-once的应用场景:如果现实的信息后续不需要再修改，那么可以使用v-noce，这样可以提高性能。
    */

    var vm = new Vue({
        el:'#app',
        data:{
            msg:'hello vue',
            info:'你好'
        }
        })
</script>
</body>

</html>

v-once的应用场景:如果现实的信息后续不需要再修改，那么可以使用v-noce，这样可以提高性能。