起步案例
做为第一个案例, 主要给大家介绍vue的最基本使用.
vue使用的3步曲(重点)
1引入vue.js
2编写页面(视图)
3创建App实例并挂载
- 引入vue.js
在html的头部, 通过
<script src="../node_modules/vue/dist/vue.global.js"></script>
- 编写页面(视图)
在body中, 编写一个div元素, id为app, 所有视图部分将在这部分渲染
示例
<div id="app">hello</div>
- 创建App实例并挂载
示例
// 1. 从Vue中解构相应的API
const { createApp } = Vue
// 2. 创建App, 传入一个对象, 返回一个应用实例
const app = createApp({})
// 3. 挂载
app.mount('#app')
</script>
1Vue是我们从vue.global.js中导入的对象, 从对象中解构出需要的API函数
2createApp 传入一个对象, 返回应用实例
3app.mount挂载到HTML对应的位置
- 声明式渲染
声明式渲染
跟变量, 函数类似, 需要使用什么就先声明一下.
使用流程
Vue被称为声明式渲染, 使用步骤
1声明状态(变量)
2使用状态(变量)
声明状态
示例
data() {
return {
msg: 'hello',
}
},
})
●data 配置项: data必须是一个函数, 在函数中返回对象, 在返回的对象中声明状态
这里大家先当做固定写法, 后面会详细分析
使用状态
示例
{{ msg }}
</div>
●通过{{}}(插值表达式)使用在data中定义的状态
5) 响应式数据
什么是响应式数据
当状态值发生变化时, Vue会自动响应变化, 使用新的数据重新渲染视图
安装调试工具
借助调试工具, 演示响应式数据
- 小结
💡 Vue的两个特点
1声明式渲染: 先声明后使用
2响应式数据: 数据改变时, 视图会响应数据的改变, 重新渲染新的值
完整版视频教程
