定义#

Vue是一款用于构建用户界面的渐进式JavaScript框架。它基于数据渲染出用户看到的界面，简化了DOM操作，提高了开发效率。

语法/用法#

1
<div id="app">
2
    {{message}}
3
</div>
4

5
<script type="module">
6
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
7
    createApp({
8
        data() {
9
            return {
10
                message: 'Hello Vue'
11
            }
12
        }
13
    }).mount('#app')
14
</script>

1
// Vue实例中的数据
2
data() {
3
    return {
4
        message: 'Hello Vue'
5
    }
6
}
7

8
// 模板中的插值表达式
9
{{message}}

常见场景#

1. 构建用户界面：基于数据渲染出用户看到的界面
2. 局部模块改造：使用Vue改造现有项目的部分功能
3. 工程化开发：基于Vue核心包和插件进行整站开发
4. 数据绑定：实现数据与视图的自动同步更新

注意事项#

1. 渐进式框架：

   • 不需要一次性学习所有特性
   • 可以逐步引入Vue的功能
   • 从简单到复杂逐步使用

2. Vue应用结构：

   • 必须通过createApp()创建Vue应用实例
   • 数据必须定义在data()方法中
   • 必须通过mount()方法挂载到DOM元素

3. 插值表达式限制：

   • 只能写在Vue控制的区域内（如#app内部）
   • 只能使用Vue中定义的数据
   • 不能使用JavaScript语句

4. 开发模式：

   • 局部模块改造：基于Vue核心包完成项目局部模块改造
   • 工程化开发：基于Vue核心包、插件进行整站开发

相关链接#

• Vue指令-v-for
• Vue指令-v-bind
• Vue指令-v-model
• Vue生命周期