1.属性绑定
v-bind:title="msg" ,简写形式为:title = “msg”
:class :id :disabled
- 数据的双向绑定(表单绑定)
- v-model:注意只能应用于表单类元素,具有value属性(输入类元素)
- 数据的单项绑定
- v-bind:数据只能从data流向页面,不能从页面流向data
2.事件
-
事件
特殊的事件参数function(e) e是默认传入的,如果要在标签中渲染出来用$event
-
事件修饰符
stop(阻止冒泡;由内到外,不会影响父级元素绑定事件的触发),prevent(阻止事件),once(只执行一次)
表单修饰符
- .number 强制字符串转化为数字
- v-model="num" 是 :value="num" @input ="num"=$event.target.value"
- .lazy :更新视图触发事件由input变为change事件
computed计算
- 从现有数据计算出新的数据(只读)
-
.watch监听
- 监听数据的变化执行回调函数handler,
- handler(参数1,参数2){ } 参数1:数据变化后的 参数2:数据变化前的
- 引用数据类型的监听
- 引用数据监听需要加上deep选项,oval和nval都是最新的值
- 监听数据的变化执行回调函数handler,
-
.class
- :class="active" 没有加单引号的active是一个变量不是字符串
- 对象 :class="{'active':flag}"
- 数组 :class="list"
-
style
- :style="{color:'red',fontSize:'24px'}"
- css属性的驼峰式写法
3.vue中常用到js中的数组,字符串,和json方法
- json 方法
- JSON.parse(str) :把字符产转化为json对象
- JSON.stringify(json数据) :把json转化为字符串
- 数组的方法
- indexOf( ) 查找对应的下表
- 删除----- shift 前删除 pop 后删除 splice 中间删除
- 添加-------unshift 前添加 push 后添加 splice 也可以实现添加
- 翻转 reverse
- 转字符串 arr.json()
- 连接数组 concat( )
- filter 过滤
- map 映射
- reduce 累计
- some 有一个
- every 每一个
- find 查找符合条件元素
- findIndex 查找符合条件的元素下标
- sort 排序
- 字符串的方法
- indexOf lastIndexOf 查询字符串下标,找不到返回-1
- split( 参数),用某种符号分割字符串
- slice(start,end)切割字符串
- subString(start,end)截取字符串 (按下标)
- subStr( start,len) 截取字符串,(按长度)
- 本地存储
- localStorage.getItem(key)获取值
- localStorage.setItem(key,value)存储值
- localStorage.removeItem(key) 删除存储
- localStorage.clear() 清除存储