vue：常用V-指令

十二春秋
725 阅读3分钟

v-指令

指令：vue为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构

  1. 内容渲染指令
  2. 属性绑定指令
  3. 事件绑定指令
  4. 双向绑定指令
  5. 条件渲染指令
  6. 列表渲染指令

O

1.1内容渲染指令

  • v-text

    • <p v-text='msg1'></>将数据源中的数据直接渲染到成为标签的内容
    • 缺点：v-text会直接覆盖掉标签内本来的值

  • {{}} :插值表达式

  • 插值表达式可以添加简单的JS表达式(加减乘除，三元表达式等)但是不能使用复杂的JS语句

    姓名：{{msg1}}

  • v-html：可以添加标签(html元素)

属性绑定指令

{{}}差值表达式不能用在标签的属性节点，无法改变属性的值

  • v-bind

    • 要给标签的属性绑定动态的值，需要在属性前方加上'v-bind:',也可以简写成':'
    • v-bind:placeholder="tips",tips为data中声明的值
    • v-bind:style="{ }" ：代表动态绑定一个样式对象,他的值是一个{}样式对象
    • vue提供的模板渲染语法中，还支持JavaScript表达式的运算

事件绑定指令

  • v-on

    • 原生DOM对象去掉on即可 - v-on:click - v-on:input - v-on:keyup

    • 格式：v-on:事件名称="事件处理函数的名称"

    • 简写：@事件名称="事件处理函数的名称"

    • 绑定的事件可以用小括号进行传参，若无小括号则默认传触发的事件对象(MouseEvent{}),若在有参数的情况下，仍需获取事件对象，可使用$event符号获取事件对象。(@click="add(n,$event)")不过开发中不常用

事件修饰符(加在事件绑定后面)

  • @click.prenvent="add": 点击的同时，阻止默认行为(event.preventDefault() )
  • form表单提交会默认刷新网页，可以用@submit.prevent阻止
  • .stop:阻止事件冒泡
  • .capture: 以捕获模式触发当前的事件处理函数
  • .once: 绑定的事件只触发一次
  • .self: 只有在event.target是当前元素自身时触发事件处理函数

按键修饰符(仅用于键盘事件)

  • @keyup.enter="": 仅按下回车键时触发
  • @keyup.esc="": 仅按下esc时触发

双向绑定指令

  • 即双向数据绑定指令:v-model

  • 只有表单元素才能使用v-model，其他元素或无法呈现内容，或无法修改内容均无法使用该指令

  • 表单元素均可使用(可理解为带value属性的标签可用)，如：

    • input输入框

      • type="radio"
      • type="checkbox"
      • type="xxxx"

    • textarea文本域

    • select下拉菜单

v-model指令的修饰符

  • .number:自动将用户输入值转为数值类型

  • .trim:自动过滤用户输入的首尾空白字符

  • .lazy:在"change"时而非"input"时更新

    • 中间变化的时候不会同步到data数据源中，只会在最后输入完成后改变

条件渲染指令

  • v-if和v-show

    • v-if：动态创建和删除元素(页面创建时即为false只有特殊情况才会让其显示时用v-if)
    • v-show：为元素添加或删除display:none样式来隐藏或显示元素(频繁切换时建议使用)
    • 以上仅为面试时回答，现在电脑对此消耗不大，绝大多数情况无需考虑性能直接使用v-if

与v-if配合使用的v-else-if()和v-else

官方建议使用v-for时，后面一定要绑定一个:key='item.id'(.vue文件中不绑key会直接报错)而且，尽量把id作为key的值

  • 可提升性能，防止列表状态紊乱
  • 官方对id的值类型有要求：字符串或数字
  • key值不允许重复
  • 使用索引号index没有用处，因为数组增删改查会改变索引号所对应的数据（如：在数组前面增删数据）

\

avatar
文章
阅读
粉丝