![在这里插入图片描述](https://img-blog.csdnimg.cn/786e69f650bd489ca3f2e7c822699285.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA54K55bq35oWV,size_20,color_FFFFFF,t_70,g_se,x_16)
一、Vue是什么?
![在这里插入图片描述](https://img-blog.csdnimg.cn/66402f0401414c6fa192075c9ea403fb.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA54K55bq35oWV,size_20,color_FFFFFF,t_70,g_se,x_16)
- Vue是一套用于
构建用户界面
的渐进式
JavaScript框架 - 构建用户界面:前端拿到数据 → 通过Vue框架 → 渲染到界面上
- 渐进式:Vue可以自底向上逐层的应用:针对不同的应用引入合适的Vue库
- 简单应用:只需要一个轻量小巧的核心库
- 复杂应用:可以引入各式各样的Vue插件
- Vue是后起之秀,生态完善,已然成为国内前端工程师必备技能
二、Vue特点
采用组件化模式,提高代码复用率,且让代码更好维护
声明式编码,让编码人员无需直接操作DOM,提供开发效率
使用虚拟DOM+优秀的Diff算法,尽量复用DOM节点
- 采用
组件化
模式,提高代码复用率,且让代码更好维护
![在这里插入图片描述](https://img-blog.csdnimg.cn/09015e97886c46b19bba773f0c3a38a2.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA54K55bq35oWV,size_20,color_FFFFFF,t_70,g_se,x_16)
声明式
编码,让编码人员无需直接操作DOM,提供开发效率
![在这里插入图片描述](https://img-blog.csdnimg.cn/1fe025ca24994cba847340cd483c2dc1.png)
![在这里插入图片描述](https://img-blog.csdnimg.cn/91389de724364b4283cfd2b93432d2e0.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA54K55bq35oWV,size_20,color_FFFFFF,t_70,g_se,x_16)
- 使用
虚拟DOM
+优秀的Diff算法
,尽量复用DOM节点
- 原始JavaScript实现
![在这里插入图片描述](https://img-blog.csdnimg.cn/19fdf3b19285401ead1e8f9f715c47bb.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA54K55bq35oWV,size_20,color_FFFFFF,t_70,g_se,x_16)
- Vue实现
![在这里插入图片描述](https://img-blog.csdnimg.cn/e44201d2b6c84475be2b8896adddac08.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA54K55bq35oWV,size_20,color_FFFFFF,t_70,g_se,x_16)
三、命令式编码与声明式编码
![在这里插入图片描述](https://img-blog.csdnimg.cn/562e650134b6459db3bb444aa52b4974.png)
3.1 命令式编码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>命令式编码与声明式编码</title>
</head>
<body>
<ul id="list"></ul>
<script>
let persons = [
{ id: "001", name: "张三", age: 18 },
{ id: "002", name: "李四", age: 19 },
{ id: "003", name: "王五", age: 20 }
];
let htmlStr = "";
persons.forEach(person => {
console.log(person);
htmlStr += `<li>${person.id} - ${person.name} - ${person.age}</li>`;
});
let list = document.getElementById("list");
list.innerHTML = htmlStr;
</script>
</body>
</html>
3.2 声明式编码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>命令式编码与声明式编码</title>
<script src="../vue.js"></script>
</head>
<body>
<ul id="list">
<li v-for="person in persons">
{{person.id}} -- {{person.name}} -- {{person.age}}
</li>
</ul>
<script>
let vue = new Vue({
el: "#list",
data: {
persons: [
{ id: "001", name: "张三", age: 18 },
{ id: "002", name: "李四", age: 19 },
{ id: "003", name: "王五", age: 20 }
]
}
});
</script>
</body>
</html>
四、学习Vue的前置知识
- ES6语法规范
- ES6模块化
- 包管理器
- 原型、原型链
- 数组常用的方法
- axios
- promise