1.v-once指令
该指令表示元素和组件只渲染一次，不会随着数据的改变而改变
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="jdg"> <h1>{{msg}}</h1> <h1 v-once>{{msg}}</h1> </div> <script src="../vue.js"></script> <script> const app=new Vue({ el:'#jdg', data:{ msg:'JDG' } }) </script> </body> </html>我通过控制台修改msg的值
2.v-html指令
我们从服务器中请求的数据本身就是一个HTML代码，使用{{}}来输出，那么得到的就是一段HTML代码，我们使用这个指令可以得到一段链接
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="jdg"> <p>{{link}}</p> <p v-html='link'></p> </div> <script src="../vue.js"></script> <script> const app=new Vue({ el:'#jdg', data:{ link:'<a href="https://www.baidu.com/">百度一下</a>' } }) </script> </body> </html>3.v-text指令
这一条指令和Mustache语法类似，不同的是他会把标签内的元素全部覆盖
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="jdg"> <p>{{link}}总冠军</p> <p v-text='link'>总冠军</p> </div> <script src="../vue.js"></script> <script> const app=new Vue({ el:'#jdg', data:{ link:'湖人' } }) </script> </body> </html>4.v-pre指令
显示未被浏览器解析之前的代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="jdg"> <p>{{link}}</p> <p v-pre>{{link}}</p> </div> <script src="../vue.js"></script> <script> const app=new Vue({ el:'#jdg', data:{ link:'湖人' } }) </script> </body> </html>5.v-clock指令
不加v-clock
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> [v-clock]{ display: none; } </style> </head> <body> <div id="jdg"> <p>{{link}}</p> </div> <script src="../vue.js"></script> <script> setTimeout(function(){ const app=new Vue({ el:'#jdg', data:{ link:'湖人总冠军' } }) },1000) </script> </body> </html>由于延时调用，标签没有时间解析就会出现这种情况
加上v-clock，在标签没有解析之前元素会存在这个属性，解析之后就不存在了
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> [v-clock]{ display: none; } </style> </head> <body> <div id="jdg"> <p v-clock>{{link}}</p> </div> <script src="../vue.js"></script> <script> setTimeout(function(){ const app=new Vue({ el:'#jdg', data:{ link:'湖人总冠军' } }) },1000) </script> </body> </html>6.Mustache语法
使用大括号把Vue中data中的元素括起来，这样就可以解析data变量了
