初学者入门Vue第2篇
Vue的属性绑定指令还有事件表单computed计算watch监听class 和 style JSON 本地存储
属性绑定指令
v-bind:title="msg"
:title="msg" 属性绑定简写形式
:class :id :disabled
事件
v-on:click="num++" 事件指令
@click="num++" 事件绑定的简写形式
事件的参数
@click="sayNum" 默认传入事件对象
@click="sayNum(3)" 传入实参3
@click="sayNum($event,3)" 传入事件对象,和参数3
事件的修饰符
.stop 阻止事件冒泡
.prevent阻止默认事件
.once 只向应一次
按键修饰符(keydown,keyup)
enetr:回车
up:上
down:下
space:空格
esc:取消
del:删除
系统修饰符
.ctrl
.shift
鼠标修饰符
.middle
.left
.right
表单
v-model="num" 把num的数据和表单的值绑定在一起
单行,多行
多选 :1个默认值 选中为true 未选择为false 多个值,绑定的数组动态添加/移除当前元素的value值
单选
下拉select
表单修饰符:.lazy change 事件触发数据更新 .number 强制转换为数字
v-model="num" 简写 :value="num" @input="num="$event.target.value"
vue操作:让指令链接数据与dom 业务操作数据,实现自动更新dom
computed计算
从现有数据计算出新的数据(只读)
监听数据的变化执行回调函数
class
文本 :class="active" 没有加单引号的active是一个变量不是字符串
对象 :class="{'active':flag}"
数组 :class="list"
style
:style="{color:'red',fontSize:'24px'}"
css属性驼峰式写法
回顾
数组 :indexOf()查找对应下标
删除:shift 前删除
pop 后删除
splice 中间删除
添加
unshift 前加
push 后加
splice 也可以添加
翻转 reverse
转字符串 join()
连接数组 concat()
高阶
filter过滤
forEach遍历
map映射
reduce累计
some有一个
every每一个
find查找符合条件元素
findIndex查找符合条件的元素下标
sort排序
字符串
indexOf
lastIndexOf 查询字符串下标,找不到返回-1
split("")分割为数组
slice (start,end)切割字符串
subString(start,end)截取字符串(按下标end)
subStr(start,len)截取字符串(按长度len)
JSON
eval()字符串当js执行
JSON.parse(str) json字符串转换为js对象
JSON.stringify(obj)把js对象转换为json字符串
本地存储localStorage
getItem(key)获取值
setItem(key,value)存储值
removeltem(key)删除存储
clear()清空
更多推荐
所有评论(0)