Vue指令入门之聊聊六大常用内置指令-View.js-php.cn

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

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

指令分类

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

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

内容渲染指令：辅助开发者渲染DOM元素的文本内容
属性绑定指令：辅助开发者为元素的属性动态绑定属性值
事件绑定指令：辅助开发者为元素绑定事件
双向绑定指令：辅助开发者在不操作DOM的前提下，快速获取表单数据（数据源的变化会同步到页面上，页面上的变化也会同步到数据源中）
条件渲染指令：辅助开发者按需控制DOM的显示与隐藏
列表渲染指令：辅助开发者基于一个数组来循环渲染一个列表结构

一、内容渲染指令

v-text

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

性别

Nach dem Login kopieren

{{ }} 插值表达式

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

性别：{{ gender }}

Nach dem Login kopieren

v-html

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

该内容会被覆盖

Nach dem Login kopieren

二、属性绑定指令

v-bind：或：

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

三、事件绑定指令

v-on：或@

为元素绑定事件

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

Nach dem Login kopieren

传参

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

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

Nach dem Login kopieren

事件修饰符

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

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

 跳转到百度

Nach dem Login kopieren

按键修饰符

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

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

Nach dem Login kopieren

四、双向绑定指令

v-model

快速获取表单数据（只应用于表单元素，如：input、textarea、select）

Nach dem Login kopieren

专属修饰符

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

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

  +  = {{ n1+n2 }}

Nach dem Login kopieren

五、条件渲染指令

v-show

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

这是被 v-show 控制的元素

Nach dem Login kopieren

v-if

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

这是被 v-if 控制的元素

Nach dem Login kopieren

v-else-if

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

优秀
 良好
 一般
 差

Nach dem Login kopieren

六、列表渲染指令

v-for

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

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

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

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

Nach dem Login kopieren

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

key 的属性值尽量为 id，为 index 则无意义（因为index不和内容有一个强制的绑定关系）
key 的属性值只能是字符串/数字类型，否则报错
key 的属性值必须具有唯一性（不重复且内容和值有一个强制的绑定关系）

Nach dem Login kopieren

（学习视频分享：web前端开发、编程基础视频）

Das obige ist der detaillierte Inhalt vonVue指令入门之聊聊六大常用内置指令. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!