数据绑定语法
- 文本:使用大括号
{{}},处理单次插值{{* 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绑定
<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)
