Fast forward!!!! Some api explanations of Vue

1.watch to observe the change of the calculation result of an expression or a function on the Vue instance
The usage is as follows

 <div id="app">
        <input type="text" v-model="count">//monitor
        <h1>{{count}}</h1>
    </div>
 data() {
     return {
        count:1//Initial data
}
},
            watch: {//monitor
                count(val){
                    console.log(val);
                    
                }
            },

And then we turn on the console

You can see that watch has monitored the change of our count data and recorded it
2.v-html updates the innerHTML of the element. Note: the content is inserted as ordinary HTML - it will not be compiled as Vue template. Generally speaking, if there are HTML tags in the data, v-html will automatically convert the data tags
such as

data() {
  return {
 str:'<h1>hello world</h1>'
 }
 },
<div id="app">    
 <div>{{str}}</div>
</div>

Rendering directly on the page like this will send this effect

Use v-html at this time

<div id="app">    
 <div v-html="str"></div>
</div>

Our page will look like this

v-html correctly interprets h1 tags in str
3. Modifiers number and trim
If you want to automatically change the user's input value to numeric type, you can add the number modifier to the v-model:
for example

 <div id="app">
        {{age+20}}
        <input type="text" v-model="age">
</div>
data() {
  return {
  age:10,                  
}
},

This will be displayed in the web page

The text box is of string type by default, so the result is spliced
Next, add the number modifier

 <div id="app">
        {{age+20}}
        <input type="text" v-model.number="age">
  </div>

give the result as follows

If you want to automatically filter the first and last blank characters entered by the user, you can add a trim modifier to the v-model:
As shown in the figure

<div id="app">
        {{age+20}}
        <input type="text" v-model.number="age">
        <input type="text" v-model.trim="nickname">
    </div>
 data() {
                return {
                    nickname: '',
                    age: 10,
                }
            },
watch: {//monitor
   nickname(val) {
console.log(val);                   
},}

Then open the web page

You can see that the spaces have been filtered out
4. Press @ keydown. This is a syntax sugar script
for example

 <div id="app">//This is the Enter key press event. Press to call the login event, and 111 will pop up
  <input type="text" v-model.trim="nickname" @keydown.enter='login'>
  </div>
  methods: {//method
                login() {
                    alert(111)
                }
    },

design sketch

Tags: Vue

Posted on Thu, 04 Jun 2020 10:57:43 -0400 by Sherman