vue基础指令以及案例

v-html与v-text

  • v-html 可以渲染标签 但存在隐患 在敏感的地方使用可能会造成 跨站脚本攻击
  • v-text 会直接把标签当成文本渲染

v-cloak

  • v-cloak 的作用是阻止页面在mounted之前渲染标签内的数据 也就是说在插值表达式没有被替换之前，不渲染页面

v-bind 与 v-on

  • v-bind 绑定属性 缩写为 ：
  • v-on 绑定事件 缩写为 @

跑马灯例子

事件修饰符

  • .stop 阻止事件冒泡
  • .prevent 阻止默认事件（阻止默认行为）
  • .capture 实现捕获触发事件
  • .self 只有点击自己的时候才会触发
  • .once 只触发一次

.stop 和 .self 的区别

  • 相同点：都能阻止冒泡
  • 不同点：stop阻止所有的事件冒泡 self只阻止了自己的事件冒泡（其他组件还是会冒泡）

v-model

实现表单元素 和model 中的数据双向绑定 只能使用在 表单元素中

是v-on 和 v-bind 在表单上同时使用时的 语法糖

简易计算器

样式绑定

使用class绑定样式

  • 数组：

    这是一个可爱的h1

  • 数组中使用三元表达式：

    这是一个可爱的h1

  • 数组中嵌套对象：

    这是一个可爱的h1

  • 直接使用对象：

    这是一个可爱的h1

使用style 内联样式

  • 对象：

    这是一个可爱的h1

  • 定义到data中 直接 :style 引用
  • 以数组的形式 引用多个 data 字段

v-for 与 ：key

用于编辑数组或对象

  • 数组：

    这是一个可爱的h1

  • 对象：

    这是一个可爱的h1

  • 对象数组：

    这是一个可爱的h1

  • 遍历数字：。。。
  • vue2.0之后，必须给每一项绑定一个key key绑定的值只能是数字或字符串（string、number）

key的作用是给每一项一个唯一的标识，能够节省性能

v-if 和v-show 控制元素的显示或隐藏

  • v-if：控制元素时候渲染dom节点 每次都会创建或者删除dom节点 有较高的切换性能消耗
  • v-show：控制元素的dispaly：none； 使元素显示或隐藏 有较高的初始渲染消耗