-
v-cloak解决初始化导致页面闪动
一般使用{{msg}}时页面会先出现{{msg}}，再跳出内容，添加cloak会先渲染vue实例，再进行页面渲染，与CSS[v-cloak]: { display: none;}结合使用
HTML：<div v-cloak>{{msg}}</div> -
v-once定义他的元素和组件只渲染一次
条件渲染指令
v-if v-else-if v-else
只会渲染变化的元素，出于效率考虑，会复用已有的元素而非重新渲染。解决：加不相同的key值
v-show满足条件就渲染
比较
v-if 实时渲染：页面显示就渲染，不显示就移除
v-show永远存在页面中，只是改变了display属性
v-for当需要将一个数组遍历或枚举一个对象属性的时候循环显示时，就会用到列表渲染指令
用法： 一定是要写在要遍历的元素上，后面接等号
场景：
- 遍历多个对象【一定是数组】key值命名相同
2.遍历一个对象的多个属性 ，key值命名不同
数组的方法（导致页面会重新渲染）
push()往数字组的末尾添加元素,返回数组长度
pop()把数组的最后一个元素移除，返回被删除的元素
shift()删除数组第一个元素，返回被删除的元素
unshift()往数组首尾添加元素，返回添加后的数组的新的长度
splice()可以添加或者删除函数，三个参数（开始操作的位置0，长度，（可选参数））
- 删除：返回删除的元素,splice(0)删除全部元素
- 添加： 添加的位置是开始操作的位置
sort() 排序
reverse()翻转
改变数VUe组检测不到：
改变数组的指定项
改变数组的长度
解决：1.set Vue.set(app.arr,1,car)
2. 通过splice控制长度
过滤filter
方法：
如果方法中有参数，但是没有加括号，会把原生事件对象返回
向上冒泡：
stop 阻止单击事件向上冒泡，在子元素上添加
self 作用在元素本身而非子元素，在父元素上添加
prevent 提交事件不重载页面 ，在form上添加
once 只执行一次的方法
监听键盘事件
（keyup按下键盘 13是enter键）
<input @keyup.13 ="submit"> --指定的keyCode
v-model 用于在表单类元素上双向绑定事件
可以用于input和textarea等
所显示的值只依赖于绑定的值，不关心初始值的value
修饰符
- lazy v-model默认是在input输入时实时同步输入框的数据，而lazy修饰符，可以使其在失去焦点，或者敲回车之后再更新
- number 将输入的字符串转化为number
- trim 自动过滤输入过程中收尾输入的空格
- 单个单选框。
单个单选按钮，直接用v-bind绑定一个布尔值v-bind:checked - 多个单选框
v-model=“选中”选择被选中的value值,配合radio的value使用 - 单个复选框checkbox
绑定一个 布尔值，相当于绑定了checked
可以用v-bind和b-model - 多个复选框
v-model配合value使用，v-model绑定一个数组，如果绑定的是字符串，则会转化为true或者false
下拉框：v-model，绑定在select上，单选和多选都可以绑定字符串或数组，
单选，初始化最好给定字符串，
多选最好给数组
动态绑定值
单选按钮：只需要用v-bind给单个单选框绑定一个value值，此时v-model绑定的就是value值
单个复选框：
<input type="radio" :value="name1" v-model="picked"> 佩琪 ----{{picked}} <br>
<input type="checkbox" v-model="pick" :true-value="name2" :false-value="name3">乔治 -----{{pick}}
pick为true或false，name为model要获取的值
网友评论