Vue实例

# 1 属性和方法

Vue 应用的核心就是 Vue 实例 , 一个基本的 Vue 实例包括如下图所示:

new Vue({
  el: '#app',
  data: {},
  methods: {},
})

1
2
3
4
5

el: 表示要操作的页面元素
data: 数据, 可以理解为面向对象中类的"属性"
methods: 方法, 可以理解为面向对象中类的"方法"

属性

当 Vue 实例创建时, 会获取 data 中的数据, 并渲染到视图中, 并监视 data 中数据的变化, 当 data 中的数据改变时, 重新渲染视图

方法

方法就是: 响应视图中的事件, 并修改 data 里的数据

重要结论

属性就是用来保存数据的
方法就是用来修改数据的

案例

实现一个简单的加法器

两个输入框,填写两个数字, 点击=号时, 计算结果

add

# 1) 完成 Vue 的三步曲

在 src 目录下创建03_加法器.html

示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>03_加法器</title>
    <!-- 1. 引入vue.js -->
    <script src="../node_modules/vue/dist/vue.js"></script>
  </head>
  <body>
    <!-- 2. 编写div元素 -->
    <div id="app"></div>
    <!-- 3. 编写vue实例 -->
    <script>
      const vm = new Vue({
        el: '#app',
      })
    </script>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 2) 编写页面

分析

页面由两个 input 框和一个按钮, 再加一个 input 框组成

示例

<div id="app">
  <input type="text" />
  +
  <input type="text" />
  <button>=</button>
  <input type="text" />
</div>

1
2
3
4
5
6
7

# 3) 编写逻辑

# i 绑定属性

html 部分

<div id="app">
  <input v-model="first" type="text" />
  +
  <input v-model="second" type="text" />
  <button>=</button>
  <input v-model="result" type="text" />
</div>

1
2
3
4
5
6
7

使用 v-model 绑定属性

js 部分

const vm = new Vue({
  el: '#app', // 元素
  data: {
    first: 0,
    second: 0,
    result: 0,
  }, // 属性
  methods: {}, // 方法
})

1
2
3
4
5
6
7
8
9

# ii 绑定方法

html 部分

<button v-on:click="add">=</button>

使用 v-on 绑定 click 方法

js 部分

 methods: {
     add() {
         this.result = parseInt(this.first) + parseInt(this.second)
     }
 } // 方法

1
2
3
4
5

# 4) 小结

小结

data: 保存数据
methods: 改变数据

# 5) 作业

根据上面的学习, 能否自己动手编写一个四则运算, 效果如下:

![计算器](http://image.brojie.cn// imagescalc.gif)

# 2 生命周期

Vue 的生命周期相对来说是一个比较有难度的内容.

由于我们这个教程的定位是极速入门, 学习生命周期需要花费不少时间

出于这样的考虑, 我决定先略过这部分

一句话总结

生命周期: 就是 vue 实例从创建到销毁的整个过程

生命周期函数: 就是在不同的时间点被自动调用的函数

create 函数: 初始化数据

#

如果觉得有帮助, 可以微信扫码, 请杰哥喝杯咖啡~

#vue2

上次更新: 2021/09/03, 15:32:17

← MVVM模型模板语法→