zoukankan      html  css  js  c++  java
  • 学习整理--vue篇(1)

    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+鼠标单击
  • 相关阅读:
    使用jquery.validate.js实现boostrap3的校验和验证
    MySQL 随机取数据效率问题
    qq在线客服代码
    使用Shell脚本查找程序对应的进程ID,并杀死进程
    Redis-概述
    JVM的类加载机制
    volatile
    java内存相关
    设计模式--模板方法
    设计模式概述
  • 原文地址:https://www.cnblogs.com/black-Q/p/14081931.html
Copyright © 2011-2022 走看看