mustache语法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../vue.js"/> </head> <div id="app"> <h2>{{message}}</h2> <h2>{{message}} ,sku</h2> <h2>{{firname+lasname}}</h2> <h2>{{firname+' '+lasname}}</h2> <h2>{{firname}} {{lasname}}</h2> <h2>{{2*count}}</h2> </div> <script> const vm = new Vue({ el : '#app', data:{ message:'hello', firname:'john', lasname:'bry', count:100 } }) </script> </body> </html>
v-once
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../vue.js"/> </head> <div id="app"> <h2>{{message}}</h2> <h2>{{message}} ,sku</h2> <h2>{{firname+lasname}}</h2> <h2>{{firname+' '+lasname}}</h2> <h2>{{firname}} {{lasname}}</h2> <h2>{{2*count}}</h2> </div> <script> const vm = new Vue({ el : '#app', data:{ message:'hello', firname:'john', lasname:'bry', count:100 } }) </script> </body> </html>
v-html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script src="../vue.js"></script> <div id="app"> <h2>{{url}}</h2> <h2 v-html="url"></h2> </div> <script> const vm = new Vue({ el : '#app', data:{ message:'hello', url:"<a href='https://www.baidu.com'>百度</a>", } }) </script> </body> </html>
v-text
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script src="../vue.js"></script> <div id="app"> <h2>{{message}}</h2> <h2 v-text="message">jhvj</h2> </div> <script> const vm = new Vue({ el : '#app', data:{ message:'hello', } }) </script> </body> </html>
v-pre
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script src="../vue.js"></script> <div id="app"> <h2>{{message}}</h2> <h2 v-text="message">jhvj</h2> </div> <script> const vm = new Vue({ el : '#app', data:{ message:'hello', } }) </script> </body> </html>
v-clock
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> [v-cloak]{ display: none; } </style> </head> <body> <script src="../vue.js"></script> <div id="app" v-cloak> <h2>{{message}}</h2> </div> <script> //vue解析之前有v-cloak //vue解析之后无v-cloak setTimeout(function () { const vm = new Vue({ el : '#app', data:{ message:'hello', } }) },1000) </script> </body> </html>