Vue uses an HTML-based templating syntax that enables us to declaratively databind its component instances to the rendered DOM. All Vue templates are syntactically valid HTML that can be parsed by compliant browsers and HTML parsers.
Interpolation syntax:
The most basic form of data binding is interpolation syntax. Directly use { {}} to write content in double curly brackets, which can be directly parsed by Vue and then rendered on the DOM.
<span>{
{ msg }}</span> // msg是在data中定义的变量Raw HTML:
Rendering tags directly, using the command v-html rendering method is very dangerous, and it is very easy to cause XSS leakage. Use only when the content is known to be safe and trustworthy. The content rendered with v-html will completely replace the content of the original label, and even the original label will be replaced.
<span v-html='html'>{
{ msg }}</span>Dynamic data binding:
Dynamic data binding v-bind. For example, when using a loop, you need to write the unique value of id for diff comparison. So when writing id, if you don't use v-bind, it will be rendered as a string. Data bound using v-bind becomes responsive. The frequency of dynamic data binding is very high, so vue provides a shorthand form of v-bind, that is, directly use: to bind.
<span v-bind:id='proId'>{
{ msg }}</span> // 原始写法
<span :id='proId'>{
{ msg }}</span> // 简写JavaScript expression:
If our logic is so simple that it can be summed up in one sentence, we can write it directly in { {}}.
<span v-bind:id='proId'>{
{ ok ? 'yes' : 'no' }}</span>