Vue内置指令功能特性概述

Vue内置13个指令，码笔记分享Vue指令的功能特性概述：

Vue内置指令特性概述

Vue内置指令包括：v-text、v-html、v-show、v-if、v-else、v-else-if、v-for、v-on、v-bind、v-model、v-pre、v-cloak、v-once；

• 1、v-text：更新元素的textContent；
  例如：
  
  <span v-text="msg"></span> 等同于 <span>{{msg}}</span>；

  1	<span v-text="msg"></span> 等同于 <span>{{msg}}</span>；

• 2、v-html：更新元素的innerHTML；
• 3、v-show：条件渲染指令，为DOM设置css的style属性
• 4、v-if：条件渲染指令，动态在DOM内添加或删除DOM元素
• 5、v-else：条件渲染指令，必须跟v-if成对使用
• 6、v-else-if：判断多层条件，必须跟v-if成对使用；
• 7、v-for：循环指令；
  例如：
  
  <li v-for="(item,index) in todos"></li>

  1	<li v-for="(item,index) in todos"></li>

• 8、v-on：用于监听DOM事件；
  例如：v-on:click v-on:keyup
• 9、v-bind：响应并更新DOM特性；
  例如：v-bind:href v-bind:class v-bind:title v-bind:bb
• 10、v-model：数据双向绑定；用于表单输入等；
  例如：
  
  <input v-model="message">

  1	<input v-model="message">

• 11、v-pre：不需要表达式，跳过这个元素以及子元素的编译过程，以此来加快整个项目的编译速度；
  例如：
  
  <span v-pre>{{ this will not be compiled }}</span>；

  1	<span v-pre>{{ this will not be compiled }}</span>；

• 12、v-cloak：不需要表达式，这个指令保持在元素上直到关联实例结束编译；
• 13、v-once：不需要表达式，只渲染元素或组件一次，随后的渲染，组件/元素以及下面的子元素都当成静态页面不在渲染。

Vue内置指令详解

参考：Vue指令大全汇总及详解

2023腾讯云服务器超便宜，这个价格太可以了，抓紧上车！

• 2核2G3M服务器30元/3个月：点此直达
• 2核2G3M服务器95元一年：点此直达
• 2核2G4M服务器112元/1年：点此直达
• 2核2G4M服务器396元/1年：点此直达
• 2核4G5M服务器168元/3年：点此直达
• 2核4G5M服务器628元/3年：点此直达
• 4核8G12M服务器446元/1年 518元15个月：点此直达
• 8核16G18M服务器1668元/15个月
• 16核32G28M服务器3468元/15个月

注意：以上特价轻量服务器限制条件为“产品首单特惠”，如果你的腾讯云账号已经是老用户，建议重新注册一个腾讯云账号，如果你是新用户符合条件，那么无脑入，这个CPU内存带宽配置，价格确实便宜，值得买！