码迷,mamicode.com
首页 > 其他好文 > 详细

学习整理--vue篇(1)

时间:2020-12-08 12:19:26      阅读:3      评论:0      收藏:0      [点我收藏+]

标签:添加   enter   初始   spl   动作   阻止冒泡   下标   属性   判断语句   

vue学习

vue指令

  • 模板指令:
    v-model:绑定data数据实现数据双向绑定
    v-html:绑定模板内容,可书写标签
    v-text:绑定数据实现单向绑定 可缩写为{{}} 支持逻辑运算 可结合v-once实现一次性插值渲染
    区别
    * v-text: 操作纯文本,替换对应数据对象的值,数据影响内容,内容不影响数据(单向绑定)
    * v-model: 通常用于表单组件,类似于v-text,但数据影响内容,内容也可以改变数据(双向绑定)
    * v-html: 输出html,类似于v-text,但可以解析html标签
  • 条件指令
    v-if:判断语句
    v-else:
    v-else-if:
    v-show:显示隐藏
    • v-if和v-show区别
      • 条件: 初始条件为假v-if不做任何动作, v-model创建节点但不渲染
      • 方式: v-if操作整个dom添加或删除 ; v-model操作元素display属性
      • 消耗: v-if切换消耗较高, v-show初始渲染消耗较高
      • 场景: v-if适用于条件不太频繁切换, v-show适合频繁切换
  • 循环指令
    v-for: v-for="(value,key,index) in data"
    • value 必须
    • key、index可选
    • value 获取值,key获取键名,index获取下标
  • 绑定
    v-bind:class/v-bind:style 可缩写为 :class/:style
  • 绑定事件
    v-on:click/v-on:mouseover : 等同于 :click/:mouseover 等同于 @click/@mouseover
    • 事件修饰符
      .stop: 阻止冒泡
      .prevent: 阻止默认事件
      .capture: 阻止捕获
      .self: 只监听触发该元素的事件
      .once: 只触发一次
      .left: 左键事件
      .right: 右键事件
      .middle: 滚轮事件
    • 按键修饰符
      :keyup: 键盘事件 ==》 :keyup.10(.10键号)
      :keyup.13="method" == :keyup.enter="method"
      • 按键别名(与键盘名一值,暂时支持的键别名)
        .enter .tab .delete .esc .space
        .up .down .left .right .ctrl
        .alt .shift .meta
    • 写法
      @click.stop="method"
      @click.stop.once="method"
      @click.ctrl="method" 等同于按下ctrl+鼠标单击

学习整理--vue篇(1)

标签:添加   enter   初始   spl   动作   阻止冒泡   下标   属性   判断语句   

原文地址:https://www.cnblogs.com/black-Q/p/14081931.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!