vue2指令

1.v-for指令
必须要写key key 建议使用不会改变的值,如：id 不建议index
key是为我们渲染的标签添加唯一标识 正确的追踪dom 可以减少资源浪费
只更新必要部分 避免不必要的重绘
<p v-for="(item,index) in list" :key="index">{{item.name}}------{{item.text}}-----{{index}}</p>
2.v-bind指令-单向的
属性绑定指令
可以使用冒号：省略简写
1）style绑定一个对象

内容

内容

2）动态绑定类名和普通的类名

内容

3)通过数组的方式绑定类名

内容

**3.v-model指令-数据双向绑定** 实现原理：v-model 就是当前实现原理的语法糖 通过input事件获取输入框的值 获取后给data赋值，输入框通过bindvalue进行数据接受 核心就两点： 数据→视图：把数据绑定到表单元素的 value/checked 等属性（单向绑定）； 视图→数据：监听表单的 input/change 事件，把输入值同步回数据。 v-model的修饰符 v-model.trim 去掉前后空格 v-model.lazy 改变触发方式 为change把默认「输入时（input 事件）」同步数据，改成「失焦 / 回车时（change 事件）」才同步，延迟数据更新。 v-model.number 改变输入框类型 4.条件渲染v-if v-show v-if 所实现的显示与隐藏 基于的是dom元素渲染 v-show 所实现的显示与隐藏基于css的display属性

大于15

v-if 条件为true时显示

大于10

无效

show

5.其他指令 v-text 渲染文本 v-html 可以渲染代码 v-once 只执行一次 v-per 跳过当前节点直接编译 加v-pre：不编译，直接显示{{msg}} 6.事件指令 v-on v-on:click="" 可以简写为 @click="" @click.stop 修饰符:阻止冒泡 @click.once 只能调用一次 @click.left 左击 @click.right 右击 @click.prevent 阻止默认行为 @keyup 键盘事件 @keyup.enter="" 键盘回车事件