Vue模板语法——数据响应式

Posted 2021-03-06 fpgz99810

一、数据响应式

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的值