Foreword
Many students who use Vue are often the easiest instructions to ignore. Since many students who are beginners and have not even started to contact Vue are considered here, before introducing v-clos, I will use the well-known v-model to write a small demo.
v-model
I believe that you are not unfamiliar with v-model. In short, it is used to create two-way data binding on form controls and components.
First, we build a small Vue environment and introduce Vue.js into an html page.
Here's a little chestnut for you:
<body>
<div id="app">
<input type="text" v-model="message"><br>
这里是文本框输入的值——{
{
message}}
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
message: '你好，几何心凉!',
},
})
</script>
The result of running a very simple example is beyond doubt!
Below we see the two-way relationship more directly
1. We change the data in the model by going to the console
We can find that we change the value of the message in the model, and the value in the View changes accordingly
2. We view the changes in the model by changing the value in the View in the text box
We found that when we changed the value in the View through the text box, the value in our Model also changed.
Summary
Through the above example, do you have a closer understanding of Vue's two-way binding, because we can only change the data of View through form elements, of course, our other form elements are also possible, we are not different an enumeration;
v-model modifier
1..lazy
We can see in the above animation that the text box bound by v-model will be updated to the model data as long as the value of the text box changes. In many cases, we may implement a certain function coherently but will Affects our performance, so we use a .lazymodifier
that will help us synchronize the value of the text box to the Model when our text box loses focus
<body>
<div id="app">
<h3>我是测试——{
{
message}}</h3>
<input type="text" v-model.lazy="message">
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
message: '',
},
})
</script>
Take a look at the effect
2..number
We still take the text box as an example. Many times we need some values for the user to fill in, and this value may be expected to be a number for us to calculate. At this time, many students think of many ways, conversion, input to judge, etc., But in fact, there is a modifier in v-model that can help us fulfill this requirement
Let's take a look at it through a small chestnut. First of all, we want to enter a value in each of the two text boxes and we will sum
it up. You can look at the result.
We can see that it is not the result we want, it is used as splicing instead of summation, then we add the .number modifier to try it out
<body>
<div id="app">
<h3>我是求和——{
{
num1+num2}}</h3>
<input type="text" v-model.number="num1">
<input type="text" v-model.number="num2">
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
message: '',
num1: '',
num2: '',
},
})
</script>
Let's see the results
3..trim
This one should be familiar to everyone. It is used more, that is, to remove spaces, but it will only remove spaces at both ends of the text box, and will not remove the spaces in the middle.
<body>
<div id="app">
<h3>我是测试——{
{
message}}</h3>
<input type="text" v-model.trim="message">
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
message: '',
},
})
</script>
see the effect
common sense:
In fact, the v-model bound to the text box here is just syntactic sugar. The value attribute and the input event are used to complete the two-way binding. When the value of the text box changes, we trigger the input event to change the value we bind. At the same time, the value of our text box is also linked to the message
v-cloak
What exactly does this v-cloak do, first let's look at the following code
<body>
<div id="app">
<h3>我是测试——{
{
message}}</h3>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
message: '你好几何心凉',
},
})
</script>
Then we found that when the page is rendered, the following moment will appear
and flash by immediately
This phenomenon occurs in our actual development process, especially when our network status is not very good or the response of the back-end interface is relatively slow, so we use our v-cloak
. In fact, his principle is display:none everyone It should be understood, that is, the Dom element is hidden before the variable bound in our data has a value, so the above problem will not occur.
