vuejs最常用命令及方法归纳总结

vue对于前端工程师已经不可替代

在web网站建设,项目开发中,vue.js使用率越来越高,在实际工作中,vue技术的使用也成为衡量一个合格的前端工程师的重要标准,那么,在日常工作中,有哪些常用的vue操作指令呢?

1.创建一个vue实例化对象:想要使用vue,必须先声明一个新的vue对象,并创建对应的vue实例化对象区域,代码示例:

vue实例化

2.v-model数据双向绑定指令:在日常表单,输入框等位置,想要获取数据及提交表单时,需要用到v-model进行对应html元素的数据监视,当数据框数据发生改变,绑定v-model之后,数据会动态传入设定的参数里。代码示例:

v-model数据双向绑定

3.v-if数据真假判断方法:v-if常用语判断表达式的真假,并根据真假结果决定显示或者隐藏该html元素,同时该隐藏是html元素将从代码中直接删除。代码示例:

.v-if数据真假判断

4.v-show数据真假判断方法:v-show与v-if用法类似,都根据判断结果决定html元素是否显示,不过v-show为假时,不是将元素完全删除,而是通过display:none将元素隐藏。代码示例:

v-show数据真假判断

5.v-for数据循序遍历方法:v-for在日常工作使用中及其广泛,如常见的列表数据获取,写法规则为:

v-for数据循序遍历

6.v-text与v-html数据替换方法:v-text及v-html方法同为对html元素及标签内容进行覆盖,不过v-text只覆盖文本内容,而v-html可以直接写入html标签。代码示例:

v-text与v-html数据替换

7.v-bind属性绑定方法:为html标签绑定新的属性,类名方法,url地址信息等(注:常用“:”简写);

v-bind属性绑定

8.v-on标签事件绑定方法,如点击事件,鼠标滑动事件等(注:常用“

”简写)。v-on可以绑定任何属性,包括鼠标点击,鼠标滑动,键盘按下及抬起等任何操作方法,同时v-on还可以添加事件修饰符,用来实现组合按键的效果。代码示例:

v-on标签事件绑定方法v-on标签事件绑定


转载请注明:http://www.aierlanlan.com/cyrz/3534.html

  • 上一篇文章:
  •   
  • 下一篇文章: