从零开始学习Vue（三）| 一起学系列

来自小星星的你
112 阅读2分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第3天，点击查看活动详情

  • 指令
    • 指令的本质就是HTML自定义属性（相对于HTML固有属性而言，比如class、id、title等支持HTML自身功能的属性）
    • Vue.js的指令就是以v-开头的自定义属性
  • v-once指令
    • 使元素内部的插值表达式只生效一次（内容不会随数据变化自动更改） image.png
  • v-text指令
    • 将元素内容整体替换为指定纯文本数据 image.png
  • v-html指令
    • 将元素内容整体替换为指定的HTML文本 image.png
  • v-bind指令
    • 用于动态绑定HTML属性 image.png 简写形式 image.png image.png
    • 与插值表达式类似，v-bind中也允许使用表达式 image.png
    • 如果需要一次绑定多个属性，还可以绑定对象 image.png
    • 自定义对象的属性attrObj:{ 'data-title' : '这是data-title' }
  • Class绑定
    • class是HTML属性，可以通过v-bind进行绑定，并且可以与class属性共存 image.png
    • 对于class绑定，Vue.js中还提供了特殊处理方式 image.png image.png
  • Style绑定
    • style是HTML属性，可以通过v-bind进行绑定，并且可以与style属性共存。对象中使用驼峰命名法来代替横线：background-color ==> backgroundColor也可以使用单引号来代替：background-color ==> 'background-color'推荐使用驼峰命名法
    • 当希望给元素绑定多个样式对象时，可以设置为数组
  • 渲染指令：v-for指令
    • 用于遍历数据渲染结构，常用的数组与对象均可遍历 image.png image.png
    • 使用v-for的同时，应始终指定唯一的key属性，可以提高渲染性能并避免问题 image.png
    • 通过template标签设置模板占位符，可以将部分元素或内容作为整体进行操作 image.png
  • 渲染指令：v-show指令
    • 用于控制元素显示与隐藏，适用于显示隐藏频繁切换时使用
    • 注意点：template标签无法使用v-show指令
  • 渲染指令：v-if指令
    • 用于根据条件控制元素的创建与移除，与v-show的不同之处在于v-if直接将元素从HTML中移除了，而v-show只是修改了display image.png
    • 给使用v-if的同类型元素绑定不同的key image.png
    • 出于性能考虑，应避免将v-if与v-for应用于同一标签：v-for的优先级比v-if高，可以将v-if应用于父标签，v-for应用于子标签 image.png
      本期的内容就到这里啦！让我们明天一起继续学习Vue.js吧!
avatar
文章
阅读
粉丝