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('') }}  //字符串的反转