{{}}
{{}} =》插值表达式
插值表达式不能使用在属性中
使用{{}}方式在网速较慢时会出现问题,在数据未加载完成时,页面会显示出原始的{{}},加载完毕后才会显示正确的数据,我们称为插值闪烁
v-text , v-html , v-model
- 使用指令来替代插值表达式,指令必须在标签里面使用
v-text :将数据输出到元素内部,如果输出的数据有HTML代码,会作为普通文本输出
v-html :将数据输出到元素内部,如果输出的数据有HTML代码,会被渲染
属于单项绑定
v-model : 数据的双向绑定
@click
v-on:click: 简写成为@click,
事件修饰符:
.stop:阻止事件冒泡(@click.stop)
.prevent:阻止默认事件发生
.capture:使用事件捕获模式
.self:只有元素自身触发事件才执行。(冒泡或捕获的都部执行)
.once:只执行一次
v-for
遍历数组:
v-for=“arr in arrys”
v-for="(arr,index) in arrys"
遍历对象:
v-for=“value in object”
v-for="(value,key) in object"
v-for="(value,key,index) in object"
1个参数时,得到的时对象的值
2个参数时,第一个是值,第二个是键
3个参数时,第三个是索引,从0开始
遍历数字:
v-for=“value in 5”
:KEY的作用
就算数组或者对象的顺序改变时,可以知道具体的KEY发生了改变,只需要徐然修改过的行,提高了渲染效率
v-if
控制页面的渲染,当结果为true时,所在的元素才会被渲染
v-if=“布尔表达式”
v-else
v-if 和 v-else 之间不能包含其它标签
比较消耗性能:会重新渲染,一次性判断时使用
v-show
v-show 只是把样式修改为 display:none
如果频繁切换展示不展示,使用 show
v-bind
v-bind: (缩写)省略为 :
作用:把普通的html属性变成 vue的特有属性
不仅仅支持普通变量,还能支持对象和数组