current position:Home>Front end Vue data binding and MVVM

Front end Vue data binding and MVVM

2022-04-29 05:12:00A little rabbit who likes eating radishes

Data binding

v-bind: One way data binding ←

v-model: Two way data binding ←→, Can only be applied to input elements ( Such as ,input、checkbod、select、textarea).
They have one thing in common : There are value attribute , therefore v-model:value It can be abbreviated
v-model=
Equivalent to
v-model:value=

<!-- * @LastEditors:  A little rabbit who likes to eat radishes  * @Date: 2022-04-19 09:57:45 * @LastEditTime: 2022-04-19 10:12:42 * @FilePath: \vuejs-learn\vue-start\data-bind.html -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> Data binding </title>
  <!-- Icons can be displayed in favorites -->
  <link rel="Bookmark" type="image/x-icon" href="../favicon.svg" />
  <!-- The icon can be displayed in the address bar -->
  <link rel="icon" type="image/x-icon" href="../favicon.svg" />
  <link rel="shortcut icon" href="../favicon.svg">

  <!--  introduce vue -->
  <script src="../vuejs/vue.js"></script>
</head>

<body>
  <div id="root">
    <h2>
      <label for="input1"> One way data binding :</label> <input type="text" id="input1" v-bind:value="name">
      <!-- <br /><label for="input2"> Two way data binding :</label> <input type="text" id="input2" v-model:value="name"> -->
      <br /><label for="input2"> Two way data binding :</label> <input type="text" id="input2" v-model="name">
    </h2>
  </div>
  <script> // Vue.config.productionTip = false; new Vue({
       el: '#root', data() {
       return {
       name: "vue" } } }); </script>
</body>

</html>

el And data Two ways of writing

el Two ways of writing :
1.new Vue

    new Vue({
    
      el: '#root',// The first way to write it 
      data() {
    
        return {
    
          name: "vue"
        }
      }
    });

2. First create v = Vue example , It's mounting .v.$mount(‘#root’);
More flexible

    const x = new Vue({
    
      // el: '#root',
      data() {
    
        return {
    
          name: "vue"
        }
      }
    });
    //setTimeout(
    x.$mount('#root'); // The second way 
	//,1000);

data Two ways of writing
Object type :

data:{
    
    name: "vue"
}

Functional expression
this yes Vue
The return value must be an object
You can't use the arrow function ,this Will become Window

data() {
    
  return {
    
    name: "vue"
  }
}

MVVM

 Insert picture description here
 Insert picture description here
therefore vm yes Vue example ,v yes dom Built view,m yes data model.

{ { }} Can read data() Everything in , Can read Vue Everything on the instance , Can read Vue Everything on the prototype . So the above contents can be directly used in template In the template .
Next section : Front end vue Data proxy and hijacking

copyright notice
author[A little rabbit who likes eating radishes],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/116/202204261123446570.html

Random recommended