学习整理--vue篇

Posted black-q

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了学习整理--vue篇相关的知识,希望对你有一定的参考价值。

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篇的主要内容,如果未能解决你的问题,请参考以下文章

Vue.js前端框架系统学习(10)——动态组件 & 异步组件

总结整理JQuery基础学习---事件篇

vue-cli3学习整理----browserslist

Vue2.x源码学习笔记-Vue静态方法和静态属性整理

安利篇1期工作学习的冷门小众干货整理分享

AR 学习资料与网页整理