vue常用指令及其作用

常用指令有:

内容渲染指令:v-html , v-text

作用:给元素添加内容

条件渲染指令:v-show , v-if , v-else , v-else-if

作用:控制元素是否显示与隐藏(v-else , v-else-if辅助v-if进行判断渲染,要紧挨着v-if使用)

事件绑定指令: v-on

作用:给元素注册事件

语法:v-on:事件名=' 内联语句 或 methods中的函数名'

简写:@事件名='内联语句 或 methods中的函数名'

methods函数内的js指向Vue实例

属性绑定指令: v-bind

作用:动态设置html的标签属性

语法:v-bind:属性名=' 表达式'

简写: :属性名=' 表达式'

双向绑定指令:v-model

作用:用于表单元素,数据和视图的双向改变

语法:v-model=’变量‘

v-model 相当于

文本框或密码框相当于 :value="数据"+@input="数据=$event.target.value"

复选框 : checked="数据"+@change="数据=$event.target.checked"

下拉列表 : selected="数据"+@change="数据=$event.target.selected"

列表渲染指令:v-for

作用:基于数据循环,多次渲染整个元素

v-for 要搭配 :key 使用

作用是:给循环列表项添加唯一标识,便于vue列表可以正确的复用,提高渲染性能,推荐是id,索引可能会改变,vue会默认原地修改元素(就地复用)

其中:v-if ,v-show 都可以控制元素的显示与隐藏

v-if :是通过js动态创建dom元素或删除元素,v-if可以与v-else , v-else-if搭配使用哦的

v-show:是通过css的display属性来控制元素的显示与隐藏

频繁切换元素显示与隐藏用v一show,其余可以用v-if

你可能感兴趣的:(vue笔记,vue.js,javascript,前端)