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('') }} //字符串的反转
三、事件绑定指令
v-on：或@
为元素绑定事件
+1
+1
-----------------------------------------------------------
传参
+N
------------------------------------------------------------
事件修饰符
只要是事件，就能使用的修饰符，以下列举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指令一起使用，否则将不会被识别
优秀
良好
