1.2如何使用vue.js

Posted 2021-01-11 Javascript设计模式

每一个框架的产生都是为了解决某个具体的问题，在正式开始学习vue.js前，我们先对传统前端开发模式和vue.js的开发模式做一个对比，以此了解vue.js产生的背景和核心思想。

1.2.1 传统的前端开发模式

前端技术在近几年发展迅速，如今的前端开发已不再是10年前哪个写html和css那样的简单了，新的概念层出不穷，比如es6，node.js，npm，前端工程化。这些新东西在不断优化我们的开发模式，改变我们的编程思想。

随着这些技术的普及，一套可称为”万金油“的技术栈被许多商业项目用于生产环境：

jquery+requireJS+artTemplate+gulp

这套技术栈以jquery为核心，能兼容大部分浏览器，这是很多企业比较关心的，因为他们的客户很可能还在用ie7及以下的浏览器，使用requireJS或 seajs进行模块化开发可以解决代码以来混乱的问题，同时便于维护及团队写作，使用轻量级的前端模板（如dot）可以将数据与html模板分离，最后使用自动化构建工具如gulp可以合并压缩代码，如果你喜欢写less/sass以及现在流行的es6,也可以帮你进行预编译。

这样一套看似完美无瑕的前端解决方案就构成了我们所说的传统前端开发模式，由于它的简单 高效 使用，至济南仍有不少开发者使用，不过随着项目的扩大和时间的推移，出现了更复杂的业务场景，比如spa（单页面富应用）/组件接偶等。为了提升开发效率，降低维护成本，传统的前端开发模式已经不能完全满足我们的需要，这是就出现了angular react 以及我们要介绍的主角vue.js

1.2.2 vue.js的开发模式

vue.js是一个渐进式的javascript框架，根据项目需求，你可选择从不同的维度来使用它，如果你只是想体验vue.js带来的快感，或者开发几个简单的html5页面或小应用，你可直接通过script 加载cnd文件。两种版本都可以，如果你不太了解各版本的差别，建议直接使用最新的稳定版本，引入vue.js框架后，在body底部使用newVue（）的方式创建一个实例，这就是vue.js最基本的开发模式，现在可以写入一下完整的代码来快速体验vue