Vue指令入门之聊聊六大常用内置指令-Vue.js-PHP中文网

本篇文章带大家了解一下vue指令，介绍一下vue六大常用内置指令，希望对大家有所帮助！

Vue指令入门之聊聊六大常用内置指令

指令分类

指令（Directives），是vue为开发者提供的 模板语法 ，用于辅助开发者渲染页面的基本结构。（学习视频分享：vuejs视频教程）

所用到的数据定义在实例的 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：或@

为元素绑定事件

 
 
-----------------------------------------------------------

传参

没有传参：则会有默认的形参event，它是一个对象，里面的target属性指向的是当前绑定事件的DOM元素
传一个参：event则会被覆盖，为了能用自己传的参又能保留event，则可以手动再传一个实参$event，形参随意


------------------------------------------------------------

事件修饰符

讯飞听见会议

科大讯飞推出的AI智能会议系统

下载

只要是事件，就能使用的修饰符，以下列举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"

item是 被循环的每一项 ，名字随意
items是 待循环的数组 ，名字随意


    
        索引
        ID
        姓名
        性别
    

    
        
        
        
        
        
            {{ index }}
            {{ item.id }}
            {{ item.name }}
            {{ item.gender }}
       
    

------------------------------------------------------------