Vue常用内置指令有哪些

这篇文章主要介绍了Vue常用内置指令有哪些的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Vue常用内置指令有哪些文章都会有所收获,下面我们一起来看看吧。

站在用户的角度思考问题,与客户深入沟通,找到马尾网站设计与马尾网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:成都网站设计、网站制作、企业官网、英文网站、手机端网站、网站推广、域名与空间、网页空间、企业邮箱。业务覆盖马尾地区。

Vue常用内置指令有哪些

指令分类

指令(Directives),是vue为开发者提供的 模板语法,用于辅助开发者渲染页面的基本结构。

所用到的数据定义在实例的 data中,事件定义在实例的 methods

  • 内容渲染指令:辅助开发者渲染DOM元素的文本内容

  • 属性绑定指令:辅助开发者为元素的属性动态绑定属性值

  • 事件绑定指令:辅助开发者为元素绑定事件

  • 双向绑定指令:辅助开发者在不操作DOM的前提下,快速获取表单数据(数据源的变化会同步到页面上,页面上的变化也会同步到数据源中)

  • 条件渲染指令:辅助开发者按需控制DOM的显示与隐藏

  • 列表渲染指令:辅助开发者基于一个数组来循环渲染一个列表结构

一、内容渲染指令

v-text

只能渲染纯文本内容,会覆盖标签内部原本的内容

性别

{{ }} 插值表达式

只能渲染纯文本内容,不会覆盖标签内部原本的内容

性别:{{ gender }}

v-html

能将带标签的字符串渲染成html内容,会覆盖标签内部原本的内容

该内容会被覆盖

 

二、属性绑定指令

v-bind:或:

为元素的属性 动态绑定属性值

 
 

注意:插值表达式v-bind还支持javascript表达式的运算

{{ 1 + 2 }}  //一元运算
{{ ok ? 'YES' : 'NO'}}  //三元运算
{{ message.split('').reverse().join('') }}  //字符串的反转
  

三、事件绑定指令

v-on:或@

为元素绑定事件

+1 
+1 
-----------------------------------------------------------

传参

  • 没有传参:则会有默认的形参event,它是一个对象,里面的target属性指向的是当前绑定事件的DOM元素

  • 传一个参:event则会被覆盖,为了能用自己传的参又能保留event,则可以手动再传一个实参$event,形参随意

+N
------------------------------------------------------------

事件修饰符

只要是事件,就能使用的修饰符,以下列举5个常用的

事件修饰符说明
.prevent阻止默认行为(例:阻止a链接的跳转、阻止表单的提交)
.stop阻止事件冒泡
.capture以捕获模式触发当前的事件处理函数
.once绑定的事件只触发一次
.self只有在event.target是当前元素自身时触发事件处理函数

跳转到百度

按键修饰符

只能在触发键盘事件时,使用的修饰符,以下列举2个常用的

按键修饰符说明
.esc按键盘esc键时
.enter按键盘enter键时


四、双向绑定指令

v-model

快速获取表单数据(只应用于表单元素,如:input、textarea、select)


    请选择城市
    北京
    上海
    广州

专属修饰符

只能给v-model使用的修饰符

专属修饰符说明
.number自动将用户输入的值转为数值类型
.trim自动过滤用户输入的首尾空白字符
.lazy在失去焦点时才自动更新数据(一般情况下都是实时更新的)

 +  = {{ n1+n2 }}

五、条件渲染指令

v-show

控制DOM的显示与隐藏(值为true显示,值为false隐藏),其原理为 动态添加/移除display:none样式,一般用于需频繁切换

这是被 v-show 控制的元素

v-if

控制DOM的显示与隐藏(值为true显示,值为false隐藏),其原理为 动态创建/移除元素,一般用于默认不展示且展示较少

这是被 v-if 控制的元素

v-else-if

配合 v-if指令一起使用,否则将不会被识别

优秀
良好
一般

六、列表渲染指令

v-for

基于一个数组来循环渲染一个列表结构,它有特定的语法结构 v-for="item in items"


    
        
        
        
        
    

    
        
        
        
        
        
            
            
            
            
       
    
索引ID姓名性别
{{ index }}{{ item.id }}{{ item.name }}{{ item.gender }}
------------------------------------------------------------

注意:在.vue文件中,只要用到 v-for指令,一定要绑定一个 :key属性

关于“Vue常用内置指令有哪些”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“Vue常用内置指令有哪些”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注创新互联行业资讯频道。


文章标题:Vue常用内置指令有哪些
转载来于:http://pwwzsj.com/article/piggco.html

其他资讯