在这里插入图片描述

vue 的常见指令

  1. v-text 解析文本
    数据绑定标签,将vue对象data中的属性绑定给对应的标签作为内容显示出来,类似js的text属性;
  2. v-html 解析html标签
    类似v-text标签,他是将data的属性作为html语法输出,类似js中的innerHTML属性;
  3. v-on 绑定事件 函数必须写在methods里面 ,@click (简写方式)
    v-on主要用来监听dom事件,以便执行一些代码块。表达式可以是一个方法名。方法必须写在methods里面
  4. v-model 双向数据绑定
    作用:在表单元素上创建双向数据绑定
    说明:监听用户的输入事件以更新数据
    v-model指令是数据的双向绑定,该指令绑定的是value值,v-model会忽略所有表单元素的value、checked、selected特性的初始值。因为它选择Vue实例数据做为具体的值。
  5. v-for 循环 格式 v-for="字段名 in(of) 数组json"
    用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items 形式的特殊语法,items 是源数据数组并且 item 是数组元素迭代的别名。
    有下面两种遍历形式
    //使用in,index是一个可选参数,表示当前项的索引
    //使用of 注意:当v-for和v-if同处于一个节点时,v-for的优先级比v-if更高。这意味着v-if将运行在每个v-for循环中
  6. v-bind 动态绑定 作用: 及时对页面的数据进行更改 简写方式":"
    v-bind用来动态的绑定一个或者多个特性。没有参数时,可以绑定到一个包含键值对的对象。常用于动态绑定class和style。以及href等。
  7. v-bind:class 三种绑定方法
    对象型 ‘{red:isred}’ 2、三目型 ‘isred?“red”:“blue”’ 3、数组型 ‘[{red:“isred”},{blue:“isblue”}]’
  8. v-show 显示 隐藏 传递的值为布尔值 true false 默认为false
    v-show指令主要用于根据条件展示元素。和v-if不同的是,如果v-if的值是false,则这个元素被销毁,不在dom中。
    但是v-show的元素会始终被渲染并保存在dom中,它只是简单的切换css的dispaly属性。
    注意:v-if有更高的切换开销,v-show有更高的初始渲染开销。
    因此,如果要非常频繁的切换,则使用v-show较好;如果在运行时条件不太可能改变,则v-if较好
  9. v-if 显示与隐藏 和v-show对比的区别 就是是否删除dom节点 默认值为false
    v-if可以实现条件渲染,Vue会根据表达式的值的真假条件来渲染元素。
    <a v-if="show">yes</a>
    如果属性值show为true,则显示。否则,不会渲染这个元素。
  10. v-else-if 必须和v-if连用
  11. v-else是搭配v-if使用的,它必须紧跟在v-if或者v-else-if后面,否则不起作用。
    	<a v-if="show">yes</a>
    	<a v-else>No</a>
    
  12. v-else 必须和v-if连用 不能单独使用 否则报错 模板编译错误
  13. v-once关联的实例,只会渲染一次。之后的重新渲染,实例极其所有的子节点将被视为静态内容跳过,这可以用于优化更新性能。
  14. v-cloak 防止闪烁
    这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
    防止刷新页面,网速慢的情况下出现{{ message }}等数据格式
  15. v-pre 把标签内部的元素原位输出
    跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

vue指令修饰符

  1. v-on指令修饰符
    1. .stop - 调用 event.stopPropagation(),阻止事件继续传播 也就是阻止冒泡事件
      <a @click.stop=“add()”>

    2. .prevent - 调用 event.preventDefault(),.prevent阻止默认事件
      <a @click.prevent =“per()” href=“https://www.baidu.com”>element

    3. .capture - 添加事件侦听器时使用 capture 模式。
      使用事件捕获模式,即元素自身触发的事件先在此处处理,然后才交由内部元素进行处理
      添加事件监听器时使用事件捕获模式
      即元素自身触发的事件先在此处处理,然后才交由内部元素进行处理

      <div v-on:click.capture="doThis">...</div> 
      
    4. .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。

      <div class="app" @click.self="handle"></div>
      
    5. .passive - (2.3.0) 以 { passive: true } 模式添加侦听器
      滚动事件的默认行为 (即滚动行为) 将会立即触发
      而不会等待 onScroll 完成 -->
      这其中包含 event.preventDefault() 的情况

      <div v-on:scroll.passive="onScroll">...</div>
      

      注意:不要把 .passive 和 .prevent 一起使用,
      因为 .prevent 将会被忽略,
      同时浏览器可能会向你展示一个警告。
      请记住,.passive 会告诉浏览器你不想阻止事件的默认行为。

    6. .once - 只触发一次回调,也就是说这个函数只触发一次
      点击事件将只会触发一次

      <a v-on:click.once="doThis"></a>	
      
  2. v-model修饰符
    1.Lazy修饰符
    lazy:在改变后才触发,也就是说只有光标离开input输入框的时候值才会改变
    <input v-model.lazy="msg"> 
    
    lazy:在改变后才触发(也就是说只有光标离开input输入框的时候值才会改变)
    1. Number
      number:将输出字符串转为Number类型·,虽然type类型定义了是number类型,但是如果输入字符串,输出的是string
    <input v-model.number="age" type="number">
    
    1. Trim自动过滤用户输入的首尾空格
<input v-model.lazy.trim="msg" >
Logo

前往低代码交流专区

更多推荐