vue 怎么搭建主页框架（手把手带你学习Vue框架-Vue入门程序）
vue 怎么搭建主页框架（手把手带你学习Vue框架-Vue入门程序）# 性能高 1、Vue采用了MVVM设计模式 图1-1 传统项目和Vue项目区别Vue的好处：# 开发方便
一、Vue概述Vue官网：https://v2.cn.vuejs.org/
Vue：是一个渐进式的JavaScript框架
框架：是一个架子【半成品项目】，那么我们不需要每次开发该类型的项目时，手动重复的搭建架子
Vue框架：别人封装好的一些功能，以及项目的一些配置环境，供别人直接使用
库：封装的某一个功能
图1-1 传统项目和Vue项目区别
二、Vue好处Vue的好处：
# 开发方便
1、Vue采用了MVVM设计模式
# 性能高
1、Vue采用了真实DOM和虚拟DOM【Diffing算法】
三、Vue的MVVM设计模式- M：数据【后端响应给前端的数据】
- V：页面
- VM：view model【视图模型】
采用CDN形式开发Vue入门程序：https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js
创建index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
</head>
<body>
<!-- app容器 -->
<div id="app">
<div>
<h1>{{message}}</h1>
</div>
<div>
<h1>{{abc}}</h1>
</div>
</div>
<script>
// 实例化Vue对象[配置：数据、容器]
new Vue({
el:"#app" // 容器
data:{
message:"这是一个数据"
abc:123
}
});
</script>
运行流程：
1、页面加载
2、实例化Vue对象
3、加载#app容器
4、data中属性渲染到#app容器中
