使用Vue的时候需要通过构造函数Vue()创建一个Vue根实例,这个根实例是View和Model交互的桥梁,格式代码如下:
var App= new Vue({ //编写选项代码 });
使用关键字new调用Vue构造器创建一个新的Vue实例,在实例中需要传入一些选项对象,选项对象包括el(挂载元素)、data(数据)、methods(方法)、template(模板)、生命周期钩子函数等。例2-1演示创建Vue实例的过程。
第一个Vue程序
在Chrome浏览器上运行第一个Vue应用程序,并按F12键进入开发者工具模式, 在控制台输入app.message=‘Hello Vue’,然后按Enter键,浏览器中显示的内容会直接变成Hello Vue
此时可以在控制台直接输入app.message修改message的值,中间可以省略data,在这个操作中,笔者并没有主动操作DOM,只是让页面的内容发生了变化,这就是通过Vue的数据绑定功能实现的。在MVVM模式中Vue要求ViewModel层使用观察者模式实现数据的监听与绑定,以此做到数据与视图的快速响应。
Vue开发工具
前端开发工具有很多,笔者偏爱WebStorm,WebStorm是Jetbrains公司旗下一款JavaScript开发工具。已经被广大中国JS开发者誉为“Web前端开发神器”“最强大的HTML5编辑器”“最智能的JavaScript IDE”等。其与IntelliJ IDEA同源,继承了IntelliJ IDEA强大的JS部分功能。
下载WebStorm工具
官网地址:https://www.jetbrains.com/webstorm/download/#section=Windows。WebStorm的安装也比较简单,基本一路单击“下一步”按钮就可以了。注意:WebStorm本身不是免费的,应通过正规渠道进行安装。
安装WebStorm
安装成功后,就可以创建第一个项目了,
JavaScript版本修改为最新的ES6
在学习Vue.js之前,首先要了解ES6。ECMAScript 6(简称ES6)是JavaScript的语言标准。Vue.js需要ES6的语法支持,所以需要更改WebStorm中的ECMAScript版本,
Vue-cli脚手架
利用Vue-cli脚手架构建Vue项目。现在的网速越来越快了,很多人家里都是几十甚至上百兆位每秒的光纤,手机也是4G网络起步了,按道理一个网页才几百KB数据,而且浏览器本身还会缓存很多资源文件,那么几十兆位每秒的光纤为什么打开一个之前已经打开过的有缓存的页面还是很慢呢?这就是因为浏览器本身处理DOM也是有性能瓶颈的,尤其是在传统开发中,用JQuery或者原生的JavaScript DOM操作函数对DOM进行频繁操作的时候,浏览器要不停地渲染新的DOM树,从而导致页面看起来非常卡顿。
Virtual DOM是虚拟DOM的英文,简单来说,它可以预先通过JavaScript进行各种计算,把最终的DOM操作计算出来并优化,由于这个DOM操作属于预处理操作,所以并没有真实地操作DOM,因此叫作虚拟DOM。最后,计算完毕才真正将DOM操作提交,并将DOM操作变化反映到DOM树上。