姓名实例_methods

Vue Comments

通过一个实例，简单说明Vue中数据绑定+模块刷新

本文要点：

  • 模块刷新的原理
  • vue的数据绑定

正文

先看基本代码

让我们开始逐步拆解

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<body>
    
    <div id="root">
        姓 <input type="text" v-model="firstName"> <br>
        名 <input type="text" v-model="lastName"> <br>
        全名 <span> {{fullname()}}</span>
    </div>
    <script>
        Vue.config.productionTip=false //阻止vue在启动时生成生产提示
    new Vue({
    el:'#root',
    data:{
    firstName:'张',
    lastName:'三'
    },
    methods:{
        fullname(){
            console.log("这个方法被调用了");
            return this.firstName + '-' +this.lastName
        }
    }
    })
    </script>
</body>
  1. ^Vue模块
1
2
3
4
5
6
<div id="root">
      姓 <input type="text" v-model="firstName"> <br>
      名 <input type="text" v-model="lastName"> <br>
      全名 <span> {{fullname()}}</span>
  </div>
  1. Vue实例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
        Vue.config.productionTip=false //阻止vue在启动时生成生产提示
    new Vue({
    el:'#root',
    data:{
    firstName:'张',
    lastName:'三'
    },
    methods:{
        fullname(){
            console.log("这个方法被调用了");
            return this.firstName + '-' +this.lastName
        }
    }
    })
    </script>
  1. 分析过程，当input中输入数据，data中的数据发生改变，vue会自动重新解析 [^vue实例] ，如果包含vdata的则直接刷新，有调用方法则重新调用

image-20220725153238921

jhfutureWeb Developer & Designer

一个记录技术分享的网站。