js前端【js前端分页】 收藏 0

前端开发之认识Vue.js

单独来讲，Vue.js被定义成一个用来开发Web界面的前端库，是个非常轻量级的工具。Vue.js本身具有响应式编程和组件化的特点。

所谓响应式编程,即为保持状态和视图的同步，这个在大多数前端MV*（MVC/MVVM/MVW）框架，不管是早期的backbone.js还是现在AngularJS都对这一特性进行了实现（也称之为数据绑定），但这几者的实现方式和使用方式都不相同。相比而言，Vue.js使用起来更为简单，也无需引入太多的新概念，声明实例new Vue({ data : data })后自然对data里面的数据进行了视图上的绑定。修改data的数据，视图中对应数据也会随之更改。

Vue.js的组件化理念和ReactJS异曲同工——“一切都是组件”，可以将任意封装好的代码注册成标签，例如：Vue.component(\’example\’, Example)，可以在模板中以的形式调用。如果组件抽象得合理，这在很大程度上能减少重复开发，而且配合Vue.js的周边工具vue-loader，我们可以将一个组件的CSS、HTML和js都写在一个文件里，做到模块化的开发。

除此之外，Vue.js也可以和一些周边工具配合起来，例如vue-router和vue-resource，支持了路由和异步请求，这样就满足了开发单页面应用的基本条件。

相比较Angularjs和ReactJS，Vue.js一直以轻量级，易上手被称道。MVVM的开发模式也使前端从原先的DOM操作中解放出来，我们不再需要在维护视图和数据的统一上花大量的时间，只需要关注于data的变化，代码变得更加容易维护。虽然社区和插件并没有一些老牌的开源项目那么丰富，但满足日常的开发是没有问题的。Vue.js 2.0也已经发布了beta版本，渲染层基于一个轻量级的 virtual-DOM 实现，在大多数场景下初始化渲染速度和内存消耗都提升了 2~4 倍。而阿里也开源了weex（可以理解成ReactJS-Native和ReacJS的关系），这也意味着Vue.js在移动端有了更多的可能性。

不过，对于为什么要选择使用一个框架，都需要建立在一定的项目基础上。如果脱离实际项目情况我们来谈某个框架的优劣，以及是否采用这种框架，我觉得是不够严谨的。

作为新兴的前端框架，Vue.js也抛弃了对IE8的支持，在移动端支持到Android 4.2+和iOS 7+。所以如果你在一家比较传统，还需要支持IE6的公司的话，你或许就可以考虑其他的解决方案了（或者说服你的老板）。另外，在传统的前后端混合（通过后端模板引擎渲染）的项目中，Vue.js也会受到一定的限制，Vue实例只能和后端模板文件混合在一起，获取的数据也需要依赖于后端的渲染，这在处理一些JSON对象和数组的时候会有些麻烦。

理想状态下，我们能直接在前后端分离的新项目中使用Vue.js最合适。这能最大程度上发挥Vue.js的优势和特性，熟悉后能极大的提升我们的开发效率以及代码的复用率。尤其是移动浏览器上，Vue.js压缩后只有18KB，而且没有其他的依赖。

现在来看一下我们第一个Vue.js项目，按照传统，我们来写一个Hello World。

首先，引入Vue.js的方式有很多，你可以采用直接使用CDN，例如：

也可以通过NPM进行安装：

正确引入Vue.js之后，我们在HTML文件中的内容为：

应用的js如下：

输出结果为：

这种形式类似于前端模板引擎，我们把js中message值替换了HTML模板中{{message}}这部分。

不过，如果仅仅是这样的例子，我相信你也不会有什么兴趣去使用Vue.js。根据上文对Vue.js的说明，我们继续写两个有关于它特性的例子。

第一个特性是数据绑定，我们可以在运行上述例子的浏览器控制台（console）环境中输入vm.message = \’Hello Vue.js\’，输出结果就变为了Hello Vue.js。也就说明vm.message和视图中的{{message}}是绑定的，我们无需手动去获取<h1>标签来修改里面的innerHTML。

同样，我们也可以绑定用户输入的数据，视图会随着用户的输入而变化，例如：

vm.message的值会随着用户在input中输入的值的变化而变化，而无需我们手动去获取DOM元素的值再同步到js中。

第二个特性是组件化，简单来说我们可以自己定义HTML标签，并在模板中使用它，例如：

我们在浏览器里最终看到的HTML结果为：

可以看到自定义的标签<message>被替换成了<h1>Hello World</h1>，当然，实际中的组件化远比示例复杂，我们会给组件添加参数及方法，使之能更好地被复用。

如果说这几个例子引起了你对Vue.js的兴趣的话，那接下来就将它真实地运用到生产环境中吧。

本文节选自《Vue.js 前端开发 快速入门与专业应用》

内容简介

本书主要介绍Vue.js的使用方法和在实际项目中的运用，它既可以在一个页面中单独使用，也可以将整站都构建成单页面应用。为了便于理解，本书会从传统的开发角度切入，先从数据渲染、事件绑定等方面介绍在Vue.js中的使用方法，然后渐进到Vue.js自身的特性，例如数据绑定、过滤器、指令以及最重要的组件部分。除了框架用法外，本书还介绍了和Vue.js相关的重要插件和构建工具，这些工具有助于帮助用户构建一个完整的单页面应用，而不仅仅是停留在个人DEMO阶段的试验品。而对于复杂项目，Vue.js也提供了对应的状态管理工具Vuex，降低项目的开发和维护成本。鉴于完稿前，Vue.js 2.0已正式发布完毕，本书也在相关用法上对比了1.0和2.0的区别，并补充了render函数和服务端渲染等特性。

本书适用于尚未接触过MVVM类前端框架的开发者，或者初步接触Vue.js的开发者，以及实际应用Vue.js开发项目的开发者。

JSX、TSX、JS、TS：前端代码“四兄弟”，傻傻分不清？一文全解！

哈喽，各位前端同仁！在前端开发的世界里，我们每天都与各种代码打交道，其中 JSX、TSX、JS 和 TS 这四个家伙经常会让我们傻傻分不清。它们之间有什么关系？又有什么区别呢？今天，我们就来彻底梳理一下这四者的关系，让你不再迷茫！

JS：JavaScript，前端世界的基石

首先，我们来说说 JS (JavaScript)。JS 是一种动态的、弱类型的脚本语言，它是前端开发的核心语言，几乎所有前端框架和库都基于 JS 构建。

JS 的特点：

• 动态类型： 变量的类型在运行时确定，不需要提前声明类型。
• 弱类型： 变量可以赋值为不同的类型，类型转换比较灵活。
• 解释型语言： JS 代码在浏览器中逐行解释执行。
• 广泛应用： JS 可以用于前端开发、后端开发、移动开发等多个领域。

JS 的例子：

TS：TypeScript，JS 的超集

接下来，我们来说说 TS (TypeScript)。TS 是 JS 的一个超集，它在 JS 的基础上添加了静态类型检查功能。TS 代码最终会被编译成 JS 代码，然后在浏览器中执行。

TS 的特点：

• 静态类型： 变量的类型在编译时确定，需要提前声明类型。
• 强类型： 变量的类型一旦确定，就不能随意修改，类型转换需要显式进行。
• 编译型语言： TS 代码需要通过 TypeScript 编译器编译成 JS 代码。
• 类型安全： TS 可以在开发时发现类型错误，提高代码质量和可维护性。

TS 的例子：

JSX：JavaScript 的 XML 扩展

JSX (JavaScript XML) 是一种 JS 的语法扩展，它允许我们在 JS 代码中编写类似 HTML 的结构，主要用于 React 开发。

JSX 的特点：

• 声明式 UI： 通过 JSX，我们可以像描述 UI 结构一样编写代码。
• JS 表达式： JSX 支持使用 JS 表达式，可以动态生成 UI。
• React 专属： JSX 主要用于 React 项目中，其他框架一般不使用 JSX。
• 编译为 JS： JSX 代码需要通过 Babel 等工具编译成标准的 JS 代码。

JSX 的例子：

TSX：TypeScript 的 JSX 扩展

TSX (TypeScript XML) 是一种 TS 的语法扩展，它在 JSX 的基础上添加了类型检查功能。TSX 代码可以被 TypeScript 编译器编译成 JS 代码。

TSX 的特点：

• 类型安全： TSX 支持 TypeScript 的类型系统，可以在编译时进行类型检查。
• 类型化的 React 组件： TSX 可以提供更好的代码提示和自动补全功能。
• 编译为 JS： TSX 代码需要通过 TypeScript 编译器编译成标准的 JS 代码。
• TypeScript 专属： TSX 主要用于 TypeScript 项目中。

TSX 的例子：

四者的关系：

• JS 是基础，所有前端代码最终都会变成 JS 代码运行。
• TS 是 JS 的超集，它添加了静态类型检查功能，可以提高代码质量。
• JSX 是 JS 的扩展，它可以让我们在 JS 中编写类似 HTML 的结构，主要用于 React 开发。
• TSX 是 TS 的扩展，它在 JSX 的基础上添加了类型检查功能，用于 TypeScript 的 React 开发。

总结：

• JS： 前端开发的基石，动态、弱类型。
• TS： JS 的超集，静态、强类型，可以提高代码质量。
• JSX： JS 的 XML 扩展，用于编写 UI 结构。
• TSX： TS 的 JSX 扩展，用于类型安全的 UI 开发。

选择哪一个？

• 如果你正在使用纯 JavaScript 开发项目，那么你只需要使用 JS 和 JSX。
• 如果你正在使用 TypeScript 开发项目，那么你应该使用 TS 和 TSX。
• 如果你是初学者，建议先学习 JS，然后再学习 TS，这样更容易理解 TS 的优势。

结尾：

希望这篇文章能帮你更好地理解 JSX、TSX、JS 和 TS 之间的关系。如果你觉得这篇文章对你有帮助，请点赞、评论、收藏，也欢迎分享给你的朋友们。让我们一起在前端的道路上越走越远！

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com