学习整理--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+鼠标单击