I. conclusion
One sentence summary:
To parse data in vue templates, you can use brace expressions, such as {{msg}}, or instructions, such as v-html (insert text by HTML tags), v-text (insert text by text), etc
<div id="app"> <p>{{msg}}</p> <p>{{msg.toUpperCase()}}</p> <p v-text="msg"></p> <p v-text="html1"></p> <p v-html="html1"></p> </div> <script src="../js/vue.js"></script> <script> let vm=new Vue({ el:'#app', data:{ msg:'hello，Booming Flowers and a Full Moon', html1:'<a href="https://Fanrenyi. Com "> a programming video learning website to let the learned things never forget</a>' } }); </script>
1. What are the functions of the v-html and v-text instructions?
v-html: inserting text as HTML tags
v-text: insert text as text
2. What is the template we often say in vue (that is, the first m (view) in mvvm)?
Dynamic html page: the vue framework is to insert data with some js code (js expression) in html
2, VUE template syntax
Video location of corresponding courses of Blog:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>3,VUE Template grammar</title> 6 </head> 7 <body> 8 <!-- 9 10 Understanding of views (templates) 11 Dynamic html page 12 ( 13 Backend framework mvc The template in the pattern is html With some back-end code to insert data, 14 vue It's in the frame html Take some of them. js Code ( js Expression) to insert data, 15 There js It's the object. 16 ) 17 18 vue Parsing data in the middle template 19 Brace expressions: for example{{msg}} 20 instructions(with v-Custom label properties at the beginning): v-html，v-text etc. 21 22 v-html: with html Label insert text 23 v-text: Insert text as text 24 25 --> 26 <div id="app"> 27 <p>{{msg}}</p> 28 <p>{{msg.toUpperCase()}}</p> 29 <p v-text="msg"></p> 30 <p v-text="html1"></p> 31 <p v-html="html1"></p> 32 </div> 33 <script src="../js/vue.js"></script> 34 <script> 35 let vm=new Vue({ 36 el:'#app', 37 data:{ 38 msg:'hello，Booming Flowers and a Full Moon', 39 html1:'<a href="https://Fanrenyi. Com "> a programming video learning website to let the learned things never forget</a>' 40 } 41 }); 42 </script> 43 </body> 44 </html>