vue 学习一

作为个人 笔记 ，没有太大参考价值

1.v-model 表单输入绑定
v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值。因为它会选择 Vue 实例数据来作为具体的值。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
修饰符
.lazy v-model 默认在input 事件中同步值与数据 当使用.lazy 修饰符则改变为在 change 事件中同步。

<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >

.number
如果想自动将用户的输入值转为 Number 类型 (如果原值的转换结果为 NaN 则返回原值)，可以添加一个修饰符 number 给 v-model 来处理输入值：

<input v-model.number="age" type="number">

.trim 过滤首尾空格

<input v-model.trim="msg">

v-for 列表渲染
指令根据一组数组的选项列表进行渲染。
数据是数组 （item,index）in ary
数据是对象 （item,key,index） in Object
v-show 控制显示隐藏 v-show=”true/false”;
v-on 绑定事件监听器
简写： @
参数 ：event
修饰符：

.stop - 调用 event.stopPropagation()。 阻止冒泡
.prevent - 调用 event.preventDefault()。阻止默认行为
.left - (2.2.0) 只当点击鼠标左键时触发。
.right - (2.2.0) 只当点击鼠标右键时触发。
.middle - (2.2.0) 只当点击鼠标中键时触发。
.{keyCode | keyAlias} - keycode 或者 keyAlias
 例如：@keyup.enter / @keyup.13 回车事件                
 @keyup.up/down/left/right/ 上下左右键 事件

一些事件
@contextmenu 右键
v-bind 动态绑定属性
简写： ：
在绑定 class ,style 时 有一些特殊写法；
:class
1.<div :class=[h,bgColor]></div> // h是data里面的数据

data:{
h:'h'// value 里面是 style 里面定义的样式
}

2.<div :class="{h:true,bgColor:false}“> // h:是样式名称
3.<div :class="json"></div> // json 是data 里面的数据

  data:{
     json:{
       red:true,
       h:false;
     }// red ,h 是样式表中定义的样式名称
  }

：style
1.:style=”[c,b]” // c,b 是data 里面的数据
c:{color:”red”},b:{backgroundColor:’blue’}; 驼峰命名；
2. :style=”a”

data:{
 a:{color:red};    
}

未完