网站首页原型图咋做网站建设基础筹备

学习自哔哩哔哩上的“刘老师教编程”，具体学习的网站为：8.Vue框架快速上手_哔哩哔哩_bilibili，以下是看课后做的笔记，仅供参考。

第一节：前端环境准备

编码工具VSCode【www.code.visualstudio.com】/WebStorm也可，依赖管理NPM，项目构建VueCli

第二节：Vue框架介绍

Vue是一套用于构建用户界面的渐进式框架，Vue.js提供了MVVM数据绑定和一个可组合的组件系统，简单灵活的API，其目标是通过尽可能简单的API实现响应式的数据绑定和可组合的视图组件。

MVVM是一种基于前端开发的架构模式，核心是提供对View和View Model的双向数据绑定，Vue提供了MVVM风格的双向数据绑定，核心是MVVM中的VM，就是ViewModel，ViewModel负责连接View和Model，保证试图和数据一致性。

第三节：Vue快速入门

导入vue.js的script脚本文件

<script src="https://unpkg.com/vue@next"></script>

在页面声明一个将要被vue所控制的DOM区域，既MVVM中View

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

创建vm实例对象（vue实例对象）

const hello = {//指定数据源，既MVVM中的Modeldata: function(){return {message: 'hello vue'}}
}const app = Vue.createApp(hello)
app.mount('#app')