江苏龙网

  1. 主页 > 生活百科 > >

入门：Vue六大常用内置指令

vue

指令分类指令（Directives），是vue为开发者提供的 模板语法 ，用于辅助开发者渲染页面的基本结构
所用到的数据定义在实例的 data 中，事件定义在实例的 methods 中

  • 内容渲染指令：辅助开发者渲染DOM元素的文本内容
  • 属性绑定指令：辅助开发者为元素的属性动态绑定属性值
  • 事件绑定指令：辅助开发者为元素绑定事件
  • 双向绑定指令：辅助开发者在不操作DOM的前提下，快速获取表单数据（数据源的变化会同步到页面上，页面上的变化也会同步到数据源中）
  • 条件渲染指令：辅助开发者按需控制DOM的显示与隐藏
  • 列表渲染指令：辅助开发者基于一个数组来循环渲染一个列表结构
一、内容渲染指令v-text只能渲染纯文本内容，会覆盖 标签内部原本的内容
<p v-text="gender">性别</p>复制代码{{ }} 插值表达式只能渲染纯文本内容，不会覆盖 标签内部原本的内容
<p>性别：{{ gender }}</p> 复制代码v-html能将带标签的字符串渲染成html内容，会覆盖 标签内部原本的内容
<p v-html="info">该内容会被覆盖</p> <!-- info可以定义为html语句 -->复制代码二、属性绑定指令v-bind：或：为元素的属性 动态 绑定属性值
<input v-bind:placeholder="tips"> <!--两种写法都可以--><input :placeholder="tips"> <!--两种写法都可以-->复制代码注意：插值表达式 和 v-bind 还支持JAVAscript表达式的运算
{{ 1 + 2 }}//一元运算{{ ok ? 'YES' : 'NO'}}//三元运算{{ message.split('').reverse().join('') }}//字符串的反转复制代码<div :id="'list-' + id"></div><!--字符串和变量的拼接-->复制代码三、事件绑定指令v-on：或@为元素绑定事件
<button v-on:click="add">+1</button> <!--两种写法都可以--><button @click="add">+1</button> <!--两种写法都可以-->-----------------------------------------------------------<script>//创建vue的实例对象const vm = new Vue({methods:{add(){this.count ++; //相当于vm.count ++;}}})</script>复制代码传参
  • 没有传参：则会有默认的形参event，它是一个对象，里面的target属性指向的是当前绑定事件的DOM元素
  • 传一个参：event则会被覆盖，为了能用自己传的参又能保留event，则可以手动再传一个实参$event，形参随意
<button @click="add(1, $event)">+N</button>------------------------------------------------------------<script>//创建vue的实例对象const vm = new Vue({methods:{add(n,event){//修改this.count +=n;//判断if(this.count % 2 === 0)event.target.style.color = 'red';elseevent.target.style.color = '';}}})</script>复制代码事件修饰符只要是事件，就能使用的修饰符，以下列举5个常用的
事件修饰符
说明
.prevent
阻止默认行为（例：阻止a链接的跳转、阻止表单的提交）
.stop
阻止事件冒泡
.capture
以捕获模式触发当前的事件处理函数
.once
绑定的事件只触发一次
.self
只有在event.target是当前元素自身时触发事件处理函数
<!--举个例子--><a href=https://www.isolves.com/it/cxkf/qd/2022-06-05/"http://www.baidu.com" @click.prevent="show">跳转到百度复制代码按键修饰符只能在触发键盘事件时，使用的修饰符，以下列举2个常用的
按键修饰符
说明
.esc
按键盘esc键时
.enter
按键盘enter键时
<!--举个例子--><!--keyup是事件名称.esc是按键修饰符clearInput是事件处理函数--><input type="text" @keyup.esc="clearInput">复制代码四、双向绑定指令v-model快速获取表单数据（只应用于表单元素，如：input、textarea、select）
<input type="text" v-model="username">复制代码<select v-model="city"><option value=https://www.isolves.com/it/cxkf/qd/2022-06-05/"">请选择城市复制代码


推荐阅读


上一篇：Kali与编程：如何安装KALI LINUX中文拼音输入法？

下一篇：详解java中float与double的区别