《Vue零基础入门教程》第三课：起步案例

往期内容

《Vue零基础入门教程》第一课：Vue简介

《Vue零基础入门教程》第二课：搭建开发环境

做为第一个案例, 主要给大家介绍vue的最基本使用.

vue使用的3步曲(重点)

1. 引入vue.js
2. 编写页面(视图)
3. 创建App实例并挂载

1) 引入vue.js

在html的头部, 通过<script src>引入vue.global.js

示例

<!-- 1. 引入vue.js -->
<script src="../node_modules/vue/dist/vue.global.js"></script>

2) 编写页面(视图)

在body中, 编写一个div元素, id为app, 所有视图部分将在这部分渲染

示例

<!-- 2. 编写页面 -->
<div id="app">hello</div>

3) 创建App实例并挂载

示例

<script>// 1. 从Vue中解构相应的APIconst { createApp } = Vue// 2. 创建App, 传入一个对象, 返回一个应用实例const app = createApp({})// 3. 挂载app.mount('#app')
</script>

1. Vue是我们从vue.global.js中导入的对象, 从对象中解构出需要的API函数
2. createApp 传入一个对象, 返回应用实例
3. app.mount挂载到HTML对应的位置

4) 声明式渲染

声明式渲染

跟变量, 函数类似, 需要使用什么就先声明一下.

使用流程

Vue被称为声明式渲染, 使用步骤

1. 声明状态(变量)
2. 使用状态(变量)

声明状态

示例

const app = createApp({data() {return {msg: 'hello',}},
})

• data 配置项: data必须是一个函数, 在函数中返回对象, 在返回的对象中声明状态

这里大家先当做固定写法, 后面会详细分析

使用状态

示例

<div id="app">{{ msg }}
</div>

• 通过{{}}(插值表达式)使用在data中定义的状态

5) 响应式数据

什么是响应式数据

当状态值发生变化时, Vue会自动响应变化, 使用新的数据重新渲染视图

安装调试工具

借助调试工具, 演示响应式数据

6) 小结

💡 Vue的两个特点

1. 声明式渲染: 先声明后使用
2. 响应式数据: 数据改变时, 视图会响应数据的改变, 重新渲染新的值

完整版视频教程请dd