往期内容
《Vue零基础入门教程》第一课：Vue简介
《Vue零基础入门教程》第二课：搭建开发环境
《Vue零基础入门教程》第三课：起步案例
《Vue零基础入门教程》第四课：应用实例
《Vue零基础入门教程》第五课：挂载
1) 状态
data选项
- data选项必须是一个函数(在介绍组件时再详细讨论)
- 在函数中返回一个对象, 在对象中定义状态
- 在data中定义的状态, 可以在模板中使用
const app = createApp({data() {return {msg: 'hello',}},
})思考
Q: data选项可以定义成箭头函数吗?
A: 可以, 箭头函数和普通函数的区别在于函数内部this的指向.
- 普通函数中, this指向
当前根组件实例 - 箭头函数不绑定this, 指向
window
如果需要使用箭头函数, 同时也需要能拿到当前实例. 可以通过如下方式
const app = createApp({data: (vm) => {console.log(vm)return {msg: 'hello',}},
})- data可以接受一个参数. 该参数指向
当前根组件实例
不同类型类型说明
2) 方法
methods选项
- 语法: methods中定义方法
- 作用: 修改data中的状态
<!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>Document</title><script src="../node_modules/vue/dist/vue.global.js"></script></head><body><div id="app"><button v-on:click="increment">点击+1: {{count}}</button></div><script>const { createApp } = Vueconst app = createApp({data() {return {count: 0,}},methods: {increment() {// 该函数中的this指向当前根组件实例instanceconsole.log(this)this.count++},},})const instance = app.mount('#app')</script></body>
</html>
- methods中定义的方法要求是普通函数 在普通函数中通过this拿到当前实例对象
3) 小结
重要结论
- 状态就是用来 保存 数据的
- 方法就是用来 修改 数据的