<body> <div id="app1"> <div>{{msg}}</div> </div> <script type="text/javascript" src="../vue.js"></script> <script type="text/javascript"> var vm = new Vue({ el:'#app1', data: { msg:'Hello vue' } }) </script> </body>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style type="text/css"> [v-clock] { display:none } </style> </head> <body> <div id="app1"> <div v-colck>{{msg}}</div> </div> <script type="text/javascript" src="../vue.js"></script> <script type="text/javascript"> var vm = new Vue({ el:'#app1', data: { msg:'Hello vue' } }) </script> </body> </html>
上面是v-clock指令，解决插值表达式闪动问题
下面是v-text
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style type="text/css"> [v-clock] { display:none } </style> </head> <body> <div id="app1"> <div v-text="msg"></div> </div> <script type="text/javascript" src="../vue.js"></script> <script type="text/javascript"> var vm = new Vue({ el:'#app1', data: { msg:'Hello vue' } }) </script> </body> </html>
v-html解析html的标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style type="text/css"> [v-clock] { display:none } </style> </head> <body> <div id="app1"> <div v-html="msg1"></div> </div> <script type="text/javascript" src="../vue.js"></script> <script type="text/javascript"> var vm = new Vue({ el:'#app1', data: { msg1:'<h1>html</h1>' } }) </script> </body> </html>
v-pre跳过插值表达式的编译，显示原始内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style type="text/css"> [v-clock] { display:none } </style> </head> <body> <div id="app1"> <div v-pre=>{{msg1}}</div> </div> <script type="text/javascript" src="../vue.js"></script> <script type="text/javascript"> var vm = new Vue({ el:'#app1', data: { msg1:'<h1>html</h1>' } }) </script> </body> </html>
v-once可以提高性能
v-model 用在input标签中，数据双向绑定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app1"> <div v-text='msg1'></div> <div> <input type="text" v-model='msg1'> </div> </div> <script type="text/javascript" src="../vue.js"></script> <script type="text/javascript"> var vm = new Vue({ el:'#app1', data: { msg1:'Hello world' } }) </script> </body> </html>