前言:在过去的十年里,我们的网页变得更加动态化和强大了,通过JavaScript,我们已经把很多传统的服务器端代码放入到浏览器中。
这就导致浏览器中产生了成千上万行的JavaScript代码,它们连接了各式各样的HTML和CSS文件,但缺乏正规的组织形式。
这也是为什么越来越多的开发者使用JavaScript框架,诸如Angular、React或Vue。下面我们对Vue进行介绍。
1 Vue 简介
- Approachable---友好
- Versatile---多用途
- Performant---高性能
- Maintainable---可维护
- Testable---可测试
Vue是一款友好的、多用途且高性能的JavaScript框架,它能够帮你创建可维护性和可测试性更强的代码库。同时它也是渐进式Javascript框架,也就是说,如果你已经有一个现成的服务端应用,你可以将Vue作为该应用的一部分嵌入其中,带来更加丰富的交互体验。或者你希望将更多业务逻辑放到前端来实现,那么Vue的核心库及生态系统,也可以满足你的各式需求。
和其他前端框架一样,Vue允许你将一个前端网页分割成可复用的组件,每个组件都包含属于自己的Html、JavaScript和Css来渲染网页中相应的地方。
接下来,就让我们亲自动手构建一个简单的页面,向小明同学表白吧。
2 前期准备
2.1 软件准备
可以使用IDEA或Webstorm作为开发软件,这里我们使用的是Webstorm。安装包可以从官网下载,官网地址为:https://www.jetbrains.com/webstorm/download/#section=windows。打开网站后,我们看到如图所示页面,点击Download按钮,即可下载最新版安装包。您也可以在公共号向后台发送"webstorm"直接获取软件安装包。
2.2 软件安装
双击webstorm.exe开始安装,安装过程按提示操作即可,安装结束后,即可试用。
2.3 环境准备
1、打开电脑,在D盘新建一个Hello文件夹,作为我们的工程文件夹;
2、在Hello文件夹下,新建一个js文件夹,用来存放vue.js文件;
3、打开Vue官网(https://cn.vuejs.org/v2/guide/installation.html)配置开发环境。如图所示,我们选择开发版本,下载vue.js文件,保存在新建的js文件夹下。
4、打开webstorm软件,选中File菜单栏下的Open选项,打开项目文件夹Hello,点击OK即可。
5、接下来我们新建一个Html文件,点击File菜单栏下的New,选中HTML File。
会弹出下面的对话框,输入我们想要自定义的文件名字,这里我们输入index,点击HTML 5 file,我们的Html文件就创建好了。接下来就可以开始我们的表白之旅啦!
3 开始表白
3.1 书写html页面
我们只要在标签中加入我们的代码,一个简易的Vue代码就完成了。
3.2 浏览器打开
1、我们可以直接在D盘中打开Hello文件夹,也可以在Webstorm中鼠标选中Hello文件夹,右键选中Show in Explorer就可以直接定位到Hello文件夹所在的位置。
2、右键选中我们编辑后的Html文件,用浏览器打开即可。
3、下面我们来看一看效果。
3.3 调试
打开F12,选择控制台,输入app.classmate后按回车,我们发现控制台中就出现了小明同学的名字啦,假如这时候又爱上了小红同学,我们能否通过控制台向小红同学表白呢?答案是肯定的!只要将小红同学的名字给app.classmate重新赋值就可以了。如图所示,页面上表白的对象就变成小红了。
可以看出,我们可以通过控制台可以更改页面上的显示内容。这是因为Vue是响应式的,也就是说当我们的数据更新时,Vue会更新到网页上所有用到该数据的地方,除了字符串,Vue对其他数据类型,也是如此哦,是不是很有意思呢?你学会了吗?