复习次数 ：✔
1.1 vue优势
1.2 vue环境
直接在idea的插件搜vue.js，然后下载。
接着创建一个空项目，并添加模块。然后，创建一个html文件。
1.3 vue例子
完整的html代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><!--view层--><h1 id="bottom-h">{{message2}}</h1><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js"></script> <!--CDN，视图层和数据层的中间件--><script>var vm = new Vue({el: "#bottom-h", /*绑定id*//*model层*/data: {message :"hello!",message2:"nihao!"}});</script>
</body>
</html>运行结果如下：
1.4 注意点
其中，使用CDN来安装和管理vue的依赖：
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js"></script>注意点：
1.创建Vue对象：var vm = new Vue(); 其中，Vue的V是大写的，然后在小括号里面写花括号；
2.花括号里有el和data属性；
3.el用来绑定id，"#id名"；
4.data用来存储数据，作为model层，格式是：data:{key = "xxx"}，如果存在两个key，用逗号隔开；
5.el和data用逗号隔开；
6.在视图层(view层)用{{key}}来接收数据;
1.5 通过网页，不刷新改变视图层的值
打开网页，点击console：
输入vm.key名 = "修改的内容"，然后回车，即可改变视图层的数据：
这里的key是message。
![[算法很美打卡] 多维数组篇 (打卡第一天)](https://img-blog.csdnimg.cn/a2f41a8aec6a4aff82f30d037deec3ed.png)
![P3183 [HAOI2016] 食物链](https://img-blog.csdnimg.cn/img_convert/885bb82396e1705f14c40c0cbdb12fa9.png)
