注意

事件绑定使用"@"
属性绑定使用":"

1.1内容渲染指令

• v-text

  • >将数据源中的数据直接渲染到成为标签的内容

  • 缺点：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循环

<td v-for="li in list">
    <span @click="li.show = !li.show;">{{li.age}}</span>
    <input v-if="li.show" type="text" v-model="li.age" />
</td>

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

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

参考文章地址：https://juejin.cn/post/7065932348235186206