vue 学习一
来源:互联网 发布:淘宝网页显示不正常 编辑:程序博客网 时间:2024/06/06 20:11
作为个人 笔记 ,没有太大参考价值
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}; }
未完
- Vue.js 学习(一)
- Vue学习(一)
- vue学习(一)
- Vue学习(一)
- Vue学习笔记(一)
- Vue学习笔记一
- Vue基础知识学习(一)
- vue 学习一
- Vue学习(一)
- Vue学习笔记一 创建vue项目
- Vue学习笔记(一)
- vue.js学习(一)
- Vue.js学习笔记(一)
- Vue入门学习(一)
- Vue 学习笔记(一)
- vue学习笔记(一)
- vue学习笔记(一)
- (一)VUE学习地址
- 博客积累的一些感慨
- Java互联网架构-Mysql分库分表订单生成系统实战分析
- 小仙女讲软考(六):说说测试那些事儿
- 有没有大神能够逐行解释一下代码?Delphi
- 旷视 CEO 印奇:靠“刷脸”折腾出 120 亿的大生意
- vue 学习一
- Spring配置事物的5种方式
- Go实现快速排序算法
- 【bzoj 1086】王室联邦(DFS)
- Java开发大型互联网企业微服务架构简介及罕见的问题点
- 【shell】实例(1)
- 进程、线程、多线程相关总结
- 初探Java源码之ArrayList
- 标准输入输出流OutputStreamWriter:将字节输出流转换为字符输出流InputStreamReader:将字节输入流转换为字符输入流打印流添加输出数据的功能ObjectInputStrea