This is the third day of my participation in the August Text Challenge.More challenges in August

< div id = "app" > {{title}} {{[1, 2, 3, 4] [2]}} {{{" name ":" pangsir ", "age" : 30}. The age}} {{sayHello ()}} < / div >Copy the code
  • Creating Vue instances (objects)
new Vue({ el:"#app", data:{ title:"hello world!" }, methods:{ sayHello:function(){ return "hello vue"; }}});Copy the code

When using {{variable name}} to obtain data in data, you can write expressions, operators, call related methods and logical operations in {{}}

  • code
<! DOCTYPE HTML > < HTML lang="en"> <head> <meta charset="UTF-8"> <title> Interpolation </title> </head> <body> <! {{}} --> <! -- 2. You can use operators and logical operators to calculate --> <! -- 3. Can use function, the invocation style (the return value, if there are no returns undefined) -- > < div id = "app" > < h3 > {{title}} < / h3 > < h3 > {{books [2]}} < / h3 > <h3>{{user.bookName}}</h3> <hr/> <h3>{{user.bookName+"=>"+user.author+"=>"+(user.price-10)}}</h3> <h3>{{user.price>50?" The price is right ":" the price is a little bit cheaper "}} < / h3 > < hr / > < h3 > {{sayHello ()}} < / h3 > < h3 > {{sayWorld ()}} < / h3 > < h3 > {{getBookName ()}} < / h3 > < hr / > < / div > <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> let viewModel = new Vue({ el:"#app", Data: {title: "interpolation expressions," books: [" journey to the west ", "a dream of red mansions", "three kingdoms", "water margin"], user: {bookName: "my mother", the author: "Lao she," price: 50.25}}, Methods :{sayHello:function(){return "Hello, world! ; }, sayWorld:function(){console.log(" no return value, display null ")}, GetBookName :function(){this.title :function(){this.title :function(){this.title :function(){this.title :function(){this.title :function(){this.title :function(){this.title :function(){this.title :function(){this.title :function(){this.title :function() return this.books[1]; }}}); // create ViewMode, console.log(viewModel); </script> </body> </html>Copy the code
  • V-html: Equivalent to innerHTML, the value of an attribute in a VUE is used as an HTML element
  • V-text: equivalent to innerText, the value of an attribute in a VUE is used only as plain text
<div id="app">
  <span v-html="mylink"></span>
  <span v-text="mylink"></span>
</div>
Copy the code
New Vue ({el: '# app, data: {link:' http://www.baidu.com ', mylink: '< a href = "http://www.baidu.com" > baidu about < / a >'}});Copy the code

Okay, I know you can do this. What’s the difference between {{}} interpolation?

  • code
<! DOCTYPE HTML > < HTML lang="en"> <head> <meta charset="UTF-8"> <title> Display element content </title> </head> <body> <! -- JavaScript element content: content between tags --> <! We can use interpolation to control the display of element content, but the Vue framework provides two instructions that perform a similar operation: V-text: equivalent to innerText, use attribute values in the Vue as text elements <div id="app"> <h3> title :{{title}}</h3> <h3 v-text="' title :'+title"> - v - text to replace the original element content - > < h3 v - HTML = "' title: '+ title" > title: < / h3 > <! - v - HTML to replace the original element content - > < hr / > < p v - text = "friendLink" > < / p > < p v - HTML = "friendLink" > < / p > < p > link: {{friendLink}} < / p > < / div > </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> let viewModel = new Vue({ El: "# app," data: {title: "journey to the west", friendLink: "< a href =" http://www.baidu.com "> baidu once < / a >"}}); // create ViewMode, console.log(viewModel); </script> </body> </html>Copy the code