There are several data rendering methods and related instructions in Vue. The following will be introduced one by one:
First, the interpolation expression
Interpolation expressions are wrapped in two curly brackets {{}} and attribute attributes are defined in the Vue instance:
the instructions provided by Vue can easily render the data on the page without manually operating the DOM element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入Vue -->
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
msg:"Hello Vue!"
}
})
</script>
</body>
</html>
Because the syntax of the interpolation expression is {{}}, it is also called mustache mustache expression
Second, v-clock
The interpolated expression has a problem of flickering.
When the interpolated expression is loaded in the case of a network speed card, the page will display {{xxx}}. The content will be displayed when the page is loaded, which affects the appearance.
At this time, the v-cloak attribute can be added to solve the problem of interpolated expression {{}} flickering
<div id="app">
<!-- 解决插值表达式闪烁的问题 -->
<p v-cloak>{{msg}}</p>
</div>
Then add a css style to v-clock:
<style>
[v-cloak]
{
display: none;
}
</style>
In this way, in the case of a network speed card, the interpolation expression will not be displayed and will be hidden by display: none.When the page is loaded, the content will be displayed directly.
Three, v-text
The effect of v-text and {{}} interpolation expressions are almost all display data
<div id="app">
<h4 v-text="msg"></h4>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
msg:"Hello Vue!"
}
})
</script>
The difference between v-text and interpolation expressions is:
v-text does not have a flicker problem
because it is not written in the expression but added to the attribute
But the interpolation expression also has its advantages: the
interpolation expression can add any content before and after :
for example:
<p v-cloak>---{{msg}}---</p>
Because the interpolation expression will only replace its own placeholder and will not affect other content,
and v-text will overwrite the original content of the element
Four, v-html
If you want to render the HTML tag v-text, it wo n’t work because v-text does n’t escape the HTML tags
.
You need to use v-html at this time :
the th: utext attribute similar to Thymeleaf will escape Html tags
<!-- v-html可以转义html标签 -->
<div v-html="msg"></div>
<script>
var vm=new Vue({
el:"#app",
data:{
msg:"Hello Vue!"
}
})
</script>
