惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

博客园_首页
博客园 - 三生石上(FineUI控件)
爱范儿
爱范儿
Vercel News
Vercel News
aimingoo的专栏
aimingoo的专栏
The GitHub Blog
The GitHub Blog
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
A
About on SuperTechFans
H
Hackread – Cybersecurity News, Data Breaches, AI and More
量子位
Hugging Face - Blog
Hugging Face - Blog
C
Check Point Blog
Engineering at Meta
Engineering at Meta
有赞技术团队
有赞技术团队
月光博客
月光博客
M
MIT News - Artificial intelligence
V
Visual Studio Blog
Stack Overflow Blog
Stack Overflow Blog
阮一峰的网络日志
阮一峰的网络日志
D
DataBreaches.Net
I
InfoQ
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
The Cloudflare Blog
雷峰网
雷峰网

博客园 - linFen

Ubuntu下使用ProcDump ubuntu 20.04 搭建 ProcDump Anaconda 常用命令 记录codesmith 断点调试弹不了vs Vue模板语法——键盘事件修饰符 Vue模板语法——事件修饰符 Vue模板语法——v-on 事件绑定 Vue模板语法——v-model 双向数据绑定 Vue模板语法——数据绑定指令 Vue模板语法——v-cloak vue响应性原理 ES6其他 css其他 JS其他 前端VUE 前端 vue 中slot Vue 之 Mixins (混入) Vue 响应性
Vue模板语法——v-once 数据响应式
linFen · 2024-01-28 · via 博客园 - linFen

一、数据响应式

  1. 如何理解响应式

    • html5中的响应式:屏幕尺寸的变化导致样式的变化
    • 数据的响应式:数据的变化导致页面内容的变化
  2. 什么是数据绑定

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

  3. v-once只编译一次

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

二、v-once指令

  1. v-once 应用场景

    如果显示的信息后续不需要再修改,可以使用v-once,这样可以提高性能。

  2. v-once用法

    在需填充的标签中添加v-once指令

  3. 例如

      <div id='app'>
        <div>{{msg}}</div>
        <div v-once>{{info}}</div>
      </div>
      <script type="text/javascript" src="js/vue.js"></script>
      <script type="text/javascript">
         var vm =new Vue({
               el:'#app',
               data:{
                  msg:'HelloWorld',
                  info:'Vue是真得好!!!'
               }
         })
      </script>

结果:
在浏览器控制台中,可通过vm.msg=***改变msg的值,而不能使用vm.info=***来修改info的值