Vue常用内置指令有哪些

这篇文章主要介绍了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';                else                    event.target.style.color = '';            }                            }    })</script>

事件修饰符

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

<!--举个例子--><a href="Http://www.baidu.com" @click.prevent="show">跳转到百度</button>

按键修饰符

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

<!--举个例子--><!--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="">请选择城市</option>    <option value="1">北京</option>    <option value="2">上海</option>    <option value="3">广州</option></select>

专属修饰符

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

<!--举个例子--><input type="text" v-model.number="n1"> + <input type="text" v-model.number="n2"> = <span>{{ n1+n2 }}</span>

五、条件渲染指令

v-show

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

<p v-show="flag">这是被 v-show 控制的元素</p>

v-if

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

<p v-if="flag">这是被 v-if 控制的元素</p>

v-else-if

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

<div v-if="type === 'A'">优秀</div><div v-else-if="type === 'B'">良好</div><div v-else-if="type === 'C'">一般</div><div v-else>差</div>

六、列表渲染指令

v-for

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

• item是 被循环的每一项 ，名字随意

• items是 待循环的数组 ，名字随意

<table>    <thead>        <th>索引</th>        <th>ID</th>        <th>姓名</th>        <th>性别</th>    </thead>    <tbody>        <!-- v-for还支持一个可选的第二个参数，即当前项的索引。语法格式为(item,index)in items -->        <!-- 注意：item和index都是形参，可以根据需要进行重命名，如：(user,i)in userlist -->        <!-- 注意：item和index除了可以被自己的子元素访问外，自身也可以使用 -->        <!-- 注意：只有在需要用到索引时，才写这第二个参数 -->        <tr v-for="(item,index) in list">            <td>{{ index }}</td>            <td>{{ item.id }}</td>            <td>{{ item.name }}</td>            <td>{{ item.gender }}</td>       </tr>    </tbody></table>------------------------------------------------------------<script>    //创建vue的实例对象    const vm = new Vue({        data: {            list: [                { id: 1, name:'张三', gender:'男' },                { id: 2, name:'李四', gender:'女' },                { id: 3, name:'王五', gender:'男' }            ]        }    })</script>

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

• key 的属性值尽量为 id，为 index 则无意义（因为index不和内容有一个强制的绑定关系）

• key 的属性值只能是 字符串/数字 类型，否则报错

• key 的属性值必须具有唯一性（不重复 且 内容和值有一个强制的绑定关系）

<tr v-for="(item,index) in list" :key="item.id">

关于“Vue常用内置指令有哪些”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“Vue常用内置指令有哪些”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网精选频道。