vue-note

数据绑定语法

• 文本:使用大括号{{}},处理单次插值{{* msg}}
• 原始html,{{{html}}} 存在问题
• 绑定表达式:{{}}里面支持全功能的js表达式(只能包含 单个 表达式)
• 过滤器用| 表示 {{message |fileterA 'arg1' arg2 |filterB}} arg1为字符串参数,arg2为表达式计算
• 指令 v-if 如果绑定传参数,后面可以跟:号v-bind:href='url'
• 修饰符:.literal将值解析为一个字面字符串而不是一个表达式
• 缩写: v-bind=>: ,v-on=>@
• 计算属性:computed
• Class与style绑定
  • 绑定class,对象语法

  <div class="static" v-bind:class="{'class-a':isA,'classB':isB}"></div>
  

  • 绑定数组:v-bind:class <div v-bind:class="[classA,classB]"></div>
  • 绑定到style对象:<div v-bind:style="styleObj"></div>

  data:{
    styleObj:{
      color:'red',
      fontSzie:'13px'
    }
  }
  

• 条件渲染v-if,可以针对模板元素使用(隐藏dom),v-else可以跟在其后

<template v-if='ok'>
<h1>title</h1>
<p>Paragraph</p>
</template>

• 展示v-show:切换display,不支持template
• 列表渲染 v-for="item in items" 相关属性:$index
• track-by , $index,$set(),$remove()
• v-for 键:$key,也可以是整数,

<div>
  <span v-for="n in 10"> {{n}}</span>
</div>

• 方法处理器v-on,在method对象中定义方法,传入原生事件$event,还有事件修饰符:.stop阻止事件冒泡 .prevent 不再重载页面 ,v-on可以添加按键修饰符:.13只有在keycode是13的时候调用常用的键可以使用别名:'enter tab delete esc space up down left right'
• 表单控件绑定v-model,对于勾选框值为true | false,多个绑定到同一数组,
• v-model在input事件中同步输入框与数据,可以欠佳一个特性lazy,从而改到在change事件中同步,将用户的输入转为number类型(若转换为NaN则返回原值)
• debounce 设置一个最小的延时
• 注册组件Vue.component(tag,constructor)