首页 > 其他分享 >Vue模板语法——v-once 数据响应式

Vue模板语法——v-once 数据响应式

时间:2024-01-28 12:14:00浏览次数:29  
标签:info Vue 响应 msg 数据 模板 once

一、数据响应式

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

标签:info,Vue,响应,msg,数据,模板,once
From: https://www.cnblogs.com/luluping/p/17992689

相关文章

  • Vue模板语法——v-model 双向数据绑定
    双向数据绑定单向数据绑定是什么?数据模型(Module)和视图(View)之间的单向绑定。需要我们先写好模板,然后把模板和数据(可能来自后台)整合到一起形成HTML代码,然后把这段HTML代码插入到文档流里面。简单的来说就是DOM操作html元素。单向数据绑定的缺点:一旦HTML代码生成好后,就没有办......
  • Vue模板语法——v-on 事件绑定
    一、v-on事件绑定v-on指令用于绑定事件v-on用法转=>最底层的技术渣--Vue基础语法之v-on转=>一瓶怡宝矿泉水--v-on指令直接绑定事件:注意:绑定的事件是对应的方法不是定义在data里面,而是定义在vue实例的methods里绑定的函数可直接绑定函数名——fun,也可以直接调用......
  • Vue模板语法——键盘事件修饰符
    一、键盘修饰符在JavaScript事件中除了前面所说的事件,还有键盘事件,也经常需要监测常见的键值。在Vue中允许v-on在监听键盘事件时添加关键修饰符。记住所有的keyCode比较困难,所以Vue为最常用的键盘事件提供了别名:enter:回车键tab:制表键delete:含delete和backspace键esc:返回键......
  • Vue模板语法——事件修饰符
    一、事件处理如果需要在内联语句处理器中访问原生DOM事件。可以使用特殊变量$event,把它传入到methods中的方法中。在Vue中,事件修饰符处理了许多DOM事件的细节,让我们不再需要花大量的时间去处理这些烦恼的事情,而能有更多的精力专注于程序的逻辑处理。在Vue中事件修饰符主要有:......
  • 创建Vue项目,报错spawn yarn ENOENT
    1.使用vue创建项目的时候,报错Error:spawnyarnENOENT1.1用户自己设置了默认的包管理yarn1.2没有安装yarn解决方式1:打开C盘,在C盘里,打开users(用户名)的文件夹,然后在右侧搜索名为.vuerc的文件修改.vuerc文件解决方式2:没有安装yarn,那么直接输入命令npmin......
  • Vue模板语法——v-cloak
    一、什么是指令指令的本质就是自定义属性指令的格式:以v-开始,比如:v-cloak二、v-cloak指令用法插值表达式存在的问题:“闪动”如何解决该问题:使用v-cloak指令解决该问题原理:先隐藏,替换好值后再显示最终的值三、v-cloak指令的用法提供样式[v-cloak]{display:......
  • vue响应性原理
     核心实现类Observer:它的作用是给对象的属性添加getter和setter,用于依赖收集和派发更新Dep:用于收集当前响应式对象的依赖关系,每个响应式对象包括子对象都拥有一个Dep实例(里面subs是Watcher实例数组),当数据有变更时,会通过dep.notify()通知各个watcher。W......
  • 前端VUE
    1、   export和exportdefault的区别exportdefaultxxximportxxxfrom'./'exportxxximport{xxx}from'./'在一个文件或模块中,export、import可以有多个,exportdefault仅有一个通过export方式导出,在导入时要加{},exportdefault则不需要 2、    vuenextt......
  • Vue 之 Mixins (混入)
    Mixins是一种分发Vue组件中可复用功能的非常灵活的一种方式。什么时候使用Mixins 1.页面的风格不用,但是执行的方法和需要的数据类似,我们是选择每个都写呢还是提取出公共部分呢? 基础实例我们有一对不同的组件,它们的作用是切换一个状态布尔值,一个模态框和一个提示框。这些......
  • vue 中slot
    插槽使用场景 -该组件被多个地方使用-每个父组件中对该组件的内部有一部分需要特殊定制-slot可以让我们更好的复用组件的同时并对其定制化处理-可以理解为父组件想子组件传递了一段html文本要求:1.子组件模板包含至少一个插槽<slot></slot>2.父组件整个......